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

[Canonical HTML page](https://gradiently.design/da/guide/hex-to-rgb)

En hexkode er bare tre tal skrevet i 16-talssystemet. Når du kan se parrene, tager det sekunder at omregne i hånden, og kodeversionen er fire linjer.

## The short version

- For at omregne hex til RGB deler du den sekscifrede kode i tre par og omregner hvert par fra 16-talssystemet til et tal mellem 0 og 255.
- Hvert par regnes ud som det første ciffer gange 16 plus det andet ciffer, hvor bogstaverne a til f står for 10 til 15.
- Hexkoden #7c3aed er rgb(124 58 237): 7c er 124, 3a er 58, og ed er 237.
- En trecifret hexkode er en forkortelse, hvor hvert ciffer fordobles, så #f60 er den samme farve som #ff6600.
- Hex og RGB beskriver præcis de samme sRGB-farver, så en omregning mellem dem ændrer aldrig, hvordan en farve ser ud.

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](https://gradiently.design/da/guide/color-codes-explained).

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

| Hexciffer | Værdi | Hexciffer | Værdi |
| --- | --- | --- | --- |
| 0 til 9 | 0 til 9 | c | 12 |
| a | 10 | d | 13 |
| b | 11 | e | 14 |
| f | 15 | ff (et par) | 255 |

Store og små bogstaver er ligegyldige: #7C3AED og #7c3aed er den samme farve.

## 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. **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. **Omregn det røde par** `7c`: 7 × 16 = 112, og c er 12, så rød er 112 + 12 = **124**.
3. **Omregn det grønne par** `3a`: 3 × 16 = 48, og a er 10, så grøn er 48 + 10 = **58**.
4. **Omregn det blå par** `ed`: e er 14, 14 × 16 = 224, og d er 13, så blå er 224 + 13 = **237**.
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.

- #7c3aed = 124 58 237: #7c3aed
- #336699 = 51 102 153: #336699
- #ff6600 = 255 102 0: #ff6600
- #0d9488 = 13 148 136: #0d9488
- #1e293b = 30 41 59: #1e293b

Fem gennemregnede omregninger. Prøv én i hånden, og tjek den mod farveprøvens navn.

## 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é.

```css
.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%);
}
```

Hver linje i hver gruppe gengives ens. Brug den, dit team læser hurtigst, og vær konsekvent.

## 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.

```js
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 }
```

Intet bibliotek nødvendigt. Valideringslinjen forhindrer en tastefejl i stille og roligt at blive til sort.

## 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:

```js
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'
```

Uden padStart ville 13 blive til d i stedet for 0d, og koden ville mangle et tegn.

## 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](https://gradiently.design/da/guide/hsl-colors) og [OKLCH](https://gradiently.design/da/guide/oklch-explained) farver ud fra nuance og lyshed, så små ændringer opfører sig forudsigeligt.

### Hex eller RGB er rigtigt til

- Brandguides og overlevering til udviklere
- At kopiere en farve mellem apps
- At tilføje gennemsigtighed i CSS eller canvas
- At ramme en præcis værdi fra en specifikation

### Brug HSL eller OKLCH til

- At gøre en farve lysere eller mørkere
- At bygge toner og skygger til en palet
- Blødere gradienter mellem fjerne nuancer
- Temaer med CSS-variabler

É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](https://gradiently.design/da/guide/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](https://gradiently.design/da/guide/css-gradient-transparent) viser dem i brug.

Før du sender en omregnet farve ud som tekst, så tjek den mod baggrunden med en [kontrasttjekker](https://gradiently.design/da/guide/color-contrast-accessibility). 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.

## FAQ

### Hvordan omregner man hex til RGB?

Del den sekscifrede kode i tre par, og omregn hvert fra 16-talssystemet: gang det første ciffer med 16, og læg det andet til, hvor a til f betyder 10 til 15. #7c3aed bliver til 124, 58, 237.

### Hvad er #ffffff i RGB?

Det er rgb(255 255 255), ren hvid. Hvert par er ff, som er 15 × 16 + 15 = 255.

### Hvordan omregner jeg hex til RGBA?

Omregn de første tre par som normalt. Har koden otte cifre, så omregn også det sidste par, og divider det med 255 for at få alfa, så 80 giver omkring 0,5.

### Ændrer en omregning fra hex til RGB farven?

Nej. Begge er notationer for de samme sRGB-værdier, så farven gengives ens på begge måder.

### Hvordan omregner jeg RGB tilbage til hex?

Divider hver kanal med 16: heltallet er det første hexciffer, og resten er det andet. I JavaScript bruger du value.toString(16).padStart(2, '0').