Heksakoodit, RGB, HSL ja OKLCH selitettynä

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

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

/* 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);

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.

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.

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.

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

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

Kaikkien näiden arvojen testaamiseen oklch.com näyttää värin kaikilla merkintätavoilla ja varoittaa, kun se jää näytön alueen ulkopuolelle, ja MDN:n väriviite kattaa jokaisen syntaksin. Jos valitset värejä etkä kirjoita niitä, miten valitset brändivärit on seuraava askel, ja värikontrasti näyttää, miten tarkistat, että teksti pysyy luettavana.