JavaScript & izračunavanje inverzne boje

[mega023]

Problem je sledeci...
imam neku boju npr.

boja = "#FFFFFF";

hocu da izracunam kontrasnu boju (invertovanu)

u ovom slucaju to je #000000

kako da to izvedem za bilo koju boju?
ima li ko ideju?

[Petar Marić]

Ako želiš invertovanu boju to se svodi na
kontrastna_boja = not boja; //pseudo kod
ili
kontrastna_boja = 0xFFFFFF - boja; //pseudo kod

Mada mislim da to nije preterano pametno jer što je boja bliža "sredini" (npr #777777 ili #888888) dobijaš efektivno manji kontrast.

[mega023]

doduse nasao sam 3 PHP verzije koda...
ako neko zna da "prevede" na JavaScript bio bih mu veoma zahvalan
posto nesto nisam vican JS-u

hvala u napred

*** CODE 1 ***
<?
// precond: $color is a hex integer
// postcond: returns inversion
function InvertColor($color)
{
return (int) 0xffffff - $color;
}
?>

*** CODE 2 ***
<?php
function InvertColor($hex)
{
return sprintf("%06X", $hex ^ 0xFFFFFF);
}
?>



*** CODE 3 ***
function inverseColor($hex) {
if(substr($hex, 0, 1) == '#') $hex = substr($hex, 1);

$r = str_pad(dechex(255 - hexdec(substr($hex, 0, 2)) ),2,'0',STR_PAD_LEFT);
$g = str_pad(dechex(255 - hexdec(substr($hex, 2, 2)) ),2,'0',STR_PAD_LEFT);
$b = str_pad(dechex(255 - hexdec(substr($hex, 4, 2)) ),2,'0',STR_PAD_LEFT);

return strtoupper('#'.$r.$g.$b);
}

[mega023]

Ako želiš invertovanu boju to se svodi na
kontrastna_boja = not boja; //pseudo kod
ili
kontrastna_boja = 0xFFFFFF - boja; //pseudo kod

Mada mislim da to nije preterano pametno jer što je boja bliža "sredini" (npr #777777 ili #888888) dobijaš efektivno manji kontrast.


probao sam i


x = #FF00FF;
y = ~x;


kao i


x = #FF00FF;
y = 0xFFFFFF - x;


u oba slucaja dobijam neke nebulozne rezultate...
sto se tacnosti tice ne mora da bude nesto preterano tacno...

x = #FF00FF <-- ovo mi je vec zadato u ovom obliku (umesto u 0xFF00FF)

[ivanhoe]

cek, cek, pa ne mozes da sabiras babe i zabe...#nesto je string, a tebi treba HEX broj koji to predstavlja:


boja = '#FF0000'; // crvena
boja_hex = ('0x'+ boja.substr(1) ) *1; //konvertujes u hex broj
kontrast_hex = 0xFFFFFF - boja_hex; // nadjes hex vrednost kontrastne boje
kontrast_boja = kontrast_hex.toString(16); // konvertujes u string


dobijenom stringu fale nule s leve strane, treba jos da napises funkciju koja proveri duzinu stringa i doda potreban broj nula sa leve strane da bude 6 cifara i onda doda i tarabu ispred....

EDIT: bilo je par gresaka oko imena promenjivih, pa sam to popravio

[Pedja]

Kontrastne boje su one koje su medjusobno najudaljenije na krugu boja. Obican invert RGB kodova sumnjam da mze da da koristan rezultat.

[bluesman]

Mislim da je peđa u pravu, formula nikako ne može biti tako jednostavna. Recimo, kontrasne boje su Crvena FF0000 i zelena 00FF00. Plava 0000FF i žuta FFFF00. Mora da postoji neka druga formula, ako uopšte i postoji.

[mega023]

cek, cek, pa ne mozes da sabiras babe i zabe...#nesto je string, a tebi treba HEX broj koji to predstavlja:


boja = '#FF0000'; // crvena
boja_hex = ('0x'+ a.substr(1) ) *1; //konvertujes u hex broj
kontrast_hex = 0xFFFFFF - a_hex; // nadjes hex vrednost kontrastne boje
kontrast_boja = kontrast.toString(16); // konvertujes u string


dobijenom stringu fale nule s leve strane, treba jos da napises funkciju koja proveri duzinu stringa i doda potreban broj nula sa leve strane da bude 6 cifara i onda doda i tarabu ispred....


ima tu kod tebe u kodu malo gresaka, ali kada sam sve ispravio radi zadovoljavajuce

hvala svima na pomoci...

[Pedja]

http://www.lethalpenguin.net/design/index.php
http://www.ficml.org/jemimap/style/color/index.php

Ovdeima ziv krug boja: http://www.ficml.org/jemimap/style/color/wheel.html i izgleda da se stvarno komplementarne boje mogu diobiti prostim invertovanjem.

Evo ga algoritam za izracunavanje kontrastne boje.
http://juicystudio.com/services/colourcontrast.php

i sta W3 kaze o tome: http://www.w3.org/TR/AERT#color-contrast

I gomila color picker-a
http://web-graphics.com/mtarchive/000972.php

[ivanhoe]

Jel ima neko dobre formule za pretvaranje iz RGB->HSB sistem i obrnuto?Ono sto ima da se nadje na netu je puno gresaka, i ne radi, tj. daje rezultate drugacije nego photoshop (a cenim da oni znaju kako se to radi :)

U svakom slucaju 100% korektan nacin da se izracuna kontrastna boja bi bio da se iz RGB izracuna hue, i to u stepenima (hue predstavlja ugao izmedju 0 - 360 ^ na krugu boja) i da se onda na njega doda 180 stepeni, pa da se to sve vrati u rgb...

samo sto nikako da nadjem gore pomenute formule za HSB :(

@mega_023: e izvini na greskama, kad sam probao, koristio sam promenjive glupih naziva: a i a_hex, pa sam onda kod prekucavanja hteo da im promenim imena da budu deskriptivnija, pa sam se zeznuo usput na par mesta su ostali stari nazivi...sad sam valjda ispravio..

[noviKorisnik]

Ko zna gde mi su formule, evo malo koda, to je AS, lako je prepraviti u JS
mcPanel.rgb2hsb = function () : Void
{
// sets h, s and b values based on r, g and b
var min : Number = Math.min (Math.min (this.rgb.r, this.rgb.g), this.rgb.b);
var max : Number = Math.max (Math.max (this.rgb.r, this.rgb.g), this.rgb.b);
var delta : Number = max - min;
if (delta == 0)
{
this.hsb.h = 360;
this.hsb.s = 0;
this.hsb.b = max / 255 * 100;
}
else
{
if (this.rgb.r == max) this.hsb.h = (this.rgb.g - this.rgb.b) / delta;
else if (this.rgb.g == max) this.hsb.h = 2 + (this.rgb.b - this.rgb.r) / delta;
else this.hsb.h = 4 + (this.rgb.r - this.rgb.g) / delta;
this.hsb.h *= 60;
this.hsb.h += 360;
this.hsb.h %= 360;
this.hsb.s = (1 - min / max) * 100;
this.hsb.b = max / 255 * 100;
}
}

mcPanel.hsb2rgb = function () : Void
{
// sets r, g and b value on h, s and b info
var max : Number = this.hsb.b * 255 / 100;
var min : Number = (1 - this.hsb.s / 100) * max;
this.hsb.h %= 360;
var f : Number;
if (this.hsb.h < 60) f = this.hsb.h;
else if (this.hsb.h < 180) f = this.hsb.h - 120;
else if (this.hsb.h < 300) f = this.hsb.h - 240;
else f = this.hsb.h - 360;
var mid : Number = min + Math.abs (f / 60) * (max - min);
max = Math.round (max);
mid = Math.round (mid);
min = Math.round (min);
switch (Math.floor (this.hsb.h / 60))
{
case 0:
this.rgb.r = max;
this.rgb.g = mid;
this.rgb.b = min;
break;
case 1:
this.rgb.r = mid;
this.rgb.g = max;
this.rgb.b = min;
break;
case 2:
this.rgb.r = min;
this.rgb.g = max;
this.rgb.b = mid;
break;
case 3:
this.rgb.r = min;
this.rgb.g = mid;
this.rgb.b = max;
break;
case 4:
this.rgb.r = mid;
this.rgb.g = min;
this.rgb.b = max;
break;
case 5:
this.rgb.r = max;
this.rgb.g = min;
this.rgb.b = mid;
break;
}
}

[ivanhoe]

e, super, jako korisno... 'fala lepo :D