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

PHP kôd:

*** 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);
}
?>

PHP kôd:

*** 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]

Originalno napisao 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.

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]

Originalno napisao 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'+ 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..