Hex til RGB: omregn farvekoder i hånden eller i kode

For at omregne hex til RGB deler du koden i tre par tegn, et for hver af rød, grøn og blå, og gør hvert par fra 16-talssystemet til et almindeligt tal mellem 0 og 255. For #7c3aed er parrene 7c, 3a og ed, som bliver til 124, 58 og 237, så farven er rgb(124 58 237). Intet ved farven ændrer sig. Hex og RGB er to stavemåder for de samme tre tal.

Sådan er en hexfarvekode bygget op

En hexkode har seks tegn efter havelågen. De første to er den røde kanal, de midterste to er grøn, og de sidste to er blå. Hver kanal kan rumme 256 værdier, fra 0 (intet af det lys) til 255 (det hele). 16-talssystemet kan skrive hver af de 256 værdier med præcis to tegn, og derfor blev hex den kompakte måde at skrive farver på nettet. For det store billede af, hvordan koderne hænger sammen, se hexfarvekoder forklaret.

16-talssystemet tæller fra 0 til 9 og fortsætter så med bogstaver. Det er det eneste, du skal huske udenad:

Sådan omregner du hex til RGB i hånden

Hvert par er et tocifret tal i 16-talssystemet. Det venstre ciffer tæller sekstener, og det højre tæller enere. Gang det venstre ciffer med 16, læg det højre til, og du har kanalens værdi.

1. 1

   Fjern havelågen, og del i par

   #7c3aed bliver til 7c, 3a og ed. Det er rød, grøn og blå i den rækkefølge.

2. 2

   Omregn det røde par

   7c: 7 × 16 = 112, og c er 12, så rød er 112 + 12 = 124.

3. 3

   Omregn det grønne par

   3a: 3 × 16 = 48, og a er 10, så grøn er 48 + 10 = 58.

4. 4

   Omregn det blå par

   ed: e er 14, 14 × 16 = 224, og d er 13, så blå er 224 + 13 = 237.

5. 5

   Skriv resultatet

   Moderne CSS tager rgb(124 58 237). Den ældre form med kommaer, rgb(124, 58, 237), virker stadig overalt.

To hurtige tjek holder dig på sporet. 00 er altid 0, og ff er altid 255, så ethvert par, der starter med et bogstav fra a til f, er 160 eller mere, og ethvert par, der starter med 0 til 7, er under 128. Bliver dit svar for ed lille, har du læst cifrene i den forkerte rækkefølge.

Forkortede koder og alfa

En trecifret kode er en genvej: fordobl hvert ciffer for at få den fulde kode. #f60 betyder #ff6600, som er rgb(255 102 0). #fff er hvid, og #000 er sort. Kun farver, hvor hvert par gentager et ciffer, kan skrives sådan, så #7c3aed har ingen kort form.

En ottecifret kode tilføjer et fjerde par for gennemsigtighed. Den omregnes på samme måde, og så dividerer du med 255 for at få en brøk. #7c3aed80 slutter med 80, som er 128, og 128 ÷ 255 er omkring 0,5, så den svarer til rgb(124 58 237 / 50%). En firecifret kode som #f608 er den forkortede version af samme idé.

.card {
  /* the same violet written four ways */
  color: #7c3aed;
  color: rgb(124 58 237);
  color: rgb(124, 58, 237);

  /* half transparent */
  background: #7c3aed80;
  background: rgb(124 58 237 / 50%);
}

Hex til RGB i JavaScript

I kode klarer parseInt med radix 16 omregningen for dig. Funktionen nedenfor accepterer koder med tre, fire, seks og otte cifre, med eller uden havelåge, og returnerer kanalerne plus en alfa mellem 0 og 1.

function hexToRgb(hex) {
  let h = hex.replace(/^#/, '');
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map((c) => c + c).join('');
  }
  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(h)) {
    throw new Error('Not a hex colour: ' + hex);
  }
  const n = (i) => parseInt(h.slice(i, i + 2), 16);
  return {
    r: n(0),
    g: n(2),
    b: n(4),
    a: h.length === 8 ? Math.round((n(6) / 255) * 100) / 100 : 1,
  };
}

hexToRgb('#7c3aed');   // { r: 124, g: 58, b: 237, a: 1 }
hexToRgb('f60');       // { r: 255, g: 102, b: 0, a: 1 }
hexToRgb('#7c3aed80'); // { r: 124, g: 58, b: 237, a: 0.5 }

Sådan omregner du RGB til hex

Vejen tilbage er division. Divider kanalen med 16: heltallet er det første ciffer, og resten er det andet. For 153 giver 153 ÷ 16 9 med 9 i rest, så parret er 99. For 51 er det 3 med 3 i rest, hvilket giver 33, og 102 giver 6 med 6 i rest, altså 66. Så rgb(51 102 153) er #336699. I JavaScript klarer toString(16) det, med udfyldning, så enkelte cifre beholder deres foranstillede nul:

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');

rgbToHex(51, 102, 153); // '#336699'
rgbToHex(13, 148, 136); // '#0d9488'

Hvornår du skal bruge hex, RGB eller noget andet

Hex er kompakt og let at indsætte mellem værktøjer, og derfor bruger brandguides og designfiler det. RGB er nemmere at arbejde med, når du skal ændre én kanal eller tilføje gennemsigtighed i kode. Ingen af dem er gode til de spørgsmål, designere faktisk stiller, som »gør den her en smule lysere« eller »find en blødere version af den her blå«. Til dem beskriver HSL-farver og OKLCH farver ud fra nuance og lyshed, så små ændringer opfører sig forudsigeligt.

Én forskel mere betyder noget for tryk. Hex og RGB beskriver lys på en skærm, så en printer skal oversætte dem til blæk, og meget klare skærmfarver kan blive matte på papir. RGB vs. CMYK forklarer, hvad du kan forvente. På skærmen er de omregnede farver identiske, og når en farve skal tone ud, er det alfaformerne ovenfor, du skriver; gennemsigtige gradienter i CSS viser dem i brug.

Før du sender en omregnet farve ud som tekst, så tjek den mod baggrunden med en kontrasttjekker. I Gradiently behøver du det sjældent: Automatisk tekstfarve vælger lys eller mørk skrift til hver linje ud fra Markens egen palet, så ordene kan læses.