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

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

En hexkod är bara tre tal skrivna i bas 16. När du ser paren tar det sekunder att konvertera för hand, och kodversionen är fyra rader.

## The short version

- För att konvertera hex till RGB delar du den sexsiffriga koden i tre par och konverterar varje par från bas 16 till ett tal mellan 0 och 255.
- Varje par räknas ut som första siffran gånger 16 plus andra siffran, där bokstäverna a till f står för 10 till 15.
- Hexkoden #7c3aed är rgb(124 58 237): 7c är 124, 3a är 58 och ed är 237.
- En tresiffrig hexkod är en förkortning där varje siffra dubbleras, så #f60 är samma färg som #ff6600.
- Hex och RGB beskriver exakt samma sRGB-färger, så att konvertera mellan dem ändrar aldrig hur en färg ser ut.

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

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:

| Hexsiffra | Värde | Hexsiffra | Värde |
| --- | --- | --- | --- |
| 0 till 9 | 0 till 9 | c | 12 |
| a | 10 | d | 13 |
| b | 11 | e | 14 |
| f | 15 | ff (ett par) | 255 |

Bokstäverna är skiftlägesokänsliga: #7C3AED och #7c3aed är samma färg.

## 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. **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. **Konvertera det röda paret** `7c`: 7 × 16 = 112, och c är 12, så rött är 112 + 12 = **124**.
3. **Konvertera det gröna paret** `3a`: 3 × 16 = 48, och a är 10, så grönt är 48 + 10 = **58**.
4. **Konvertera det blå paret** `ed`: e är 14, 14 × 16 = 224, och d är 13, så blått är 224 + 13 = **237**.
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.

- #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 räknade konverteringar. Prova en för hand och kontrollera den sedan mot färgprovets namn.

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

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

Varje rad i varje grupp renderas identiskt. Använd den ditt team läser snabbast och var konsekvent.

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

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

Inget bibliotek behövs. Valideringsraden hindrar ett skrivfel från att tyst bli svart.

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

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

Utan padStart skulle 13 bli d i stället för 0d och koden skulle vara ett tecken för kort.

## 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](https://gradiently.design/sv/guide/hsl-colors) och [OKLCH](https://gradiently.design/sv/guide/oklch-explained) färger med nyans och ljushet, så att små ändringar beter sig förutsägbart.

### Hex eller RGB passar för

- Varumärkesguider och överlämning till utvecklare
- Att kopiera en färg mellan appar
- Att lägga till transparens i CSS eller canvas
- Att matcha ett exakt värde ur en specifikation

### Välj HSL eller OKLCH för

- Att göra en färg ljusare eller mörkare
- Att bygga toner och skuggor till en palett
- Mjukare gradienter mellan avlägsna nyanser
- Teman med CSS-variabler

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](https://gradiently.design/sv/guide/rgb-vs-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](https://gradiently.design/sv/guide/css-gradient-transparent) 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](https://gradiently.design/sv/guide/color-contrast-accessibility). 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.

## FAQ

### Hur konverterar man hex till RGB?

Dela den sexsiffriga koden i tre par och konvertera varje från bas 16: multiplicera första siffran med 16 och addera den andra, där a till f betyder 10 till 15. #7c3aed blir 124, 58, 237.

### Vad är #ffffff i RGB?

Det är rgb(255 255 255), rent vitt. Varje par är ff, vilket är 15 × 16 + 15 = 255.

### Hur konverterar jag hex till RGBA?

Konvertera de tre första paren som vanligt. Om koden har åtta siffror, konvertera det sista paret också och dela det med 255 för alfa, så 80 ger ungefär 0,5.

### Ändrar det färgen att konvertera hex till RGB?

Nej. Båda är skrivsätt för samma sRGB-värden, så färgen renderas identiskt oavsett.

### Hur konverterar jag RGB tillbaka till hex?

Dela varje kanal med 16: heltalet är första hexsiffran och resten den andra. I JavaScript använder du value.toString(16).padStart(2, '0').