HEX til RGB Color Converter

Hvad er en HEX-farvekode?

En HEX-farvekode er en alfanumerisk streng på seks tegn, der bruges i webdesign og digital grafik til at repræsentere en bestemt farve.#RRGGBB, hvor hvert to-tegn par koder intensiteten af en af de tre additive primære farver - rød (RR), grøn (GG), og blå (BB) - ved hjælp af hexadecimal notation (base 16).00(nul intensitet) tilFF(maksimal intensitet svarende til 255 i decimaler).

HEX koder stammer fra behovet for at definere farver i HTML og CSS uden at stole på navngivne farve søgeord. Mens CSS nu understøtter flere farve formater, herunderrgb(), hsl(), ogoklch(), HEX forbliver den mest anvendte notation i front-end udvikling, design handoffs, og branding retningslinjer.

Det samlede antal unikke farver, der kan repræsenteres med sekscifrede HEX-koder, er 16.777.216 (256 x 256 x 256). Dette kaldes ofte "True Color" eller "24-bit farve", som matcher farvedybden på de fleste moderne skærme. Hver kanal får 8 bits (en byte), og tre kanaler sammen producerer 24 bits farvedata.

HEX-koder er ufølsomme, så#ff8000og#FF8000Nogle style guides foretrækker store bogstaver for læselighed, mens CSS minifiers ofte udgiver små bogstaver for at gemme bytes - selvom forskellen i praksis er ubetydelig.

Sådan konverteres HEX til RGB trin for trin

Konvertering af en HEX-farvekode til dens RGB-ækvivalent er ligetil. Processen indebærer at opdele den seks-tegnede streng i tre par og konvertere hvert par fra hexadecimal (base 16) til decimal (base 10). Her er den trinvise metode:

1. Fjern hash-symbolet.Hvis HEX-koden begynder med#For eksempel:#1A2B3Cbliver1A2B3C.
2. Del jer i tre par.Den resterende streng opdeles i tre grupper af to tegn:1A, 2B, 3C.
3. Konverter hvert par til decimal.Anvend hexadecimalt stedværdi-system, hvor det første ciffer multipliceres med 16 og det andet ciffer tilføjes:
   • Rød:1A-> (1 x 16) + 10 =26
   • Grøn:2B-> (2 x 16) + 11 =43
   • Blå:3C-> (3 x 16) + 12 =60
4. Skriv RGB-værdien.Kombiner de tre decimalværdier:rgb(26, 43, 60).

De hexadecimale cifre og deres decimale ækvivalenter 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 tilbyder de fleste sprog indbyggede funktioner.parseInt("1A", 16)afkast26. i Python,int("1A", 16)CSS selv håndterer begge formater indbygget, så konvertering er først og fremmest nyttigt, når du har brug for at manipulere individuelle farvekanaler i kode -- for eksempel justere lysstyrke, oprette gradienter programmeret, eller blande to farver.

3- og 6-cifrede HEX-koder

CSS understøtter et stenografisk 3-cifret HEX-format (#RGB) som en bekvemmelighed, når hvert af de tre par består af identiske cifre.

• #F80udvides til#FF8800-> rgb ((255, 136, 0)
• #FFFudvides til#FFFFFF-> rgb ((255, 255, 255)
• #000udvides til#000000-> rgb ((0, 0, 0)
• #09Cudvides til#0099CC-> rgb ((0, 153, 204)
• #A3Fudvides til#AA33FF-> rgb{170, 51, 255)

3-cifret notation reducerer antallet af tilgængelige farver fra 16,7 millioner til kun 4,096 (16 x 16 x 16), så det kan ikke repræsentere hver farve.

CSS understøtter også 4-cifret (#RGBA) og 8-cifret (#RRGGBBAA) HEX-koder, der indeholder en alfa-kanal (gennemsigtighed).FFer fuldstændig uigennemsigtig og00er fuldstændig gennemsigtig.#FF880080repræsenterer farvenrgb(255, 136, 0)Vores konverter fokuserer på standard 3- og 6-cifrede formater; hvis du indtaster en kode med en alfa-kanal, vil den kun behandle RGB-delen.

HEX til RGB-referencetabel

Nedenfor er en reference tabel over almindelige HEX farver og deres RGB ækvivalenter. Denne tabel dækker de mest anvendte farver i webdesign, CSS navngivne farver og populære brand palette valg.

CSS definerer i alt 147 navngivne farver, hver med en tilsvarende HEX-værdi. Mens navngivne farver er bekvemme til prototyping, er professionelle projekter typisk afhængige af HEX eller RGB-værdier for præcision og konsistens på tværs af browsere og designværktøjer.

Populære mærkefarver - HEX og RGB-værdier

Udviklere og designere har ofte brug for de nøjagtige HEX- og RGB-værdier af populære brandfarver til mockups, integrationer og stilguider.

Brand guidelines angiver ofte farver i flere formater (HEX, RGB, CMYK, Pantone). Når implementering af brand farver i CSS, altid bekræfte værdier mod den officielle brand ressource side for at sikre nøjagtighed. Farver kan skifte lidt mellem skærme, så konsistens i koden er afgørende.

Farvemodeller sammenlignet: HEX, RGB, HSL og CMYK

At forstå, hvornår man skal bruge hver farvemodel, hjælper dig med at arbejde mere effektivt på tværs af forskellige værktøjer og medier:

HEX og RGB er matematisk identiske- de repræsenterer det samme farverum ved hjælp af forskellige notationer. Konvertering mellem dem er en simpel base-16 til base-10 oversættelse uden tab af præcision eller gamut forskelle. HSL, på den anden side, er en omdannelse af RGB til et cylindrisk koordinatsystem, der gør det lettere at ræsonnere om nuance, mætning og lys uafhængigt. CMYK er en subtraktiv farvemodel, der anvendes i tryk og kan ikke repræsentere alle RGB farver (og omvendt), så konverteringer mellem RGB og CMYK er omtrentlige.

I moderne CSS (niveau 4) ercolor()funktion og nye farvefelter somoklch()ogdisplay-p3HEX og RGB er dog stadig baseline for webkompatibilitet og understøttes af alle browsere i brug i dag.

Brug af HEX og RGB i CSS og JavaScript

Både HEX- og RGB-værdier er gyldige i CSS og giver identiske resultater.

CSS-deklarationer:

/* 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-konverteringsfunktioner:

// 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 man arbejder med HTML Canvas API, skal farver ofte indstilles som strenge."#FF8000"og"rgb(255, 128, 0)"arbejde forfillStyleogstrokeStyle. doggetImageData()Metoden returnerer pixeldata som en matrix af 0 - 255 heltal (RGBA), hvilket gør RGB til det naturlige format for manipulation på pixelniveau.

I CSS brugerdefinerede egenskaber (variabler) gemmes HEX-værdier almindeligvis for enkelhedens skyld:

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

Dette mønster med at gemme rå RGB-kanalværdier som en CSS-variabel er en populær teknik, der giver dig mulighed for at anvende opacitet dynamisk uden at konvertere mellem formater under kørsel.

Tilgængelighed og farvekontrast

Konvertering af HEX til RGB er ofte det første skridt i beregningen af farvekontrastforhold for tilgængelighedsoverensstemmelse.4,5 til 1for almindelig tekst og3 til 1for stor tekst (18px+ fed eller 24px+ almindelig).

Kontrastforholdsformlen kræver, atrelativ lysstyrkeaf hver farve, som beregnes ud fra lineære RGB-værdier.

1. Konverter HEX til RGB (0 - 255 pr. kanal).
2. Normaliser hver kanal til 0 - 1 ved at dividere med 255.
3. Anvend sRGB lineariseringsformlen: hvis værdien er <= 0,04045, dividere med 12,92; ellers beregne ((værdi + 0,055) / 1,055) ^ 2.4.
4. Beregn luminansen: L = 0,2126 x R + 0,7152 x G + 0,0722 x B.
5. Beregn kontrastforholdet mellem to farver: (L1 + 0,05) / (L2 + 0,05) hvor L1 er den lysere farve.

Som du kan se, er RGB-værdierne det væsentlige input til enhver tilgængelighedskontrastberegning. Værktøjer som WebAIM Contrast Checker, Chrome DevTools farvevælger og Axe tilgængelighedsscanner udfører alle denne konvertering internt.

For designere, en hurtig tommelfingerregel: mørk tekst på en lys baggrund (eller omvendt) med en lysstyrke forskel på mindst 125 og en farve forskel på mindst 500 (ved hjælp af summen af absolutte forskelle på tværs af R, G, B kanaler) vil generelt passere WCAG AA standarder.