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

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.

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

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

   Konverter det røde paret

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

3. 3

   Konverter det grønne paret

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

4. 4

   Konverter det blå paret

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

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

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.

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

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.

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 }

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:

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'

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 og OKLCH farger med fargetone og lyshet, slik at små endringer blir forutsigbare.

É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 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 viser dem i bruk.

Før du publiserer en konvertert farge som tekst, kontroller den mot bakgrunnen med en fargekontrastkontroll. 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.