Színek a weben: RGB, HEX, HSL és még sokan mások

Probléma

Ebben a cikkben egy picit belemegyünk a színelméletbe, hogy megértsük, hogyan kezelik a böngészők a színeket. A weben használt leggyakoribb színértékekről fogok beszélni: a nevesített színekről, a hex-kódokról, illetve kitérek az RGB(A) színrendszerre és annak egy változatára, a HSL(A)-ra is.

Elméleti háttér

Kezdjük az alapoknál, a színrendszerekkel. Nem megyek bele a durva részletekbe, nem ez a blog célja és nem vagyok fizikus. Ami nekünk kell az, hogyan kezelik a böngészők a színeket. Ez is egy komoly informatikai kérdés, szóval maradjunk tényleg az alapoknál.

Két fő színkeverési mód van, az additív, más néven összeadó és a szubsztraktív, vagyis kivonó. Az előbbi a fényszínek keverése, utóbbi a pigmenteké vagy más színes anyagoké. Igen, igen, ez színtan, fizika, most zárod be az oldalt... Nyugalom, ennyi volt. Maradjunk a magyarnál: az összeadó színkeverést használják a böngészők, a másikat a nyomdaipar. Elvégre az első monitorral dolgozik, az meg fényszíneket használ, azért világít...

Az összeadó színkeverés egyik alap modellje az RGB. Ez egy betűszó, R=red, vörös, G=green, zöld és B=blue, kék. Ez a három alapszín, amit használ, ezek különféle keveréséből jön össze minden más. Az összes keveréke a tiszta fehér (fény). A nyomdában használt színrendszer a CMY(K), ahol a C=cyan, ciánkék, M=magenta és Y=yellow, sárga. A K a feketét jelöli (black), nem alapszín, de külön meg szokták adni, elvégre tiszta feketével gyakran kell dolgozni. Itt az összes szín keveréke amúgy a fekete, nem a fehér, és ezt mindenki tapasztalta, aki valaha gyerekként játszott a vízfestékkel. (Technikailag valami barnás árnyalat jön ki a végére, nem pont fekete, de kellő kitartással megoldható az is.)

Nekünk azonban a monitor miatt az RGB kell. Lényegében minden módszer, amivel színeket tudunk megcímkézni vagy kikeverni a neten az RGB színskálán alapul. Egyrészt van maga az RGB értékek megadása – a bátrabbak még rádobhatnak egy alfa-csatornát, ami az átlátszóságot kezeli. Ez együttesen az RGBA érték. Megadhatjuk egyszerű tízes számrendszerben (már megint matek, az ember elmegy dizájn blogolni, hogy legalább ott ne kelljen ezt hallgatnia, ha már az egész programozás erről szól, erre tessék), vagy tizenhatosban is. Ilyenkor kapjuk a hex-kódokat, vagy hexa-kódokat. Ez már nem kezeli az átlátszóságot, kizárólag teljesen átlátszatlan színekkel tudunk dolgozni, ha hexadecimális értékeket használunk.

Egy másik színskála az RGB egy variánsa, a HSL. Nem, ez kivételesen nem az alapszínekből indul ki, a H=hue, azaz árnyalat, S=saturation, vagyis szaturáció, telítettség, és az L=lightness, világosság. Ennek is van alfa-csatornával kibővített változata (HSLA). Ha egymáshoz viszonyított színeket kell kezelnünk, például egy alapszín különféle árnyalatait, akkor ez a skála hasznosabb, mint a sima RGB.

Ha pedig az egyszerű emberek életét szeretnénk élni, akkor vannak speciális, nevesített színek a weben, és használhatjuk azt is. Itt csak pár száz angol színnevet kell megjegyezni, szóval semmiség, de legalább kifejező. Hát nem egyszerűbb a LightSeaGreen (halvány tengerzöld), mint az rgb(32, 178, 170)?

Gyakorlat

Kezdjük a színeket a felsorolás végén, a nevesített színeknél. Mint mondtam, vannak páran. Szám szerint 140, azaz száznegyven nevesített színt ismernek a modern böngészők. Itt a teljes lista egyenesen a W3C oldaláról. Valamivel kedvesebb megjelenítés a W3Schools oldalán ezen a linken.

💡 TIPP: Most láttátok, hogy néz ki a specifikáció maga, ami meghatározza a net egyes részeit (speciel esetünkben a CSS-t). Ronda. És akkor a szövegről még nem is beszéltünk. Ha nem böngészőt akar építeni az ember, akkor igen ritkán van erre szüksége.

❗ Fontos! A színnevek kis- és nagybetű-érzékenyek. Kisbetűkkel írjuk mindet.

Oké, 140 szín nem kevés, de lehet, hogy másra vágyunk, valami egyedibbre. Ilyenkor lép életbe a többi értékadás. Technikailag a nevesített színeknek is van egy RGB értéke, a név csak egy alias, másfajta címke. A háttérben a böngésző a megfelelő RGB értéket fogja hozzárendelni, amit a specifikáció előre megszabott.

Rendben, akkor nézzük az RGB-t! Mint mondtam, a három alapszín keveréke határozza meg, hogyan fog felépülni a végső szín. Ezek 0-255 közötti értékeket vehetnek fel, hogy ne legyen egyszerű az élet. Ez határozza meg, hogy az adott színben a kérdéses alapszínből mennyi van, mekkora az alapszín intenzitása. Vagyis 256 (255 és a nulla) különféle változatuk lehet, szorozva 3-mal, mert a három alapszín egymástól függetlenül kap értéket. Ez nagyjából kicsit több, mint 16,5 millió (!) különféle szín. Rengeteg között képtelenség különbséget tenni, az rgb(140, 128, 170) és a rgb(140, 128, 171) majdnem ugyanúgy néz ki. A W3Schools oldalán van egy RGB színkeverő. A csúszkák mozgatásával megkereshetjük a számunkra megfelelő színt.

Mint mondtam, egy szín mellett az érték azt jelenti, mennyire intenzíven van jelen. Az rgb(0, 0, 0) a teljesen fekete (mindhárom alapszín nulla intenzitással van jelen), meg az rgb(255, 255, 255) a fehér (mindhárom szín maximális intenzitáson). Az rgb(0, 255, 0) zöld, az rgb(100%, 0%, 100%) lila (maximális vörös, semmi zöld, maximum kék) és így tovább. Mint látszik, ha nagyon unjuk, hogy számokkal adjunk értéket, százalékokkal is lehet, de a kettő nem keverhető.

Egy negyedik értéket is adhatunk, ez az alfa-csatorna. Ez kezeli az átlátszóságot. A változatosság kedvéért nem 0-255 között vesz fel értékeket, hanem 0 és 1 között törtszámokat. Mert logika... A 0 a teljesen átlátszó (transzparens) "szín", az 1 pedig a teljesen átlátszatlan. A kettő között meg a háttér szabja meg, milyen lesz a végső benyomás az olvasóban. Bézs háttér előtt félig áttetsző zöld másképp néz ki, mint egy lila (rebeccapurple) előtt.

💡 A rebeccapurple egy nagyon szép szín, de az elnevezésének nagyon szomorú története van.

Ha meguntuk, hogy rgb(R, G, B) formában hivatkozzunk a színeinkre, megtehetjük rövidebben is. Ez a hex-kódos elnevezés, ami fogja az RGB értékeket, átváltja tizenhatos számrendszerbe, majd egymás mögé írja. Elécsapunk egy # jelent, és kész. Ennyi a varázslat.

💡 TIPP: A 256 a 16². Tehát 16-os számrendszerben két tizedessel le tudjuk írni ugyanazt.

❗ Nem megyek bele a számrendszerek közti átváltás rejtelmeibe. Ha úgy érzed, szükséged van egy ilyen segítségre, jelezd alább megjegyzésben, e-mailben, galambpostán, füstjelekkel, és lesz belőle cikk külön.

Azaz az rgb(0, 150, 204) a #0096CC.

❗ Fontos! A hex-kódok, ellentétben a nevesített színekkel, nem érzékenyek a kapitálisokra. Mindegy, hogy kisbetűkkel, nagybetűkkel vagy vegyesen írjuk.

A hex-kódok az RGB közvetlen megfelelői. Az alfa-értékük emiatt mindig 1, nem lehetnek semennyire sem áttetszőek. Ha az áttetszőséget kezelni kell, akkor marad az RGBA, vagy egy változata, a HSLA.

A HSL(A) kicsit hasonló elven épül fel, mint az RGB, csak itt három alapszín intenzitása helyett három fő értéket határozunk meg. Az első az árnyalat, ami a színkerék értékein alapul. Ennek illusztrálására álljon alább egy kép:

Színkerék és értékei

0-tól indul, az a vörös, és oda is ér egy 360°-os teljes fordulat után. Lényegében egy körről beszélünk, igen, és az árnyalat értékek fokok. 180° a félfordulat, a ciánkék, 120° a harmad fordulat, az egyik alapszín a háromból, a zöld (az első ugye a vörös) stb. Ha 360-nál nagyobb értéket adunk meg, a kerék átfordul, de ez a szín szempontjából nem változtat. Vagyis a 480 ugyanúgy zöldnek felel meg (360+120).

A második érték a telítettség. Ez 0% és 100% között változik. 0% telítetlen, szürke, míg a 100% a telített, teli szín. A harmadik megint százalékos érték a világosság. 0% a teljesen fekete, 100% pedig a teljesen fehér. 50% a legintenzívebb szín.

❗ A Photoshopot ismerőknek a HSL színrendszer ismerősen hangozhat, mert ott is van egy hasonló. Az a HSB modell, ahol a világosság (lightness) helyett fényesség/fényerő (brightness) érték van.

Az alfa értéke ugyancsak 0 és 1 között változó tört, ha az átlátszóság fontos.

Mint mondtam, HSL akkor hasznos, ha mondjuk egy színnek kell egy picivel sötétebb párja, vagy kevésbé telített verziója. Ezt RGB-vel nehezen tudnánk kiszámolni. Mert az, hogy a rebeccapurple, hsl(270, 50%, 40%) helyett kell egy picivel világosabb, akkor legyen mondjuk hsl(270, 50%, 60%). Voilà! De ha azt mondom, hogy rgb(102, 51, 153)-ból lesz rgb(153, 102, 204), azért az nem triviális.

Az egyik kedvenc HSL/RGB/hex keverőm amúgy ez az oldal, mert itt még átlátszóságot is be tudunk állítani egyéni háttér előtt. Csúszkák itt is vannak, valamivel egyszerűbb, mint fejből beírni az értékeket. Egyedül a nevesített színeket nem kezeli.

Összefoglalás

A webes színek élete nem egyszerű, mert rengetegféleképpen hivatkozhatunk rájuk. Bármiféle kissé kódos dizájnunk van, a színek előbb-utóbb előkerülnek, és velük a fejfájás is. Remélem, ez a kis összefoglalás segített eloszlatni a zavart, ami a különféle színek értékeit jellemzi.

Ha legközelebb kódos dizájnra van szükségünk, akkor most már tudjuk, hogyan bánjunk a színekkel. Addig kitartást és jó blogolást!