# Hex RGB-muotoon: muunna värikoodit käsin tai koodilla

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

Hex-koodi on vain kolme lukua 16-kantaisessa muodossa. Kun tunnistat parit, muuntaminen käsin kestää sekunteja. Koodiversioon riittää neljä riviä.

## The short version

- Muunna hex RGB-muotoon jakamalla kuusimerkkinen koodi kolmeen pariin ja muuntamalla kukin 16-kantaisesta luvuksi väliltä 0 ja 255.
- Kunkin parin arvo saadaan kertomalla ensimmäinen merkki 16:lla ja lisäämällä toinen. Kirjaimet a:sta f:ään vastaavat lukuja 10:stä 15:een.
- Hex-koodi #7c3aed on rgb(124 58 237): 7c on 124, 3a on 58 ja ed on 237.
- Kolmimerkkinen hex-koodi on lyhennys, jossa kukin merkki kahdennetaan. Siksi #f60 on sama väri kuin #ff6600.
- Hex ja RGB kuvaavat täsmälleen samoja sRGB-värejä, joten muuntaminen niiden välillä ei koskaan muuta värin ulkonäköä.

Muunna **hex RGB-muotoon** jakamalla koodi kolmeen merkkipariin, yksi punaiselle, vihreälle ja siniselle. Muunna kukin pari 16-kantaisesta tavalliseksi luvuksi väliltä 0 ja 255. Koodin `#7c3aed` parit ovat `7c`, `3a` ja `ed`. Niistä saadaan 124, 58 ja 237, joten väri on `rgb(124 58 237)`. Väri itsessään ei muutu. Hex ja RGB ovat kaksi tapaa kirjoittaa samat kolme lukua.

## Hex-värikoodin rakenne

Hex-koodissa on kuusi merkkiä risuaidan jälkeen. Kaksi ensimmäistä kuvaa punaista kanavaa, keskimmäiset vihreää ja viimeiset sinistä. Jokaisella kanavalla on 256 mahdollista arvoa, 0:sta eli ei lainkaan kyseistä valoa 255:een eli täyteen määrään. 16-kantaisena mikä tahansa näistä 256 arvosta mahtuu täsmälleen kahteen merkkiin. Siksi hexistä tuli tiivis tapa kirjoittaa värejä verkossa. Eri koodien yhteyksistä kertoo [värikoodien selitys](https://gradiently.design/fi/guide/color-codes-explained).

16-kantaisessa järjestelmässä lasketaan 0:sta 9:ään ja jatketaan sitten kirjaimilla. Muuta ei tarvitse opetella ulkoa:

| Hex-merkki | Arvo | Hex-merkki | Arvo |
| --- | --- | --- | --- |
| 0:sta 9:ään | 0:sta 9:ään | c | 12 |
| a | 10 | d | 13 |
| b | 11 | e | 14 |
| f | 15 | ff (pari) | 255 |

Kirjainkoolla ei ole merkitystä: #7C3AED ja #7c3aed ovat sama väri.

## Näin muunnat hexin RGB-muotoon käsin

Kukin pari on kaksimerkkinen 16-kantainen luku. Vasen merkki kertoo kuusitoistaisten määrän ja oikea ykkösten määrän. Kerro vasemman merkin arvo 16:lla ja lisää oikean arvo, niin saat kanavan arvon.

1. **Poista risuaita ja jaa pareihin** `#7c3aed` jakautuu pareihin `7c`, `3a` ja `ed`. Ne kuvaavat punaista, vihreää ja sinistä tässä järjestyksessä.
2. **Muunna punainen pari** `7c`: 7 × 16 = 112, ja c on 12, joten punainen on 112 + 12 = **124**.
3. **Muunna vihreä pari** `3a`: 3 × 16 = 48, ja a on 10, joten vihreä on 48 + 10 = **58**.
4. **Muunna sininen pari** `ed`: e on 14, 14 × 16 = 224, ja d on 13, joten sininen on 224 + 13 = **237**.
5. **Kirjoita tulos** Nykyaikainen CSS hyväksyy muodon `rgb(124 58 237)`. Vanhempi pilkullinen muoto `rgb(124, 58, 237)` toimii edelleen kaikkialla.

Kaksi nopeaa tarkistusta auttavat välttämään virheitä. `00` on aina 0 ja `ff` aina 255. Kirjaimella a:sta f:ään alkava pari on siis vähintään 160, ja merkillä 0:sta 7:ään alkava pari jää alle 128:n. Jos saat parille `ed` pienen arvon, olet lukenut merkit väärässä järjestyksessä.

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

Viisi laskettua muunnosta. Kokeile yhtä käsin ja tarkista tulos värinäytteen nimestä.

## Lyhennetyt koodit ja alfa

**Kolmimerkkinen koodi** on lyhennys: kahdenna kukin merkki, niin saat täyden koodin. `#f60` tarkoittaa `#ff6600`, joka on `rgb(255 102 0)`. `#fff` on valkoinen ja `#000` musta. Näin voi kirjoittaa vain värit, joiden jokaisessa parissa sama merkki toistuu. Siksi koodilla `#7c3aed` ei ole lyhennystä.

**Kahdeksanmerkkinen koodi** lisää neljännen parin peittävyydelle. Muunna se samalla tavalla ja jaa sitten 255:llä saadaksesi osuuden. `#7c3aed80` päättyy pariin `80`, joka on 128. Luku 128 ÷ 255 on noin 0,5, joten väri vastaa muotoa `rgb(124 58 237 / 50%)`. Nelimerkkinen koodi, kuten `#f608`, on saman ajatuksen lyhennetty versio.

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

Jokainen rivi kussakin ryhmässä näyttää samalta. Valitse muoto, jota tiimisi lukee nopeimmin, ja käytä sitä johdonmukaisesti.

## Hex RGB-muotoon JavaScriptillä

Koodissa `parseInt` tekee kantamuunnoksen, kun annat kantaluvuksi 16. Alla oleva funktio hyväksyy kolme-, neljä-, kuusi- ja kahdeksanmerkkiset koodit risuaidan kanssa tai ilman. Se palauttaa kanavat sekä alfa-arvon väliltä 0 ja 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 }
```

Kirjastoa ei tarvita. Validointirivi estää kirjoitusvirhettä muuttumasta huomaamatta mustaksi.

## Näin muunnat RGB:n hex-muotoon

Takaisin muunnetaan jakamalla. Jaa kanavan arvo 16:lla: kokonaisosa on ensimmäinen merkki ja jakojäännös toinen. Luvulle 153 lasku 153 ÷ 16 antaa 9 ja jakojäännöksen 9, joten pari on `99`. Luvulle 51 tulos on 3 ja jakojäännös 3, eli `33`. Luku 102 antaa 6 ja jakojäännöksen 6, eli `66`. Siksi `rgb(51 102 153)` on `#336699`. JavaScriptissä `toString(16)` tekee muunnoksen. Täydennä alku nollalla, jotta yksimerkkiset arvot säilyvät kaksimerkkisinä:

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

Ilman padStart-metodia 13 muuttuisi d:ksi eikä 0d:ksi, ja koodi jäisi yhden merkin vajaaksi.

## Milloin käyttää hexiä, RGB:tä tai muuta muotoa

Hex on tiivis ja helppo liittää työkalusta toiseen, joten sitä käytetään brändiohjeissa ja suunnittelutiedostoissa. RGB:tä on helpompi hahmottaa, kun muutat yhtä kanavaa tai lisäät läpinäkyvyyttä koodissa. Kumpikaan ei vastaa hyvin suunnittelijan tavallisiin pyyntöihin, kuten ”tee tästä hieman vaaleampi” tai ”etsi pehmeämpi versio tästä sinisestä”. Niihin [HSL-väri](https://gradiently.design/fi/guide/hsl-colors) ja [OKLCH](https://gradiently.design/fi/guide/oklch-explained) sopivat paremmin: ne kuvaavat väriä sävyn ja vaaleuden avulla, joten pienet muutokset käyttäytyvät ennakoitavasti.

### Hex tai RGB sopii näihin

- Brändiohjeet ja tietojen luovutus kehittäjille
- Värin kopiointi sovellusten välillä
- Läpinäkyvyyden lisääminen CSS:ssä tai canvasissa
- Määrityksen täsmällisen arvon toistaminen

### Valitse HSL tai OKLCH näihin

- Värin vaalentaminen tai tummentaminen
- Vaaleiden ja tummien sävyjen rakentaminen palettiin
- Tasaisemmat liukuvärit kaukaisten sävyjen välillä
- Teemojen luominen CSS-muuttujilla

Painossa yksi ero on vielä olennainen. Hex ja RGB kuvaavat näytön valoa, joten tulostimen pitää muuntaa ne musteiksi. Hyvin kirkkaat näyttövärit voivat himmetä paperilla. [RGB ja CMYK](https://gradiently.design/fi/guide/rgb-vs-cmyk) kertoo, mitä odottaa. Näytöllä muunnetut värit ovat identtiset. Kun värin pitää häipyä läpinäkyväksi, käytä yllä olevia alfamuotoja. [Läpinäkyvät liukuvärit CSS:ssä](https://gradiently.design/fi/guide/css-gradient-transparent) näyttää ne käytännössä.

Ennen kuin käytät muunnettua väriä tekstissä, tarkista sen erottuminen taustasta [värikontrastin tarkistimella](https://gradiently.design/fi/guide/color-contrast-accessibility). Gradientlyssä sitä tarvitsee harvoin: Automaattinen muste valitsee kullekin riville vaalean tai tumman tekstivärin Markin omasta paletista, jotta sanat erottuvat.

## FAQ

### Miten hex muunnetaan RGB-muotoon?

Jaa kuusimerkkinen koodi kolmeen pariin ja muunna kukin 16-kantaisesta: kerro ensimmäinen merkki 16:lla ja lisää toinen. Kirjaimet a:sta f:ään tarkoittavat lukuja 10:stä 15:een. #7c3aed muuttuu arvoiksi 124, 58, 237.

### Mikä on #ffffff RGB-muodossa?

Se on rgb(255 255 255), puhdas valkoinen. Jokainen pari on ff, eli 15 × 16 + 15 = 255.

### Miten muunnan hexin RGBA-muotoon?

Muunna kolme ensimmäistä paria tavalliseen tapaan. Jos koodissa on kahdeksan merkkiä, muunna myös viimeinen pari ja jaa se 255:llä saadaksesi alfan. Siten 80 antaa noin 0,5.

### Muuttuuko väri, kun hex muunnetaan RGB-muotoon?

Ei. Molemmat ovat merkintätapoja samoille sRGB-arvoille, joten väri näkyy kummallakin tavalla identtisenä.

### Miten muunnan RGB:n takaisin hex-muotoon?

Jaa kukin kanava 16:lla: kokonaisosa on ensimmäinen hex-merkki ja jakojäännös toinen. Käytä JavaScriptissä muotoa value.toString(16).padStart(2, '0').