Mi az a hexa kód? Minden, amit tudnod kell

A színekkel való munka a HTML-ben viszonylag egyszerű. Néhány egyszerű CSS-deklarációval megváltoztathatja weboldala bármely szövegének vagy hátterének színét. De hogyan határoz meg egy színt? A kérdésre adott válasz egy nyúlüregbe vezet, ami végül elvezet bennünket a hexadecimális színkódok fogalmához.

Ha korábban dolgozott HTML-lel vagy CSS-sel, valószínűleg hallotta a hexadecimális kód kifejezést. De mi is pontosan a hexadecimális kód? Milyen példák vannak a hexadecimális kódokra? Mi a különbség a hexadecimális kód és az RGB színkód között?

Mi az a hexa kód?

Amikor először kezd dolgozni a színekkel, egy grafikus felület segítségével választhatja ki az oldal elemeire alkalmazni kívánt színeket. Amikor elkezdi nézni a mögöttes kódot, nem csak a grafikus szerkesztőjét, azt tapasztalja, hogy a színek furcsa megjelenésű karaktersorozatokként jelennek meg. Az ilyen szekvenciák hexadecimális kódokként ismertek; valahogy így néznek ki:

#FF0092

Összefüggő: A grafikai tervezés alapvető feltételei, amelyeket tudnia kell

A színeket a CSS-ben többféleképpen is megadhatja. Használhatja néhány előre meghatározott szín nevét, mint pl piros és sötétbíbor. A színárnyalatok pontos meghatározásához azonban pontosabb mérést kell használnia: valami numerikus értéket.

A CSS két fő lehetőséget kínál: RGB és hex. Mindkét formátumban megadhatja a végső színt alkotó vörös, zöld és kék mennyiségét. Az RGB három számot használ 0 és 255 között. A hex pontosan ugyanezt teszi, csak más alappal (16), mint a megszokott tizedes (10).

A Hex a 0-9 számjegyek mellett az A-F betűket használja, összesen 16 szimbólumhoz. A hexadecimálisan 10-nek felel meg tizedesjegyben. A hexadecimális F értéke 15 tizedesjegyben.

Hogyan működnek a hatszögletű színkódok?

A legegyszerűbb formában a hexadecimális kód azt mutatja, hogy mennyi piros, zöld és kék létezik egy színben. A hexadecimális kód hat karakterből áll. Az első kettő arra vonatkozik, hogy mennyi piros van a keverékben, a következő kettő a zöld mennyiségére vonatkozik, az utolsó két számjegy pedig a kék mennyiségére vonatkozik. A hexadecimális kódok meghatározott színekre utalnak, így a tervezők és a fejlesztők könnyedén kommunikálhatnak a színsémákkal kapcsolatban.

Az egyes színösszetevők 16 × 16 (256) értékével 256 × 256 × 256 kombináció lehetséges. Hexadecimálisan a #000000 (tiszta fekete) és az #FFFFFF (tiszta fehér) között mozog.

Hogyan olvassunk hexadecimális színkódokat

A hexadecimális színkódok megértése egyszerű. Vegyük az #FF5733 példáját. Először ossza fel a hat karaktert három részre, amelyek mindegyike két-két karaktert tartalmaz. Mint tudják, az első két rész a pirosat, a második két rész a zöldet, a harmadik két rész pedig a kéket jelenti. Tehát a mi példánkban:

• A piros komponens, az RR, értéke FF.
• A zöld komponens, a GG, az 57.
• A kék komponens, a BB, 33.

Most, hogy megtudja ezeknek a színszegmenseknek az intenzitását, ki kell számítania a hexadecimális számot a következő három lépéssel:

1. Szorozzuk meg az RR első hexadecimális karakterét 16-tal. Ha a karakter betű, alakítsa át a megfelelő értékre. Ebben az esetben az első karakter F, ami 15. Tehát a mi példánkban 15 × 16-ot szorozunk, ami 240-nek felel meg.
2. Ezután adja hozzá az RR második karakterét. Ismét alakítsa át a betűt a megfelelő értékre, ha szükséges. Példánkban a második karakter az F, ami 15.
3. Ha elkészült, adja hozzá a végösszegeket, hogy egyetlen értéket kapjon. Ha a példánkból összeadja a 240-et és a 15-öt, az FF értéke 255 lesz.

Ismételje meg ugyanezt a képletet a fennmaradó két szegmensre, a GG-t 57 és a BB-t jelöli 33. Ha a manuális számítások túl elsöprőnek tűnnek, mindig használhat egy hexadecimális RGB konvertáló eszközt (pl BinaryHex Converter) egy szín olvasásához. Meg kell találnia, hogy a hex érték #FF5733 egyenértékű a rgb (255, 87, 51).

Miért olyan népszerű a hatszögletű színkód?

Bár számos különböző színmodell létezik (RGB, CMYK, HSL), a hexadecimális színkódok talán a legszélesebb körben használt ábrázolások. Ez azért van, mert egyszerűek és könnyen érthetők.

A rögzített szélességű formátum is nagyon hasznos. A teljes hosszúságú hexadecimális színek mindig hét karakterből állnak, beleértve a kezdőt is # szimbólum.

A hatszögletű színek nagyon hatékonyak, csupán ezt a hét karaktert használják több mint 16 millió szín megjelenítésére. És ezeknek a színeknek a megkülönböztetése egyszerű folyamat.

Hex vs. RGB: Van valami különbség?

Az RGB színkódolási rendszer három tizedesjegyet használ a vörös, zöld és kék relatív intenzitásának jelzésére. 0-9 számjegyeket használ.

A hexa három számot is használ a piros, zöld és kék jelölésére, de extra számjegyeket (A-F) használ a 16-os alaphoz. A kapott színek között nincs különbség, ezek egyszerűen különböző formátumok ugyanazon információ közlésére.

Összefüggő: A CSS alapjai: Munka a színekkel

Mire használható a hexadecimális kód?

Számos különböző alkalmazás használja az RGB-t, a televíziók képernyőjétől a mobileszközökig, játékokig és táblákig. Főleg hexadecimális színkódokat fog látni a webdesignban és más grafikus programokban.

A hexadecimális kódokat a színek azonosításának univerzális módjaként is láthatja. Sok webhely használja őket egy adott szín azonosítására, mivel rövidek és általában egyértelműek a kontextusban.

A hatszögletű színkód nem rakétatudomány

Tehát itt vannak a hexadecimális színkódok alapjai. Nem éppen kemény tudomány, de határozott célt szolgálnak a tervezésben (és a technológiai világban). Ha olyan eszközt keres, amely segít megérteni a hatszögletű színek működését, vagy olyan eszközt keres, amely megtanítja az RGB-keverés elméletére, rengeteg online elérhető. Ne feledje, hogy bármi új megtanulásához a kulcs az, hogy lépésről lépésre tegyük meg.

A hexadecimális színkódok nem a világ legizgalmasabb dolgai, de létfontosságú, hogy megértsd őket, ha webdizájnnal foglalkozol. A hexadecimális színkódokkal való munka nagyban megkönnyíti a tervezési munkát.

Hogyan találhatja meg a képernyőn megjelenő bármely szín hexadecimális értékét

Ismerje meg, hogyan választhat ki bármely színértéket a képernyőről másodpercek alatt. Webdesignerek számára különösen hasznos!

Olvassa el a következőt

A szerzőről