Kaj je hex koda? Vse, kar morate vedeti

Delo z barvami v HTML je razmeroma preprosto. Z nekaj preprostimi izjavami CSS lahko spremenite barvo katerega koli besedila ali ozadja na vaši spletni strani. Toda kako določite barvo? Odgovor na to vprašanje nas bo popeljal v zajčjo luknjo, ki nas na koncu pripelje do koncepta šestnajstiških barvnih kod.

Če ste že delali s HTML ali CSS, ste verjetno že slišali za izraz šestnajstiška koda. Toda kaj pravzaprav je šestnajstiška koda? Kateri so primeri šestnajstiških kod? Kakšna je razlika med šestnajstiško kodo in barvno kodo RGB?

Kaj je hex koda?

Ko prvič začnete delati z barvami, lahko uporabite grafični vmesnik za izbiro barv, ki jih želite uporabiti za elemente na vaši strani. Ko začnete gledati na osnovno kodo in ne le na svoj grafični urejevalnik, ugotovite, da so barve videti kot čudna zaporedja znakov. Takšna zaporedja so znana kot šestnajstiške kode; izgledajo nekako takole:

#FF0092

Povezano: Bistveni izrazi za grafično oblikovanje, ki jih morate poznati

Barve v CSS lahko določite na več različnih načinov. Uporabite lahko imena nekaterih vnaprej določenih barv, kot je npr

rdeča in temnomagenta. Če želite določiti natančne barvne odtenke, boste morali uporabiti natančnejšo meritev: nekaj številčnega.

CSS ponuja dve glavni možnosti: RGB in hex. V obeh oblikah določite količine rdeče, zelene in modre, ki sestavljajo končno barvo. RGB uporablja tri številke med 0 in 255. Hex deluje popolnoma enako, samo z drugačno osnovo (16) kot decimalna (10), ki ste je vajeni.

Hex uporablja črke A-F, poleg števk 0-9, za skupno 16 simbolov. A v šestnajstiški je enakovreden 10 v decimalki. F v šestnajstiškem je 15 v decimalni obliki.

Kako delujejo šestnajstiške barvne kode?

V svoji najbolj osnovni obliki je šestnajstiška koda predstavitev, koliko rdeče, zelene in modre je v barvi. Šestnajstiška koda je sestavljena iz šestih znakov. Prvi dve se nanašata na to, koliko rdeče je v mešanici, naslednji dve se nanašata na količino zelene, zadnji dve števki pa odražata količino modre. Hex kode se nanašajo na določene barve, kar oblikovalcem in razvijalcem omogoča enostavno komunikacijo o barvnih shemah.

S 16 × 16 (256) vrednostmi za vsako barvno komponento je potem možnih 256 × 256 × 256 kombinacij. V šestnajstiškem se gibljejo od #000000 (čisto črna) do #FFFFFF (čisto bela).

Kako brati šestnajstiške barvne kode

Razumeti šestnajstiške barvne kode je enostavno. Vzemimo primer #FF5733. Najprej razdelite šest znakov na tri dele, ki vsebujejo po dva znaka. Kot veste, prva dva dela predstavljata rdečo, druga dva dela zeleno, tretja dva dela pa modro. Torej, v našem primeru:

• Rdeča komponenta RR ima vrednost FF.
• Zelena komponenta, GG, je 57.
• Modra komponenta, BB, je 33.

Zdaj, da bi našli intenzivnost teh barvnih segmentov, morate izračunati šestnajstiško število s temi tremi koraki:

1. Pomnožite prvi šestnajstiški znak RR s 16. Če je znak črka, ga pretvorite v ustrezno vrednost. V tem primeru je prvi znak F, kar je 15. Torej, v našem primeru množite 15 × 16, kar je enako 240.
2. Nato dodajte drugi znak RR. Ponovno pretvorite črko v njeno ustrezno vrednost, če se pojavi potreba. V našem primeru je drugi znak F, ki je enak 15.
3. Ko končate, dodajte vsote, da dobite eno samo vrednost. Če iz našega primera dodate 240 in 15, boste videli, da je vrednost FF 255.

Ponovite isto formulo za preostala dva segmenta, GG označen s 57 in BB označen s 33. Če se vam ročni izračuni zdijo preveč obsežni, lahko vedno uporabite orodje za pretvorbo šestnajstiške v RGB (npr BinaryHex pretvornik) za branje barve. Ugotoviti bi morali, da je hex vrednost #FF5733 je enakovredna rgb (255, 87, 51).

Zakaj je šestnajstiška barvna koda tako priljubljena?

Čeprav obstaja več različnih barvnih modelov (RGB, CMYK, HSL), so šestnajstiške barvne kode morda najbolj razširjena predstavitev. To je zato, ker so preprosti in lahko razumljivi.

Zelo uporaben je tudi format s fiksno širino. Šestnajstiške barve polne dolžine so vedno sedem znakov, vključno z vodilnimi # simbol.

Hex barve so zelo učinkovite, saj uporabljajo samo teh sedem znakov za predstavljanje več kot 16 milijonov barv. In razlikovanje med temi barvami je preprost postopek.

Hex vs. RGB: Ali obstaja kakšna razlika?

Sistem barvnega kodiranja RGB uporablja tri decimalna števila za označevanje relativne intenzivnosti rdeče, zelene in modre barve. Uporablja števke 0-9.

Hex uporablja tudi tri številke za predstavljanje rdeče, zelene in modre, vendar uporablja dodatne števke (A-F), da poskrbi za osnovo 16. V nastalih barvah ni razlike, so preprosto različni formati za sporočanje istih informacij.

Povezano: Osnove CSS: delo z barvami

Za kaj se uporablja hex koda?

RGB uporabljajo različne aplikacije, od televizijskih zaslonov do mobilnih naprav, iger in znakov. V spletnem oblikovanju in drugih grafičnih programih boste večinoma videli šestnajstiške barvne kode.

Šestnajste kode lahko vidite tudi kot univerzalni način prepoznavanja barv. Številna spletna mesta jih uporabljajo za prepoznavanje določene barve, saj so kratke in običajno nedvoumne v kontekstu.

Šestnajstiška barvna koda ni raketna znanost

Torej, tukaj imate osnove šestnajstiških barvnih kod. Niso ravno trda znanost, vendar služijo določenemu namenu pri oblikovanju (in v svetu tehnologije). Če iščete orodje, ki vam bo pomagalo razumeti, kako delujejo hex barve, ali orodje, ki vas bo naučilo o teoriji mešanja RGB, je na spletu veliko. Ne pozabite, da je ključ do učenja česa novega narediti korak za korakom.

Hex barvne kode niso najbolj vznemirljiva stvar na svetu, vendar je ključnega pomena, da jih razumete, če delate v spletnem oblikovanju. Zmožnost dela s šestnajstimi barvnimi kodami bo vaše oblikovalsko delo veliko lažje.

Kako najti hex vrednost katere koli barve na vašem zaslonu

Naučite se, kako v nekaj sekundah izbrati katero koli barvno vrednost na zaslonu. Še posebej uporabno za spletne oblikovalce!

Preberite Naprej

O avtorju