Hvad er hex-koden? Alt hvad du behøver at vide

At arbejde med farver i HTML er relativt ligetil. Med nogle få simple CSS-erklæringer kan du ændre farven på enhver tekst eller baggrund på din webside. Men hvordan angiver man en farve? Svaret på dette spørgsmål vil tage os ned i et kaninhul, som til sidst fører os til begrebet hexadecimale farvekoder.

Hvis du har arbejdet med HTML eller CSS før, har du sikkert hørt udtrykket hex-kode. Men hvad er en hex-kode egentlig? Hvad er nogle eksempler på hex-koder? Hvad er forskellen mellem en hex-kode og en RGB-farvekode?

Hvad er hex-kode?

Når du først begynder at arbejde med farve, kan du bruge en grafisk grænseflade til at vælge farver, der skal anvendes på elementer på din side. Når du begynder at se på den underliggende kode i stedet for blot din grafiske editor, opdager du, at farver fremstår som underligt udseende sekvenser af tegn. Sådanne sekvenser er kendt som hex-koder; de ser sådan her ud:

#FF0092

Relaterede: Væsentlige vilkår for grafisk design, du har brug for at kende

Du kan angive farver i CSS på et par forskellige måder. Du kan bruge navnene på nogle foruddefinerede farver som f.eks

rød og mørkmagenta. For at angive nøjagtige farvenuancer skal du dog bruge en mere præcis måling: noget numerisk.

CSS tilbyder to hovedmuligheder: RGB og hex. I begge formater angiver du mængden af ​​rød, grøn og blå, der udgør den endelige farve. RGB bruger tre tal mellem 0 og 255. Hex gør nøjagtig det samme, bare med en anden grundtal (16) end den decimal (10), du er vant til.

Hex bruger bogstaverne A-F, udover cifrene 0-9, til i alt 16 symboler. A i hex svarer til 10 i decimal. F i hex er 15 i decimal.

Hvordan virker hex-farvekoder?

I sin mest grundlæggende form er en hex-kode en repræsentation af, hvor meget rød, grøn og blå der findes i en farve. En hex-kode består af seks tegn. De to første vedrører, hvor meget rødt der er i blandingen, de næste to vedrører mængden af ​​grønt, der er, og de sidste to cifre afspejler mængden af ​​blåt. Hex-koder refererer til specifikke farver, hvilket giver designere og udviklere mulighed for nemt at kommunikere om farveskemaer.

Med 16 × 16 (256) værdier for hver farvekomponent er der så 256 × 256 × 256 mulige kombinationer. I hex varierer de fra #000000 (ren sort) til #FFFFFF (ren hvid).

Sådan læser du hex-farvekoder

Det er nemt at forstå hex-farvekoder. Lad os tage eksemplet med #FF5733. Del først de seks tegn op i tre dele, der hver indeholder to tegn. Som du ved, repræsenterer de to første dele rød, de to andre dele repræsenterer grøn, og de to tredje dele repræsenterer blå. Så i vores eksempel:

• Den røde komponent, RR, har værdien FF.
• Den grønne komponent, GG, er 57.
• Den blå komponent, BB, er 33.

Nu, for at finde intensiteten af ​​disse farvesegmenter, skal du beregne det hexadecimale tal ved at bruge disse tre trin:

1. Multiplicer det første hexadecimale tegn i RR med 16. Hvis tegnet er et bogstav, skal du konvertere det til dets tilsvarende værdi. I dette tilfælde er det første tegn F, som er 15. Så for vores eksempel multiplicerer du 15 × 16, hvilket er lig med 240.
2. Tilføj derefter det andet tegn i RR. Igen, konverter et bogstav til dets tilsvarende værdi, hvis behovet opstår. I vores eksempel er det andet tegn F, som er lig med 15.
3. Når du er færdig, skal du tilføje totalerne for at få en enkelt værdi. Hvis du tilføjer 240 og 15 fra vores eksempel, vil du se værdien af ​​FF er 255.

Gentag den samme formel for de resterende to segmenter, GG angivet med 57 og BB angivet med 33. Hvis de manuelle beregninger virker for overvældende, kan du altid bruge et hex til RGB-konverteringsværktøj (som BinaryHex Converter) for at læse en farve. Du bør finde ud af, at hex-værdien #FF5733 svarer til rgb (255, 87, 51).

Hvorfor er hex-farvekoden så populær?

Mens der er flere forskellige farvemodeller (RGB, CMYK, HSL), er hex-farvekoder måske den mest udbredte repræsentation. Dette skyldes, at de er enkle og nemme at forstå.

Et format med fast bredde er også meget nyttigt. Hexadecimale farver i fuld længde er altid syv tegn, inklusive det førende # symbol.

Hex-farver er meget effektive, idet de kun bruger disse syv tegn til at repræsentere mere end 16 millioner farver. Og at skelne mellem disse farver er en ligetil proces.

Hex vs. RGB: Er der nogen forskel?

RGB-systemet til farvekodning bruger tre decimaltal til at angive de relative intensiteter af rød, grøn og blå. Den bruger cifrene 0-9.

Hex bruger også tre tal til at repræsentere rød, grøn og blå, men den bruger ekstra cifre (A-F) til at tage højde for base 16. Der er ingen forskel i de resulterende farver, de er simpelthen forskellige formater til at kommunikere den samme information.

Relaterede: CSS Fundamentals: Arbejde med farver

Hvad bruges hex-koden til?

En række forskellige applikationer bruger RGB, fra tv-skærme til mobile enheder, spil og skilte. Du vil hovedsageligt se hex-farvekoder i webdesign og andre grafikprogrammer.

Du kan også se hex-koder som en universel måde at identificere farver på. Mange websteder bruger dem til at identificere en bestemt farve, da de er korte og normalt entydige i konteksten.

Hex-farvekoden er ikke raketvidenskab

Så der har du det grundlæggende i hex-farvekoder. De er ikke ligefrem hård videnskab, men de tjener et bestemt formål i design (og i teknologiverdenen). Hvis du leder efter et værktøj, der vil hjælpe dig med at forstå, hvordan hex-farver fungerer, eller et, der vil lære dig om RGB-blandingsteori, er der masser online. Husk, at nøglen til at lære noget nyt er at tage det et skridt ad gangen.

Hex-farvekoder er ikke de mest spændende ting i verden, men det er vigtigt at forstå dem, hvis du arbejder med webdesign. At kunne arbejde med hex-farvekoder vil gøre dit designarbejde meget lettere.

Sådan finder du hex-værdien af ​​enhver farve på din skærm

Lær, hvordan du vælger enhver farveværdi fra din skærm på få sekunder. Især nyttigt for webdesignere!

Læs Næste

Om forfatteren