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

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

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, joka myös selittää suunnitteluohjelmien HSB:n ja CSS:n HSL:n eron.

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 luettelee kaikki muodot.

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

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 perheen, jonka osat kuuluvat selvästi yhteen. Tässä yksi violetti seitsemässä portaassa ja kunkin vastaava hex-koodi.

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

: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;
}

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.

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.

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. Toiseksi liukuvärit ja tuotetut paletit, jotka kiertävät sävyä samalla vaaleudella, kirkastuvat ja himmenevät kulkiessaan keltaisen ja sinisen kautta.

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