HEX til RGB Color Converter

Hva er en HEX Color Code?

En HEX-fargekode er en seks-tegns alfanumerisk streng som brukes i webdesign og digital grafikk for å representere en bestemt farge.#RRGGBB, hvor hvert to-tegnspar koder intensiteten til en av de tre additive primærfarger - rød (RR), grønn (GG), og blå (BB) - ved hjelp av hexadecimal notasjon (base 16).00(null intensitet) tilFF(maksimal intensitet, tilsvarende 255 i desimal).

HEX-koder oppsto fra behovet for å definere farger i HTML og CSS uten å stole på navngitte farge søkeord. Mens CSS nå støtter flere fargeformater, inkludertrgb(), hsl(), ogoklch(), HEX forblir den mest brukte notasjonen i front-end utvikling, design handoffs, og branding retningslinjer.

Det totale antall unike farger som kan representeres med sekssifrede HEX-koder er 16,777,216 (256 x 256 x 256). Dette er ofte referert til som "True Color" eller "24-bit farge", som samsvarer med farge dybden av de fleste moderne skjermer. Hver kanal får 8 biter (en byte), og tre kanaler sammen produserer 24 biter av fargedata.

HEX-koder er ufølsomme, så#ff8000og#FF8000referere til samme farge. Noen stilguider foretrekker store bokstaver for lesbarhet, mens CSS minifiers ofte gir ut små bokstaver for å lagre bytes - selv om i praksis er forskjellen ubetydelig.

Hvordan konvertere HEX til RGB steg for steg

Å konvertere en HEX-fargekode til sin RGB-ekvivalent er enkelt. Prosessen innebærer å dele seks-tegnstrengen i tre par og konvertere hvert par fra heksadesimal (base 16) til desimal (base 10). Her er trinnvis metoden:

1. Fjern hash-symbolet.Hvis HEX-koden begynner med#For eksempel,#1A2B3Cblir1A2B3C.
2. Del dere i tre par.Del den gjenværende strengen i tre grupper med to tegn:1A, 2B, 3C.
3. Konverter hvert par til desimal.Bruk heksadesimale stedverdier hvor det første sifret multipliseres med 16 og det andre sifret legges til:
   • Rødt:1A-> (1 x 16) + 10 =26
   • Grønn:2B-> (2 x 16) + 11 =43
   • Blå:3C-> (3 x 16) + 12 =60
4. Skriv RGB-verdien.Kombiner de tre desimalverdiene:rgb(26, 43, 60).

De sekstedesimale sifrene og deres desimale ekvivalenter er: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15.

For programmatisk konvertering tilbyr de fleste språk innebygde funksjoner.parseInt("1A", 16)avkastning26. I Python,int("1A", 16)gjør det samme. CSS selv håndterer begge formatene innfødt, så konvertering er først og fremst nyttig når du trenger å manipulere individuelle farge kanaler i koden - for eksempel justere lysstyrke, skape gradienter programmatisk, eller blande to farger.

3-sifrede versus 6-sifrede HEX-koder

CSS støtter en forkortelse i 3-sifret HEX-format (#RGB) som en bekvemmelighet når hvert av de tre parene består av identiske sifre.

• #F80utvider seg til#FF8800-> rgb ((255, 136, 0)
• #FFFutvider seg til#FFFFFF-> rgb ((255, 255, 255)
• #000utvider seg til#000000-> rgb ((0, 0, 0)
• #09Cutvider seg til#0099CC-> rgb ((0, 153, 204)
• #A3Futvider seg til#AA33FF-> rgb{170, 51, 255)

3-sifret notasjon reduserer antall tilgjengelige farger fra 16,7 millioner til bare 4,096 (16 x 16 x 16), så det kan ikke representere hver farge.

CSS støtter også 4-sifret (#RGBA) og 8-sifret (#RRGGBBAA) HEX-koder som inneholder en alfa-kanal (gjennomsiktighet).FFer fullstendig ugjennomsiktig, og00er fullstendig gjennomsiktig.#FF880080representerer fargenrgb(255, 136, 0)Vår konverter fokuserer på standard 3- og 6-sifrede formater; hvis du skriver inn en kode med en alfa-kanal, vil den bare behandle RGB-delen.

HEX til RGB-referansetabell

Nedenfor er en referansetabell over vanlige HEX-farger og deres RGB-ekvivalenter.

CSS definerer 147 navngitte farger totalt, hver med en tilsvarende HEX-verdi. Mens navngitte farger er praktisk for prototyping, profesjonelle prosjekter vanligvis stole på HEX eller RGB-verdier for presisjon og konsistens på tvers av nettlesere og designverktøy.

Populære merkevarefarger - HEX og RGB-verdier

Utviklere og designere trenger ofte de eksakte HEX- og RGB-verdiene til populære merkevarekoler for mockups, integrasjoner og stilguider.

Merkevareguidelines spesifiserer ofte farger i flere formater (HEX, RGB, CMYK, Pantone). Når du implementerer merkevarekolorer i CSS, bekreft alltid verdier mot den offisielle merkevareresurssiden for å sikre nøyaktighet. Farger kan skifte litt mellom skjermer, så konsistens i koden er viktig.

Fargemodeller sammenlignet: HEX, RGB, HSL og CMYK

Å forstå når du skal bruke hver fargemodell hjelper deg med å jobbe mer effektivt på tvers av ulike verktøy og medier:

HEX og RGB er matematisk identiske-- de representerer det samme fargerommet ved hjelp av forskjellig notasjon. Konvertering mellom dem er en enkel base-16 til base-10 oversettelse uten tap av presisjon eller gamut forskjeller. HSL, på den annen side, er en transformasjon av RGB til et sylindrisk koordinatsystem som gjør det lettere å resonnere om nyans, metning og lys uavhengig. CMYK er en subtraktiv fargemodell som brukes i utskrift og kan ikke representere alle RGB-farger (og omvendt), så konverteringer mellom RGB og CMYK er tilnærmet.

I moderne CSS (Level 4),color()funksjon og nye fargerom somoklch()ogdisplay-p3HEX og RGB er fortsatt baseline for web kompatibilitet og støttes av alle nettlesere i bruk i dag.

Bruk av HEX og RGB i CSS og JavaScript

Både HEX og RGB-verdier er gyldige i CSS og gir identiske resultater.

CSS-deklarasjoner:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

JavaScript konvertering funksjoner:

// HEX to RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

Når du arbeider med HTML Canvas API, må farger ofte settes som strenger."#FF8000"og"rgb(255, 128, 0)"arbeid forfillStyleogstrokeStyleDet er imidlertidgetImageData()Metoden returnerer pikseldata som en matrise på 0 - 255 heltall (RGBA), noe som gjør RGB til det naturlige formatet for manipulasjon på pikselnivå.

I CSS egendefinerte egenskaper (variabler), HEX verdier er vanligvis lagret for enkelhet:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

Dette mønsteret med å lagre rå RGB-kanalverdier som en CSS-variabel er en populær teknikk som lar deg bruke ugjennomsiktighet dynamisk uten å konvertere mellom formater på kjøretid.

Tilgjengelighet og fargekontrast

Konvertering av HEX til RGB er ofte det første trinnet i beregningen av fargekontrastforhold for tilgjengelighetsoverensstemmelse.4,5 til 1for vanlig tekst, og3: 1for stor tekst (18px+ fet eller 24px+ vanlig).

Kontrastforholdsformelen kreverrelativ lysstyrkeav hver farge, som er beregnet fra lineære RGB-verdier. Trinnene er:

1. Konvertere HEX til RGB (0 - 255 per kanal).
2. Normaliser hver kanal til 0 - 1 ved å dividere med 255.
3. Bruke sRGB linearisering formel: hvis verdien er <= 0,04045, dele med 12,92; ellers beregne ((verdi + 0,055) / 1,055) ^ 2.4.
4. Beregne luminansen: L = 0,2126 x R + 0,7152 x G + 0,0722 x B.
5. Beregne kontrastforholdet mellom to farger: (L1 + 0,05) / (L2 + 0,05) hvor L1 er den lysere fargen.

Verktøy som WebAIM Contrast Checker, Chrome DevTools color picker, og axe accessibility scanner utfører alle denne konverteringen internt.

For designere, en rask tommelfingerregel: mørk tekst på en lys bakgrunn (eller omvendt) med en luminansforskjell på minst 125 og en fargeforskjell på minst 500 (ved å bruke summen av absolutte forskjeller på tvers av R, G, B-kanaler) vil generelt passere WCAG AA-standarder.