Eto opet jedan programerski post… Pozadina današnjeg posta je sljedeća: radim na intranetskom projektu kod kojeg je jako bitna vizualizacija elemenata. Ukratko, na stranici postoji hrpa elementa koje treba shematski prikazati, može ih biti neograničeno mnogo, a neki od njih su međusobno povezani. Najlogičnije rješenje jest prikazivati elemente u različitim bojama, s time da povezani elementi budu prikazani u istoj boji. Da ne filozofiram, kako to izgleda mozete vidjeti na slici uz tekst.

Najjednostavnije rješenje bilo je kreirati listu boja koja će se koristiti. No, to nije "lijepo" rješenje, a i što ako se dogodi da ima više elemenata nego što smo predvidjeli boja?

Pametno rješenje ovog problema podrazumijeva automatsko generiranje boja, palete koja će se koristiti. No, bitno je da korištene boje budu međusobno što različitije. Naravno, ako ćemo na stranici imati sto različitih elemenata, razlike među njima nužno će biti manje, no uvijek će biti cilj dobiti što bolji rezultat. Ako koristimo dvije boje, razlika će biti drastična. Ako koristimo deset, bit će lako uočljiva. Ako koristimo sto, bit će jedva uočljiva, no postojat će.

U tome će nam pomoći svojstvo boja koje se naziva "hue". Neki to prevode kao "nijansa", a neki valna duljina, no bitno je da se sve boje nalaze u rasponu od 0 do 360 (stupnjeva). Želimo li dobiti suprotne boje, uzet ćemo one nasuprotne (primjerice, na 0 i 180 stupnjeva). Želimo li četiri boje, uzet ćemo one na 0, 90, 180 i 270 stupnjeva. Želimo li dobiti 10 najrazličitijih boja, krenut ćemo od nula i uzimati boju svakih 36 stupnjeva. Shvatili ste…

Kako biste iz vrijednosti hue dobili RGB boju (kakva se koristi na webu), trebaju vam još dvije vrijednosti – saturation (zasićenost boje) i lightness (svjetlina). Te tri vrijednosti čine HSL color space, o kojemu više možete pronaći na Wikipediji. Za "najbolje" boje iz te palete, valja uzimati one najzasićenije (saturation = 100%) i srednje osvjetljene (lightness = 50%). Naravno, želite li dobiti još različitije boje, možete se poigrati i s tim parametrima (primjerice, svakoj drugoj boji staviti nešto veće zasićenje ili nešto veću osvjetljenost. Ja sam u već spomenutom projektu boje iz palete koristio kao pozadinu, a boju slova naizmjence ispisivao u bijeloj i crnoj boji (kako su sve 50% osvjetljene, obje boje slova su čitljive na njima), što je znatno doprinijelo uočljivosti razlike u bliskijim bojama.

Boju definiranu po modelu HSL u RGB mozete jednostavno konvertirati pomoću formula ili gotovih klasa u C#.