# Heks til RGB: konverter fargekoder for hånd eller med kode

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

En hekskode er bare tre tall skrevet med grunntall 16. Når du ser parene, tar håndregningen sekunder, og kodeversjonen er fire linjer.

## The short version

- For å konvertere heks til RGB deler du den sekstegnede koden i tre par og konverterer hvert par fra grunntall 16 til et tall mellom 0 og 255.
- Hvert par beregnes som første siffer ganger 16, pluss det andre sifferet. Bokstavene a til f står for 10 til 15.
- Hekskoden #7c3aed er rgb(124 58 237): 7c er 124, 3a er 58 og ed er 237.
- En hekskode med tre tegn er en kortform der hvert tegn dobles, så #f60 er samme farge som #ff6600.
- Heks og RGB beskriver nøyaktig de samme sRGB-fargene, så konvertering mellom dem endrer aldri hvordan fargen ser ut.

For å konvertere **heks til RGB** deler du koden i tre tegnpar, ett for rødt, ett for grønt og ett for blått. Gjør så hvert par om fra grunntall 16 til et vanlig tall mellom 0 og 255. For `#7c3aed` er parene `7c`, `3a` og `ed`, som blir 124, 58 og 237. Fargen er altså `rgb(124 58 237)`. Selve fargen endres ikke. Heks og RGB er to skrivemåter for de samme tre tallene.

## Slik er en heksfargekode bygget opp

En hekskode har seks tegn etter nummertegnet. De to første er rødkanalen, de to midterste grønnkanalen og de to siste blåkanalen. Hver kanal kan ha 256 verdier, fra 0 (ingenting av dette lyset) til 255 (alt). Grunntall 16 kan skrive alle disse 256 verdiene med nøyaktig to tegn. Derfor ble heks den kompakte måten å skrive nettfarger på. For sammenhengen mellom kodene, se [heksfargekoder forklart](https://gradiently.design/nb/guide/color-codes-explained).

Grunntall 16 teller fra 0 til 9 og fortsetter med bokstaver. Det er det eneste du trenger å huske:

| Hekssiffer | Verdi | Hekssiffer | Verdi |
| --- | --- | --- | --- |
| 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å bokstaver betyr det samme: #7C3AED og #7c3aed er samme farge.

## Konverter heks til RGB for hånd

Hvert par er et tosifret tall med grunntall 16. Venstre siffer teller sekstenere, og høyre siffer teller enere. Gang venstre siffer med 16, legg til høyre siffer, så har du kanalverdien.

1. **Fjern nummertegnet og del i par** `#7c3aed` blir `7c`, `3a` og `ed`. Dette er rødt, grønt og blått i den rekkefølgen.
2. **Konverter det røde paret** `7c`: 7 × 16 = 112, og c er 12, så rødt er 112 + 12 = **124**.
3. **Konverter det grønne paret** `3a`: 3 × 16 = 48, og a er 10, så grønt er 48 + 10 = **58**.
4. **Konverter det blå paret** `ed`: e er 14, 14 × 16 = 224, og d er 13, så blått er 224 + 13 = **237**.
5. **Skriv resultatet** Moderne CSS bruker `rgb(124 58 237)`. Den eldre kommaformen `rgb(124, 58, 237)` fungerer fortsatt overalt.

To raske kontroller hjelper. `00` er alltid 0, og `ff` er alltid 255. Derfor er alle par som begynner med a til f, minst 160, og alle som begynner med 0 til 7, under 128. Får du et lite tall for `ed`, har du lest sifrene i feil rekkefø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 ferdige konverteringer. Prøv en for hånd og sjekk svaret mot navnet på fargeprøven.

## Kortkoder og alfa

En **kode med tre tegn** er en snarvei: doble hvert tegn for å få hele koden. `#f60` betyr `#ff6600`, som er `rgb(255 102 0)`. `#fff` er hvitt og `#000` svart. Bare farger der parene gjentar samme tegn, kan skrives slik, så `#7c3aed` har ingen kortform.

En **kode med åtte tegn** legger til et fjerde par for ugjennomsiktighet. Konverter på samme måte, og del deretter på 255 for å få en andel. `#7c3aed80` slutter på `80`, som er 128. 128 ÷ 255 er omtrent 0,5, så den tilsvarer `rgb(124 58 237 / 50%)`. En kode med fire tegn, som `#f608`, er kortformen av samme prinsipp.

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

Alle linjene i hver gruppe gjengis identisk. Bruk formen teamet leser raskest, og vær konsekvent.

## Heks til RGB i JavaScript

I kode gjør `parseInt` med grunntall 16 konverteringen for deg. Funksjonen under godtar koder med tre, fire, seks og åtte tegn, med eller uten nummertegn, og returnerer kanalene samt en alfa mellom 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 }
```

Ingen bibliotek trengs. Valideringslinjen hindrer at en skrivefeil ubemerket blir til svart.

## Konverter RGB til heks

Veien tilbake er divisjon. Del kanalen på 16: heltallsdelen er første siffer, og resten er andre. For 153 gir 153 ÷ 16 heltallet 9 med rest 9, så paret er `99`. For 51 er det 3 med rest 3, som gir `33`, mens 102 gir 6 med rest 6, altså `66`. Dermed er `rgb(51 102 153)` lik `#336699`. I JavaScript gjør `toString(16)` jobben, med utfylling slik at enkeltsifre beholder nullen foran:

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

Uten padStart ville 13 blitt d fremfor 0d, og koden ville manglet ett tegn.

## Når du bør bruke heks, RGB eller noe annet

Heks er kompakt og lett å lime inn mellom verktøy. Derfor brukes det i merkevareguider og designfiler. RGB er enklere å forstå når du skal endre én kanal eller legge til gjennomsiktighet i kode. Ingen av dem er gode til spørsmål designere faktisk stiller, som «gjør denne litt lysere» eller «finn en mykere versjon av dette blå». Til det beskriver [HSL-farge](https://gradiently.design/nb/guide/hsl-colors) og [OKLCH](https://gradiently.design/nb/guide/oklch-explained) farger med fargetone og lyshet, slik at små endringer blir forutsigbare.

### Heks eller RGB passer til

- Merkevareguider og overlevering til utviklere
- Kopiering av en farge mellom apper
- Gjennomsiktighet i CSS eller canvas
- Nøyaktig samsvar med en spesifikasjon

### Velg HSL eller OKLCH til

- Å gjøre en farge lysere eller mørkere
- Å bygge lyse og mørke nyanser til en palett
- Mykere gradienter mellom fjerntliggende fargetoner
- Temaer med CSS-variabler

Én forskjell til betyr noe for trykk. Heks og RGB beskriver skjermlys, så skriveren må oversette dem til blekk. Svært sterke skjermfarger kan bli mattere på papir. [RGB og CMYK](https://gradiently.design/nb/guide/rgb-vs-cmyk) forklarer hva du kan forvente. På skjermen er de konverterte fargene identiske. Trenger du en farge som tones ut, skriver du alfaformene over. [Gjennomsiktige gradienter i CSS](https://gradiently.design/nb/guide/css-gradient-transparent) viser dem i bruk.

Før du publiserer en konvertert farge som tekst, kontroller den mot bakgrunnen med en [fargekontrastkontroll](https://gradiently.design/nb/guide/color-contrast-accessibility). I Gradiently trenger du det sjelden: Auto-tekstfarge velger lys eller mørk tekst for hver linje fra Markens egen palett, slik at ordene er lesbare.

## FAQ

### Hvordan konverterer du heks til RGB?

Del den sekstegnede koden i tre par og konverter hvert fra grunntall 16: gang første siffer med 16 og legg til det andre, der a til f betyr 10 til 15. #7c3aed blir 124, 58, 237.

### Hva er #ffffff i RGB?

Det er rgb(255 255 255), rent hvitt. Alle parene er ff, som er 15 × 16 + 15 = 255.

### Hvordan konverterer jeg heks til RGBA?

Konverter de tre første parene som vanlig. Har koden åtte tegn, konverter også siste par og del på 255 for alfa, så 80 gir omtrent 0,5.

### Endrer konvertering fra heks til RGB fargen?

Nei. Begge er skrivemåter for de samme sRGB-verdiene, så fargen gjengis identisk uansett form.

### Hvordan konverterer jeg RGB tilbake til heks?

Del hver kanal på 16: heltallsdelen er første hekssiffer og resten det andre. I JavaScript bruker du value.toString(16).padStart(2, '0').