HEX és RGB: két írásmód ugyanarra a színre
Minden szín, amit a képernyőn látsz, három fényből keveredik ki: vörösből, zöldből és kékből. Ha mindhármat felkapcsolod, fehéret kapsz; ha mindet lekapcsolod, feketét. A HEX és az RGB egyszerűen két jelölésrendszer arra, hogy leírja, mennyire fényes legyen ez a három csatorna. Ugyanarra a színre mutatnak, így egy jó konverter csupán a két írásmód között fordít, anélkül hogy magát az árnyalatot bármikor is megváltoztatná. Pontosan ezt teszi ez az eszköz, teljes egészében a böngésződben, miközben egy élő színmintát is mutat, hogy saját szemeddel ellenőrizhesd az eredményt.
Hogyan olvasd a hexakódot
Egy hex szín így néz ki: #1E90FF. A kettőskereszt csupán a kezdetet jelzi; az utána következő hat karakter három pár, #RRGGBB mintában felírva. Az első pár a vörös, a második a zöld, a harmadik a kék. Minden pár egy tizenhatos számrendszerben (hexadecimálisan) felírt szám, ahol a számjegyek 0-9-ig futnak, majd A, B, C, D, E, F a 10-től 15-ig terjedő értékeket jelöli. Egy pár 00-tól (a csatorna teljesen kikapcsolva) egészen FF-ig (teljesen bekapcsolva) terjedő értéket vehet fel. Sima decimálisban ez pontosan a 0-tól 255-ig terjedő tartomány, ugyanaz a skála, amit az RGB is használ. Csatornánként 256 lehetséges szinttel a hatjegyű forma 16 777 216 különböző színt tud leírni.
Átalakítás mindkét irányba, egy végigszámolt példával
A HEX-ből RGB-be váláshoz bontsd fel a kódot a három párra, és mindegyiket alakítsd át tizenhatos számrendszerből tízesbe. Vegyük a #1E90FF-et. A vörös pár 1E: ez 1 szorozva 16-tal, plusz 14 (E), ami 30. A zöld pár 90 9 szorozva 16-tal, plusz 0, ami 144. A kék pár FF 15 szorozva 16-tal, plusz 15, ami 255. Így a #1E90FF a rgb(30, 144, 255) lesz — a jól ismert dodger blue.
A másik irány ugyanez a folyamat, csak fordítva. Vegyél minden RGB-számot, és írd fel két hexadecimális számjegyként. A tiszta vörös, rgb(255, 0, 0), FF-et, 00-t és 00-t ad, amelyek #FF0000-ként állnak össze. Egy dolgot érdemes megjegyezni: ha egy érték 16 alatt van, akkor is mindkét számjegy kell, tehát az 5-öt 05-ként kell írni, nem csupán 5-ként. A konverter elvégzi helyetted ezt a kiegészítést, de kézzel számolva sokan elcsúsznak ezen.
Hol használják az egyes formátumokat
A HEX a web mindennapi nyelve. A CSS, a HTML és a legtöbb kód, amit írsz, hexakódokhoz nyúl, mert azok tömörek és könnyen másolhatók. Az RGB inkább dizájn- és képszerkesztő eszközökben bukkan fel — a Figma, a Photoshop, a Sketch és az Illustrator általában 0-255 tartományú csúszkákat vagy mezőket mutat, és a képernyőfelvevő vagy videószerkesztő alkalmazások is gyakran RGB-t várnak. Így rendszeresen előfordul, hogy kimásolsz egy hexakódot egy stíluslapból, és szükséged van az RGB formájára egy dizájnpanelbe való beíráshoz, vagy fordítva. Ez az oda-vissza út az egész oka annak, hogy egy konverter hasznos. Ha egy teljes, összeillő árnyalatokból álló készletet kell felépítened egyetlen szín átfordítása helyett, a színpaletta-generátorunk a jobb kiindulópont, és további hasonló segédeszközöket a fejlesztői eszközök között találsz.
Alfa, átlátszóság és HSL
Mindkét jelölésrendszernek van egy kibővített formája, amely átlátszóságot ad hozzá. Az RGB rgba(30, 144, 255, 0.5) lesz, ahol a negyedik érték az alfa — 0 a teljesen átlátszó, 1 a teljesen tömör. A HEX egy negyedik párt ad hozzá ugyanerre a célra, így egy nyolcjegyű #RRGGBBAA kódot kapunk; a 80 például nagyjából 50 százalékos átlátszóságot jelent. Néhány konverter HSL-t (árnyalat, telítettség, világosság) is kínál, amely úgy írja le a színt, ahogy egy ember gondolkodna róla — válassz egy árnyalatot a színkerékről, majd hangold a telítettségét és fényességét. A HSL más gondolkodásmód, nem másik paletta, ezért intuitívabb lehet, amikor egy színt szeretnél világosabbá vagy tompábbá tenni anélkül, hogy három külön számmal kellene zsonglőrködnöd.
Gyakran ismételt kérdések
A kettőskereszt a hexakód része?
A kettőskereszt csak egy jelző, amely megmondja a CSS-nek és a dizájneszközöknek, hogy hex színt adsz meg. Maga a szín a mögötte lévő hat karakter. A legtöbb eszköz elfogadja a kódot kettőskereszttel vagy anélkül is, és szükség esetén automatikusan hozzáadja.
Mi a különbség a 3 jegyű és a 6 jegyű hexakód között?
A 3 jegyű kód egy rövidítés, ahol minden számjegy duplázódik, tehát #1AF azt jelenti, hogy #11AAFF. Csak 4096 színt ér el, míg a teljes 6 jegyű forma 16 millió felett van.
Miért nyolc karakteres a hexakódom?
A 8 jegyű hexakód egy negyedik párt ad hozzá az alfához, vagyis az átlátszósághoz. Az első hat karakter továbbra is a vörös, zöld és kék, az utolsó kettő pedig 00-tól (láthatatlan) FF-ig (tömör) állítja be az átlátszóságot.
Kis- és nagybetűérzékenyek a hexakódok?
Nem. A #1e90ff és a #1E90FF pontosan ugyanazt a színt írja le. A hexadecimális betűk ugyanúgy működnek kis- és nagybetűvel, így azt használhatod, amelyiket a csapatod preferálja.
Kinézhet másképp a HEX és az RGB egymástól a képernyőn?
Nem. Amikor ugyanazokat a csatornaértékeket írják le, teljesen azonos a szín. A látható eltérés vagy egy elgépelésből ered, vagy abból, hogy az egyik kód átlátszóságot is tartalmaz, amit a másik kihagy.
Hány színt tud megjeleníteni egy szabványos hexakód?
Egy 6 jegyű hexakód mindhárom csatornán 256 szintet kínál, ami összeszorozva 16 777 216 lehetséges színt ad.