# Heksakoodit, RGB, HSL ja OKLCH selitettynä

[Canonical HTML page](https://gradiently.design/fi/guide/color-codes-explained)

#7c3aed, rgb(124 58 237), hsl(262 83% 58%) ja oklch(54.1% 0.247 293) ovat sama violetti. Tässä kerrotaan, mitä kukin merkintätapa oikeasti sanoo ja milloin kukin ansaitsee paikkansa.

## The short version

- Heksakoodit kuten `#7c3aed` ovat tiivis tapa kirjoittaa punaisen, vihreän ja sinisen arvot väliltä 0 ja 255, kukin kahtena 16-kantaisena numerona.
- RGB, heksa ja HSL kuvaavat kaikki samoja sRGB-värejä, joten yhdellä tavalla kirjoitetun värin voi muuntaa tarkasti toisiksi.
- HSL:ää on helppo säätää käsin, mutta sen vaaleusarvo ei vastaa sitä, miltä vaaleat värit oikeasti näyttävät, joten keltainen ja sininen 50 %:n vaaleudella näyttävät hyvin erilaisilta.
- OKLCH kuvaa värin koetun vaaleuden, kroman ja sävyn mukaan, mikä tekee siitä parhaan merkintätavan paletteihin, sävyihin ja sileisiin liukuväreihin.
- Käytännön sääntö: jaa brändivärit heksana ja rakenna paletit ja liukuvärit OKLCH:lla.

**Heksakoodit** kuten `#7c3aed` ovat yleisin tapa kirjoittaa väri näytölle: `#` ja sen perässä kuusi merkkiä, jotka kertovat punaisen, vihreän ja sinisen määrän. RGB kirjoittaa samat luvut desimaaleina, HSL järjestää ne uudelleen sävyksi, kylläisyydeksi ja vaaleudeksi, ja OKLCH kuvaa värin niin kuin silmä sen havaitsee. Ne ovat eri merkintätapoja samoille väreille, ja kukin on paras eri tehtävässä.

- Violetti: #7c3aed
- Taivas: #0ea5e9
- Oranssi: #f97316
- Vihreä: #16a34a
- Muste: #111827

Viisi väriä, joita käytetään esimerkkeinä tässä oppaassa. Alla oleva taulukko kirjoittaa jokaisen kaikilla neljällä merkintätavalla.

## Miten heksakoodit toimivat

Heksakoodi on kolme paria 16-kantaisia numeroita: `#RRGGBB`. 16-kantainen järjestelmä laskee 0:sta 9:ään ja sitten a:sta f:ään, joten jokainen pari kulkee arvosta `00` (ei mitään) arvoon `ff` (255, täysi). Koodissa `#7c3aed` punainen on `7c` (124), vihreä `3a` (58) ja sininen `ed` (237): paljon sinistä, kohtalaisesti punaista, vähän vihreää, eli violetti. Kolme kanavaa, joissa on 256 arvoa, antaa 16 777 216 mahdollista väriä.

- **Lyhenne:** `#f0c` on sama kuin `#ff00cc`. Jokainen numero kaksinkertaistetaan, joten se toimii vain väreille, joiden parit toistuvat.
- **Läpinäkyvyys:** kahdeksannumeroinen koodi lisää alfan loppuun. `#7c3aed80` on violetti noin 50 %:n peittävyydellä, koska `80` on 128 arvosta 255.
- **Kirjainkoolla ei ole väliä:** `#7C3AED` ja `#7c3aed` ovat identtiset.
- **Harmaissa on kolme yhtä suurta paria:** `#767676`, `#1a1a1a` ja `#f4f4f4` ovat kaikki neutraaleja.

## RGB: samat luvut desimaaleina

RGB kirjoittaa kolme kanavaa tavallisina lukuina väliltä 0 ja 255. Nykyaikainen CSS erottaa ne välilyönneillä ja lisää läpinäkyvyyden vinoviivan jälkeen. Vanhempi pilkkusyntaksi ja `rgba()` toimivat yhä kaikkialla. RGB on kätevä, kun työkalu tai rajapinta pyytää lukuja tai kun haluat lukea värin koostumuksen yhdellä silmäyksellä.

```css
/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);
```

Nykyaikainen välilyönnillä erotettu syntaksi ylhäällä, vanhempi pilkkusyntaksi sen alla. Selaimet hyväksyvät molemmat.

## HSL: sävy, kylläisyys ja vaaleus

HSL kuvaa värin **sävyn** kulmana väriympyrällä (0 on punainen, 120 vihreä, 240 sininen), sen **kylläisyyden** harmaasta (0 %) täyteen väriin (100 %) ja sen **vaaleuden** mustasta (0 %) puhtaan värin (50 %) kautta valkoiseen (100 %). Sitä on helppo säätää käsin: tummemman violetin saat laskemalla viimeistä lukua.

Kauneusvirhe on, että HSL:n vaaleus on kaava, ei mittaus siitä, miltä väri näyttää vaaleana. Keltainen 50 %:n vaaleudella näyttää paljon kirkkaammalta kuin sininen 50 %:n vaaleudella. Rakenna paletti pitämällä HSL-vaaleus samana, niin värit eivät näytä yhtä vaaleilta, minkä vuoksi oletussateenkaaret näyttävät raidallisilta. Näkyvän tuloksen näet oppaasta [sateenkaariliukuvärit](https://gradiently.design/fi/guide/rainbow-gradient).

## OKLCH: väri sellaisena kuin sen näet

OKLCH tulee Oklabista, Björn Ottossonin vuonna 2020 julkaisemasta väriavaruudesta, joka on nyt osa CSS:ää. Se käyttää kolmea arvoa: **L** on koettu vaaleus 0 %:sta 100 %:iin, **C** on kroma eli se, kuinka värikäs väri on, 0:sta harmaalle noin 0,37:ään eloisimmille väreille, ja **H** on sävykulma. Yhtä suuret L-arvot näyttävät todella yhtä vaaleilta, joten voit muuttaa yhtä ominaisuutta häiritsemättä muita.

| Väri | Heksa | RGB | HSL | OKLCH |
| --- | --- | --- | --- | --- |
| Violetti | `#7c3aed` | `124 58 237` | `262 83% 58%` | `54.1% 0.247 293` |
| Taivas | `#0ea5e9` | `14 165 233` | `199 89% 48%` | `68.5% 0.148 237` |
| Oranssi | `#f97316` | `249 115 22` | `25 95% 53%` | `70.5% 0.187 48` |
| Vihreä | `#16a34a` | `22 163 74` | `142 76% 36%` | `62.7% 0.17 149` |
| Muste | `#111827` | `17 24 39` | `221 39% 11%` | `21% 0.032 265` |

Samat viisi väriä neljällä merkintätavalla. HSL- ja OKLCH-arvot on pyöristetty. Huomaa, miten HSL pitää vihreää tummempana kuin violettia, kun OKLCH osoittaa sen olevan oikeasti vaaleampi.

OKLCH loistaa liukuväreissä. Tavallisessa sRGB:ssä, heksavärien oletuksessa, häivytys piirtää suoran viivan RGB-kuution läpi, ja väriympyrän vastakkaisilla puolilla olevat värit kohtaavat harmaassa. OKLCH:ssa häivyttäminen säilyttää kroman ja kulkee sen sijaan sävyympyrää pitkin.

- Sinisestä keltaiseen sRGB:ssä: `linear-gradient(90deg, #2563eb 0%, #facc15 100%)`
- Sinisestä keltaiseen OKLCH:ssa: `linear-gradient(90deg, #2563eb 0%, #009edb 25%, #00c49e 50%, #82d14d 75%, #facc15 100%)`

Samat kaksi pysäytyspistettä. sRGB:ssä keskikohta putoaa harmaanoliiviin, OKLCH:ssa se kulkee petroolin ja vihreän kautta. Lisää oppaassa [mutaiset liukuvärit](https://gradiently.design/fi/guide/muddy-gradients).

```css
.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}
```

OKLCH tekee sävyistä ja varjoista ennustettavia: muuta L:ää tasaisin askelin ja laske C:tä päissä, jotta värit pysyvät näytöllä.

## Mitä värikoodia käytetään missäkin

| Tehtävä | Paras merkintätapa | Miksi |
| --- | --- | --- |
| Brändiopas, suunnittelun luovutus | Heksa | Lyhyt, yleinen, liitetään jokaiseen työkaluun |
| Läpinäkyvyys CSS:ssä | RGB tai 8-numeroinen heksa | Selkeä alfa vinoviivan jälkeen |
| Nopeat säädöt käsin | HSL | Sävyä tai tummuutta on helppo nykäistä |
| Paletit, sävyt ja varjot | OKLCH | Tasaiset askeleet näyttävät tasaisilta |
| Liukuvärit | OKLCH | Häivyttää ilman harmaita keskikohtia |
| Laajan väriskaalan näytöt | OKLCH | Yltää väreihin sRGB:n ulkopuolella |
| Paino | CMYK tai kirkasvärit | Näytön koodit eivät koskaan tulostu täsmälleen, katso [liukuvärien painaminen](https://gradiently.design/fi/guide/print-gradients) |

Mikään näistä ei ole väärä. Taito on käyttää kutakin siellä, missä siitä on hyötyä.

> **Näytöt eivät ole paperia** Heksa, RGB, HSL ja OKLCH kuvaavat kaikki näytön valoa. Tulostimet sekoittavat mustetta, joka kattaa eri värialueen, joten vedosta brändivärit aina painossa muunnettuun koodiin luottamisen sijaan.

Kaikkien näiden arvojen testaamiseen [oklch.com](https://oklch.com) näyttää värin kaikilla merkintätavoilla ja varoittaa, kun se jää näytön alueen ulkopuolelle, ja [MDN:n väriviite](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) kattaa jokaisen syntaksin. Jos valitset värejä etkä kirjoita niitä, [miten valitset brändivärit](https://gradiently.design/fi/guide/how-to-choose-brand-colors) on seuraava askel, ja [värikontrasti](https://gradiently.design/fi/guide/color-contrast-accessibility) näyttää, miten tarkistat, että teksti pysyy luettavana.

## FAQ

### Mitä heksakoodin kuusi merkkiä tarkoittavat?

Ne ovat kolme paria 16-kantaisia numeroita punaiselle, vihreälle ja siniselle. Jokainen pari kulkee arvosta `00` (0) arvoon `ff` (255), joten `#7c3aed` tarkoittaa punaista 124, vihreää 58 ja sinistä 237.

### Onko heksa sama kuin RGB?

On. Heksa on RGB kirjoitettuna 16-kantaisena. `#7c3aed` ja `rgb(124 58 237)` ovat täsmälleen sama väri.

### Mikä OKLCH on?

OKLCH on Oklab-väriavaruuteen perustuva värin merkintätapa. Se kuvaa koetun vaaleuden, kroman ja sävyn, joten yhtä suuret vaaleusarvot näyttävät yhtä vaaleilta, mikä tekee paleteista ja liukuväreistä paljon ennustettavampia.

### Miten lisään läpinäkyvyyden heksakoodiin?

Lisää kaksi numeroa alfalle. `#7c3aed80` on noin 50 %:n peittävyys ja `#7c3aedcc` noin 80 %. CSS:ssä voit kirjoittaa myös `rgb(124 58 237 / 0.5)`.

### Mitä värikoodia pitäisi käyttää CSS:ssä?

Heksa käy yksittäisille väreille. Käytä OKLCH:ta paleteille, sävyille, tummalle tilalle ja liukuväreille, joissa sen havaintoon perustuva vaaleus välttää epätasaiset askeleet ja harmaat keskikohdat.