Hva er hex-koden? Alt du trenger å vite

Å jobbe med farger i HTML er relativt enkelt. Med noen få enkle CSS-deklarasjoner kan du endre fargen på hvilken som helst tekst eller bakgrunn på nettsiden din. Men hvordan spesifiserer du en farge? Svaret på dette spørsmålet vil ta oss ned i et kaninhull som til slutt fører oss til konseptet med heksadesimale fargekoder.

Hvis du har jobbet med HTML eller CSS før, har du sannsynligvis hørt begrepet hex-kode. Men hva er egentlig en hex-kode? Hva er noen eksempler på hex-koder? Hva er forskjellen mellom en hex-kode og en RGB-fargekode?

Hva er hex-kode?

Når du først begynner å jobbe med farger, kan du bruke et grafisk grensesnitt for å velge farger som skal brukes på elementer på siden din. Når du begynner å se på den underliggende koden i stedet for bare den grafiske editoren din, finner du ut at farger fremstår som merkelige tegnsekvenser. Slike sekvenser er kjent som hex-koder; de ser omtrent slik ut:

#FF0092

I slekt: Viktige vilkår for grafisk design du trenger å vite

Du kan spesifisere farger i CSS på noen forskjellige måter. Du kan bruke navnene på noen forhåndsdefinerte farger som f.eks

rød og mørk magenta. For å spesifisere nøyaktige fargenyanser, må du imidlertid bruke en mer presis måling: noe numerisk.

CSS tilbyr to hovedalternativer: RGB og hex. I begge formatene spesifiserer du mengden rødt, grønt og blått som utgjør den endelige fargen. RGB bruker tre tall mellom 0 og 255. Hex gjør akkurat det samme, bare med en annen grunntall (16) enn desimalen (10) du er vant til.

Hex bruker bokstavene A-F, i tillegg til sifrene 0-9, for totalt 16 symboler. A i hex tilsvarer 10 i desimal. F i hex er 15 i desimal.

Hvordan fungerer sekskantede fargekoder?

I sin mest grunnleggende form er en hex-kode en representasjon av hvor mye rødt, grønt og blått som finnes i en farge. En hex-kode består av seks tegn. De to første relaterer seg til hvor mye rødt som er i blandingen, de to neste gjelder mengden grønt det er, og de to siste sifrene gjenspeiler mengden blått. Hex-koder refererer til spesifikke farger, slik at designere og utviklere enkelt kan kommunisere om fargevalg.

Med 16 × 16 (256) verdier for hver fargekomponent, er det da 256 × 256 × 256 mulige kombinasjoner. I hex varierer de fra #000000 (ren svart) til #FFFFFF (ren hvit).

Hvordan lese hex-fargekoder

Det er enkelt å forstå sekskantede fargekoder. La oss ta eksempelet #FF5733. Del først de seks tegnene i tre deler som inneholder to tegn hver. Som du vet representerer de to første delene rødt, de to andre delene representerer grønt, og de to tredje delene representerer blått. Så i vårt eksempel:

• Den røde komponenten, RR, har verdien FF.
• Den grønne komponenten, GG, er 57.
• Den blå komponenten, BB, er 33.

Nå, for å finne intensiteten til disse fargesegmentene, må du beregne det heksadesimale tallet ved å bruke disse tre trinnene:

1. Multipliser det første heksadesimale tegnet i RR med 16. Hvis tegnet er en bokstav, konverter det til dens tilsvarende verdi. I dette tilfellet er det første tegnet F som er 15. Så, for vårt eksempel, multipliserer du 15 × 16 som tilsvarer 240.
2. Deretter legger du til det andre tegnet i RR. Igjen, konverter en bokstav til dens tilsvarende verdi, hvis behovet oppstår. I vårt eksempel er det andre tegnet F som tilsvarer 15.
3. Når du er ferdig, legger du til totalsummene for å få én enkelt verdi. Hvis du legger til 240 og 15 fra vårt eksempel, vil du se at verdien av FF er 255.

Gjenta den samme formelen for de resterende to segmentene, GG betegnet med 57 og BB betegnet med 33. Hvis de manuelle beregningene virker for overveldende, kan du alltid bruke et hex-til-RGB-konverteringsverktøy (som BinaryHex Converter) for å lese en farge. Du bør finne at hex-verdien #FF5733 tilsvarer rgb (255, 87, 51).

Hvorfor er hex-fargekoden så populær?

Mens det finnes flere forskjellige fargemodeller (RGB, CMYK, HSL), er hex-fargekoder kanskje den mest brukte representasjonen. Dette er fordi de er enkle og enkle å forstå.

Et format med fast bredde er også veldig nyttig. Heksadesimale farger i full lengde er alltid syv tegn, inkludert den innledende # symbol.

Hex-farger er svært effektive, og bruker bare disse syv tegnene for å representere mer enn 16 millioner farger. Og å skille mellom disse fargene er en enkel prosess.

Hex vs. RGB: Er det noen forskjell?

RGB-systemet for fargekoding bruker tre desimaler for å indikere de relative intensitetene til rødt, grønt og blått. Den bruker sifrene 0-9.

Hex bruker også tre tall for å representere rødt, grønt og blått, men det bruker ekstra sifre (A-F) for å imøtekomme base 16. Det er ingen forskjell i de resulterende fargene, de er ganske enkelt forskjellige formater for å kommunisere den samme informasjonen.

I slekt: CSS Fundamentals: Arbeide med farger

Hva brukes hex-koden til?

En rekke forskjellige applikasjoner bruker RGB, fra TV-skjermer til mobile enheter, spill og skilt. Du vil hovedsakelig se hex-fargekoder i webdesign og andre grafikkprogrammer.

Du kan også se hex-koder som en universell måte å identifisere farger på. Mange nettsteder bruker dem til å identifisere en bestemt farge siden de er korte og vanligvis entydige i konteksten.

Hex-fargekoden er ikke rakettvitenskap

Så der har du det grunnleggende om sekskantede fargekoder. De er ikke akkurat vanskelig vitenskap, men de tjener et bestemt formål i design (og i teknologiverdenen). Hvis du leter etter et verktøy som vil hjelpe deg å forstå hvordan heksede farger fungerer, eller et som vil lære deg om RGB-blandingsteori, er det mye på nettet. Husk at nøkkelen til å lære noe nytt er å ta det ett skritt om gangen.

Hex-fargekoder er ikke det mest spennende i verden, men det er viktig å forstå dem hvis du jobber med webdesign. Å kunne jobbe med sekskantede fargekoder vil gjøre designarbeidet ditt mye enklere.

Hvordan finne hex-verdien til en hvilken som helst farge på skjermen

Lær hvordan du velger en hvilken som helst fargeverdi fra skjermen din på sekunder. Spesielt nyttig for webdesignere!

Les Neste

Om forfatteren