# HSL-väri: helppo tapa kirjoittaa värejä CSS:ssä

[Canonical HTML page](https://gradiently.design/fi/guide/hsl-colors)

Hex kertoo selaimelle, mitä piirtää. HSL kertoo sinulle värin sävyn, voimakkuuden ja vaaleuden. Siksi sitä on helppo muokata käsin.

## The short version

- HSL-väri kuvaa väriä sävyn, kylläisyyden ja vaaleuden avulla punaisen, vihreän ja sinisen määrien sijaan.
- Sävy on kulma väriympyrässä väliltä 0 ja 360 astetta: 0 on punainen, 120 vihreä ja 240 sininen.
- Kylläisyys vaihtelee 0%:sta eli harmaasta 100%:iin eli täyteen väriin. Vaaleus kulkee 0%:n mustasta 50%:n puhtaan sävyn kautta 100%:n valkoiseen.
- Nykyaikainen CSS kirjoittaa värin muodossa hsl(262 83% 58%). Vinoviivan jälkeen voi lisätä alfan, ja kaikki käytössä olevat selaimet tukevat muotoa.
- HSL-vaaleus ei kuvaa värin koettua kirkkautta, joten kahdella yhtä vaalealla värillä voi olla hyvin erilainen kontrasti.

**HSL-väri** kirjoitetaan kolmella luvulla: sävy, kylläisyys ja vaaleus. CSS:ssä `hsl(262 83% 58%)` tarkoittaa 262 asteen sävyä eli violettia, 83%:n kylläisyyttä eli voimakasta väriä ja 58%:n vaaleutta eli hieman keskitason ylittävää vaaleutta. Se on sama violetti kuin `#7c3bed`, mutta luvut voi tulkita. Haluatko vaaleamman? Nosta viimeistä lukua. Pehmeämmän? Laske keskimmäistä. Juuri yksi ominaisuus ja merkitys lukua kohden tekee HSL:stä helpon tavan kirjoittaa värejä käsin.

## Mitä sävy, kylläisyys ja vaaleus tarkoittavat

**Sävy** on asteina annettu sijainti [väriympyrässä](https://gradiently.design/fi/guide/color-wheel). Punainen on kohdassa 0 ja uudelleen kohdassa 360, keltainen 60, vihreä 120, syaani 180, sininen 240 ja magenta 300. Sävyn muuttaminen kiertää väriä ympyrässä ja säilyttää sen voimakkuuden.

Sävy 0:sta 360 asteeseen: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)`

Jokainen sävy 100%:n kylläisyydellä ja 50%:n vaaleudella. Vasemmalta oikealle: 0, 60, 120, 180, 240, 300 ja takaisin 360:een.

**Kylläisyys** kertoo värin määrän. 0%:ssa jokainen sävy on sama harmaa, 100%:ssa niin voimakas kuin näyttö sallii. **Vaaleus** kulkee 0%:n mustasta 100%:n valkoiseen, ja puhdas sävy on kohdassa 50%. Mallia käsitellään laajemmin oppaassa [sävy, kylläisyys ja kirkkaus](https://gradiently.design/fi/guide/hue-saturation-brightness), joka myös selittää suunnitteluohjelmien HSB:n ja CSS:n HSL:n eron.

| Arvo | Vaihteluväli | Mitä muuttaminen tekee |
| --- | --- | --- |
| Sävy | 0:sta 360:een (astetta) | Kiertää väriä: violetista siniseen ja sinivihreään |
| Kylläisyys | 0%:sta 100%:iin | Harmaasta täyteen väriin |
| Vaaleus | 0%:sta 100%:iin | Mustasta 50%:n puhtaan sävyn kautta valkoiseen |
| Alfa (valinnainen) | 0:sta 1:een tai 0%:sta 100%:iin | Näkymättömästä peittävään |

Neljä lukua, kullakin yksi tehtävä. Juuri tämä erottelu tekee mallista kätevän.

## HSL:n syntaksi CSS:ssä

Kirjoitustapoja on kaksi. Nykyaikainen muoto erottaa arvot välilyönneillä ja sijoittaa alfan vinoviivan jälkeen. Vanhempi käyttää pilkkuja ja erillistä `hsla()`-funktiota. Selaimet hyväksyvät molemmat, ja nykyään myös `hsl()` hyväksyy alfan, joten `hsla()` ei ole enää tarpeen. [MDN:n hsl()-viite](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) luettelee kaikki muodot.

```css
.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}
```

Kaikki neljä ovat sama violetti. Toinen ja kolmas lisäävät 80%:n peittävyyden.

## Rakenna väriasteikko muuttamalla vaaleutta

Tässä HSL näyttää hyötynsä. Pidä sävy ja kylläisyys samoina ja muuta vaaleutta portaittain. Saat [vaaleiden ja tummien sävyjen](https://gradiently.design/fi/guide/tints-tones-shades) perheen, jonka osat kuuluvat selvästi yhteen. Tässä yksi violetti seitsemässä portaassa ja kunkin vastaava hex-koodi.

- L 95% #efe8fd: #efe8fd
- L 85% #d0b9f8: #d0b9f8
- L 70% #a273f2: #a273f2
- L 58% #7c3bed: #7c3bed
- L 45% #5914d2: #5914d2
- L 30% #3c0d8c: #3c0d8c
- L 15% #1e0746: #1e0746

hsl(262 83% L) seitsemällä vaaleusarvolla. Vaaleat portaat taustoihin, keskimmäinen painikkeisiin ja tummat tekstiin.

Yhdistä tämä CSS:n mukautettuihin ominaisuuksiin, niin koko teema perustuu kahteen lukuun. Tallenna sävy ja kylläisyys kerran ja valitse vaaleus kullekin käyttötarkoitukselle. Muuta sävymuuttujaa, niin koko käyttöliittymä muuttuu violetista sinivihreäksi. Se on [CSS-teemamuuttujien](https://gradiently.design/fi/guide/css-custom-properties-theming) perusajatus.

```css
:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}
```

Jokainen brändiväri johdetaan samasta sävystä, joten asteikko ei voi ajautua väriperheen ulkopuolelle.

### Suhteelliset värit

Uudemmat selaimet tukevat myös suhteellista värisyntaksia, joka lukee minkä tahansa värin HSL-osat ja antaa muokata niitä. `hsl(from var(--brand) h s calc(l + 15%))` tuottaa brändiväristä vaaleamman version, vaikka alkuperäinen väri olisi määritelty hexinä. Tarkista ajantasainen tuki caniuse-palvelusta ennen käyttöön luottamista ja säilytä yksinkertainen varamääritys. Kun haluat sekoittaa kaksi väriä yhden säätämisen sijaan, käytä [CSS:n color-mix()-funktiota](https://gradiently.design/fi/guide/css-color-mix).

## Missä HSL johtaa harhaan

HSL on RGB:n uudelleenjärjestely, ei ihmisen näköaistin malli. Sen vaaleus on kirkkaimman ja himmeimmän kanavan yksinkertainen keskiarvo. Se sivuuttaa sen, että silmämme näkevät keltaisen ja vihreän paljon sinistä kirkkaampina. Siksi kahden saman HSL-vaaleuden värin koettu kirkkaus voi olla aivan erilainen.

- hsl(60 100% 50%): #ffff00
- hsl(120 100% 50%): #00ff00
- hsl(0 100% 50%): #ff0000
- hsl(240 100% 50%): #0000ff

Kaikkien neljän vaaleus on 50%. Valkoista vasten keltaisen kontrastisuhde on noin 1,07:1 ja sinisen noin 8,6:1.

Tällä on merkitystä kahdessa kohdassa. Ensiksi HSL-vaaleutta portaittain muuttamalla rakennettu asteikko on epätasainen eri sävyjen välillä: 50%:n keltainen on aivan liian vaalea tekstiin, kun taas 50%:n sininen läpäisee testin helposti. Testaa aina todelliset yhdistelmät [kontrastitarkistimella](https://gradiently.design/fi/guide/color-contrast-accessibility). Toiseksi liukuvärit ja tuotetut paletit, jotka kiertävät sävyä samalla vaaleudella, kirkastuvat ja himmenevät kulkiessaan keltaisen ja sinisen kautta.

### HSL sopii näihin

- Värien lukeminen ja muokkaaminen käsin
- Yhden sävyn vaaleat ja tummat versiot
- Nopea teeman vaihto muuttujilla
- Värin kylläisyyden laskeminen hillittyä tilaa varten

### Valitse näihin OKLCH

- Toisiaan vastaavat asteikot eri sävyille
- Ennakoitava kontrasti vaaleusarvon perusteella
- Liukuvärit, joiden kirkkaus pysyy tasaisena
- Automaattisesti tuotetut suunnittelujärjestelmien paletit

[OKLCH](https://gradiently.design/fi/guide/oklch-explained) säilyttää saman helposti ymmärrettävän ajatuksen: vaaleus, värikkyys ja sävy. Se kuitenkin mittaa vaaleutta näköaistin tavoin. Uuteen suunnittelujärjestelmään se on parempi oletusvalinta. Olemassa olevan CSS:n muokkaamiseen tai nopeaan, helposti luettavaan säätöön HSL sopii edelleen hyvin.

## HSL:n muuntaminen hexiksi ja takaisin

Laskeminen on harvoin tarpeen, sillä suunnittelutyökalut ja selainten kehittäjätyökalut muuntavat puolestasi. Napsauta Chromen tai Firefoxin kehittäjätyökalujen värinäytettä ja vaihda muotojen välillä. Sisäisesti HSL muunnetaan ensin RGB:ksi. RGB:n muunnos hexiksi on yksinkertaista parilaskentaa, joka selitetään oppaassa [hex RGB-muotoon](https://gradiently.design/fi/guide/hex-to-rgb). Pienet pyöristyserot ovat tavallisia: `hsl(262 83% 58%)` vastaa koodia `#7c3bed`, joka on yhden askelen päässä mahdollisesta lähtöväristä `#7c3aed`. Kokonaiset prosentit eivät nimittäin osu jokaiseen 16,7 miljoonasta hex-arvosta.

Jos suunnittelet Gradientlyssä, näihin lukuihin tarvitsee harvoin koskea: Mark sisältää oman palettinsa, ja Prolla brändipaketti tallentaa värisi, jotta Designer käyttää niitä puolestasi.

## FAQ

### Mitä HSL tarkoittaa?

Hue, saturation ja lightness eli sävy, kylläisyys ja vaaleus. Sävy on kulma väriympyrässä, kylläisyys kertoo värin voimakkuuden ja vaaleus sen, kuinka lähellä väri on mustaa tai valkoista.

### Miten kirjoitan HSL-värin CSS:ssä?

Käytä muotoa hsl(sävy kylläisyys% vaaleus%), esimerkiksi hsl(262 83% 58%). Lisää läpinäkyvyys vinoviivan jälkeen: `hsl(262 83% 58% / 0.5)`.

### Tarvitaanko hsla()-funktiota enää?

Ei. hsl() hyväksyy alfa-arvon kaikissa nykyisissä selaimissa, joten hsla() säilytetään vain vanhaa koodia varten.

### Mikä ero on HSL:llä ja RGB:llä?

RGB kertoo sekoitettavan punaisen, vihreän ja sinisen valon määrän. HSL kertoo sävyn, voimakkuuden ja vaaleuden. Ne kuvaavat samoja värejä, mutta HSL:ää on helpompi säätää käsin.

### Miksi kaksi samaa HSL-vaaleutta käyttävää väriä näyttää erilaiselta?

HSL-vaaleus sivuuttaa silmien erilaisen herkkyyden eri sävyille, joten keltainen näyttää samalla arvolla paljon sinistä kirkkaammalta. OKLCH korjaa tämän havaittuun vaaleuteen perustuvalla mittauksella.