Hex till RGB: konvertera färgkoder för hand eller i kod

För att konvertera hex till RGB delar du koden i tre teckenpar, ett var för rött, grönt och blått, och gör om varje par från bas 16 till ett vanligt tal mellan 0 och 255. För #7c3aed är paren 7c, 3a och ed, som blir 124, 58 och 237, så färgen är rgb(124 58 237). Ingenting hos färgen ändras. Hex och RGB är två stavningar av samma tre tal.

Så är en hexfärgkod uppbyggd

En hexkod har sex tecken efter brädgården. De två första är den röda kanalen, de två i mitten är gröna och de två sista är blå. Varje kanal kan rymma 256 värden, från 0 (inget av det ljuset) till 255 (allt). Bas 16 kan skriva vilket som helst av de 256 värdena med exakt två tecken, vilket är varför hex blev det kompakta sättet att skriva färger på webben. För den bredare bilden av hur koderna hänger ihop, se hexfärgkoder förklarade.

Bas 16 räknar från 0 till 9 och fortsätter sedan med bokstäver. Det är det enda du behöver lära dig utantill:

Så konverterar du hex till RGB för hand

Varje par är ett tvåsiffrigt tal i bas 16. Vänstra siffran räknar sextontal och högra räknar ental. Multiplicera vänstra siffran med 16, addera högra siffran, så har du kanalens värde.

1. 1

   Släng brädgården och dela i par

   #7c3aed blir 7c, 3a och ed. Det är rött, grönt och blått i den ordningen.

2. 2

   Konvertera det röda paret

   7c: 7 × 16 = 112, och c är 12, så rött är 112 + 12 = 124.

3. 3

   Konvertera det gröna paret

   3a: 3 × 16 = 48, och a är 10, så grönt är 48 + 10 = 58.

4. 4

   Konvertera det blå paret

   ed: e är 14, 14 × 16 = 224, och d är 13, så blått är 224 + 13 = 237.

5. 5

   Skriv resultatet

   Modern CSS tar rgb(124 58 237). Den äldre formen med kommatecken, rgb(124, 58, 237), fungerar fortfarande överallt.

Två snabba kontroller håller dig ärlig. 00 är alltid 0 och ff är alltid 255, så varje par som börjar med en bokstav från a till f är 160 eller mer, och varje par som börjar med 0 till 7 är under 128. Om ditt svar för ed blir litet har du läst siffrorna åt fel håll.

Förkortade koder och alfa

En tresiffrig kod är en genväg: dubblera varje siffra för att få hela koden. #f60 betyder #ff6600, vilket är rgb(255 102 0). #fff är vitt och #000 är svart. Bara färger vars par upprepar en siffra kan skrivas så, så #7c3aed har ingen kort form.

En åttasiffrig kod lägger till ett fjärde par för opacitet. Den konverteras på samma sätt, sedan delar du med 255 för att få en andel. #7c3aed80 slutar på 80, vilket är 128, och 128 ÷ 255 är ungefär 0,5, så den motsvarar rgb(124 58 237 / 50%). En fyrsiffrig kod som #f608 är förkortningen av samma 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 till RGB i JavaScript

I kod gör parseInt med radix 16 baskonverteringen åt dig. Funktionen nedan accepterar tre-, fyra-, sex- och åttasiffriga koder, med eller utan brädgård, och returnerar kanalerna plus en alfa mellan 0 och 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å konverterar du RGB till hex

Att gå tillbaka är division. Dela kanalen med 16: heltalet är första siffran och resten är andra. För 153 är 153 ÷ 16 lika med 9 rest 9, så paret är 99. För 51 blir det 3 rest 3, vilket ger 33, och 102 ger 6 rest 6, alltså 66. Alltså är rgb(51 102 153) #336699. I JavaScript gör toString(16) det, med utfyllnad så att ensiffriga tal behåller sin inledande nolla:

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 ska använda hex, RGB eller något annat

Hex är kompakt och lätt att klistra in mellan verktyg, vilket är varför varumärkesguider och designfiler använder det. RGB är lättare att resonera om när du behöver ändra en kanal eller lägga till transparens i kod. Ingen av dem är bra på de frågor designers faktiskt ställer, som ”gör den här lite ljusare” eller ”hitta en mjukare version av det här blå”. För dem beskriver HSL-färg och OKLCH färger med nyans och ljushet, så att små ändringar beter sig förutsägbart.

En skillnad till spelar roll för tryck. Hex och RGB beskriver ljus på en skärm, så ett tryckeri måste översätta dem till tryckfärg, och mycket klara skärmfärger kan bli matta på papper. RGB mot CMYK förklarar vad du kan vänta dig. På skärmen är de konverterade färgerna identiska, och när du behöver att en färg tonar ut är det alfaformerna ovan du skriver. Genomskinliga gradienter i CSS visar dem i arbete.

Innan du släpper någon konverterad färg som text, kontrollera den mot sin bakgrund med en kontrastkontroll för färger. I Gradiently behöver du sällan det: auto ink väljer ljus eller mörk text för varje rad ur Markens egen palett, så orden läses.