RGB ei riitä: HSL, CMYK ja OKLCH – värinotaatiot selitettynä

Edellisessä kirjoituksessa, Miten tietokone tekee värejä: RGB, HEX ja binääriluvut, totesimme, että väri on vain kolme lukua — punainen, vihreä, sininen, kukin välillä 0–255. Näytöt pärjäävät niillä erinomaisesti. Mutta heti kun ihminen alkaa työskennellä värin kanssa, RGB käy nopeasti hankalaksi.

RGB on kätevä, mutta ei intuitiivinen

“Hieman kirkkaampi punainen.” Miten se tehdään RGB:llä? Kaikkia kolmea kanavaa täytyy nostaa vähän yhtä aikaa. “Haluan vain laskea kylläisyyttä” — pelkästä RGB:stä ei tiedä, mitä muuttaa. “Tulosta tämä väri paperille samanlaisena” — RGB:llä se ei onnistu lainkaan.

Muut värimerkintätavat kehitettiin ratkaisemaan näitä ongelmia.

HSL — ihmisen tapa ajatella

HSL käsittelee väriä kolmena osana: sävy · kylläisyys · kirkkaus. hsl(14, 100%, 60%) on sama väri kuin #FF5733, mutta jokainen osa on selkeästi tunnistettavissa.

Jos RGB on tietokoneen kieli — HSL on designerin kieli. Sen avulla voi käsitellä väriä sen mukaan, mitä haluaa muuttaa.

Hue — sävy on 360°:n ympyrä

Sävy kiertää ympyrän kuten kellotaulu. Se alkaa 0°:sta ja päättyy 360°:een. 0° ja 360° ovat sama punainen.

Saturation — kylläisyys on värin voimakkuus

Saman sävyn kylläisyyttä vähentämällä väri lähestyy harmaan.

Lightness — kirkkaus mustasta valkoiseen

Kun L on 0%, tulos on aina musta; 100% on aina valkoinen. 50% on värin “luonnollinen” kirkkaus.

HSL:n todellinen voima — paletin rakentaminen

Kun pidät sävyn (Hue) vakiona ja muutat vain L:ää, saat luonnollisesti yhteensopivan värisarjan. RGB:llä pitäisi laskea 9 arvoa käsin, mutta HSL:llä riittää kun muuttaa L:ää portaittain 12%:sta 92%:iin.

Kumpikin paletti voidaan rakentaa yhdellä rivikoodilla.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... muutat vain L:ää 10 kerrallaan */
}

Tässä HSL loistaa erityisesti design-järjestelmien rakentamisessa.

CMYK — musteen kieli

Värin lisääminen paperille — ei näytölle — vaatii täysin erilaisen järjestelmän. CMYK kuvaa neljän painovärin suhteet, joita painotalot käyttävät.

Miksi mustasta käytetään “K” eikä “B”? Koska B sekoittuisi siniseen (Blue). Lisäksi termi tulee painotekniikan käsitteestä “key plate” — viitelevy, johon muut värit kohdistetaan.

Valo kirkastuu lisäämällä, muste tummuu lisäämällä

Suurin ero RGB:n ja CMYK:n välillä on sekoitustapa.

Punainen muste näyttää punaiselta, koska se imee muut valot ja heijastaa vain punaisen. Muste poistaa valoa. Siksi mustetta sekoitettaessa väri tummuu. Teoriassa CMY yhdistettynä tuottaa mustan, mutta käytännössä tuloksena on samea ruskea. Tämän vuoksi oikea musta (K) on erillinen väri.

Missä CMYK:ta käytetään?

Jos teet näyttösuunnittelua, et juuri koskaan tarvitse CMYK:ta. Se tulee kuvaan vain paperin tulostamisessa.

• Tiedoston toimittaminen painotaloon — käyntikortit, julisteet, kirjat, pakkaukset. Painotalo muuntaa RGB-tiedoston CMYK:ksi.
• Photoshop / Illustrator -tulostustyö — aseta väritila alusta alkaen CMYK:ksi.
• Brändiohjeisto — siinä listataan sekä näytölle tarkoitettu HEX että tulostettava CMYK. Sama brändiväri on saatava näyttämään samalta molemmissa medioissa.

Miksi näytön ja tulosteen värit eroavat — Gamut

Näytön väriavaruus (RGB gamut) ja musteen väriavaruus (CMYK gamut) ovat erilaiset. Kirkas neonpinkki näytöllä ei toistu tulostettuna — se on väri, jota musteet eivät pysty tuottamaan.

Siksi painosuunnittelijat valitsevat vain CMYK-väriavaruuden sisällä olevia värejä ennen työn aloittamista. RGB:llä suunniteltu työ näyttää usein lattaiselta tulostettuna.

Näin CMYK-arvot kirjoitetaan

Kirjoita, kuinka monta prosenttia kutakin mustetta käytetään. 0% tarkoittaa ei lainkaan, 100% tarkoittaa täysi.

Pelkkä K 100% tuottaa harmahtavan, sameannäköisen mustan. Siksi painotalot lisäävät CMY-värejä saadakseen syvemmän mustan.

OKLCH — ihmisen koordinaatit

2020-luvulla vakiintunut värimalli. Avainsana on yksi — “luonnollinen ihmissilmälle.”

Kolme koordinaattia muistuttavat HSL:n nimiä:

• L — Lightness (kirkkaus, 0–1)
• C — Chroma (kylläisyys, 0–noin 0,4)
• H — Hue (sävy, 0–360°)

HSL:ssä on kuitenkin piilevä ongelma. Vaikka L = 50% on sama kaikille väreille, ihminen kokee eri värien kirkkaudet hyvin eri tavoin. Verrataan suoraan.

Yhdellä lauseella: RGB ja HSL ovat koneen koordinaatit. OKLCH on ihmisen koordinaatit.

L · C · H, jokaisen rooli

Katsotaan, mitä tapahtuu kun muutat vain yhtä koordinaattia kerrallaan.

Missä OKLCH:ta käytetään?

• Tasaisen kirkkaan paletti — kun haluat 8 kategoriavärille täsmälleen saman kirkkauden
• Tumma/vaalea teema automaattisesti — käännä vain L-arvot ja saat luonnollisen dark-teeman
• Saavutettavuus — tekstin ja taustan kirkkausero on ennustettavissa tarkasti
• Liukuvärit — luonnollinen siirtymä ilman harmaata kaistaa keskellä

OKLCH on virallisesti hyväksytty CSS Color Level 4:stä lähtien ja toimii suoraan uusimmissa selaimissa.

.btn { background: oklch(67% 0.18 30); }       /* oranssi */
.btn:hover { background: oklch(60% 0.18 30); } /* vain L 7 alas → tummuu täsmälleen sen verran */

Mitä käytetään ja milloin?

Useimpiin digitaalisiin töihin RGB/HEX riittää. HSL kannattaa pitää mielessä paletteja rakentaessa, ja OKLCH on erittäin hyödyllinen tumma/vaalea-teeman suunnittelussa.

Värien käsittely fns:llä

Kun tiedät, että värit ovat lukuja, seuraava askel on pitää suosikkivärit sormenspäissä. fns kokoaa värin nappaamisen, tallentamisen ja käyttämisen yhden näppäimen taakse.

Eyedropper — poimi väri mistä tahansa näytöltä — ⌘+Shift+K

Eyedropper nappaaa tarkalleen minkä tahansa pikselin värin näytöltä. Se on kuin Figman/Photoshopin värinvalitsin tuotuna koko järjestelmään.

Paina ⌘+Shift+K missä tahansa, ja fns:n Eyedropper avautuu. Design-suunnitelman pikseli, valokuvan tietty alue, toisen sovelluksen taustväri — vie hiiri haluamasi kohdan päälle ja napsauta, niin väri tallentuu.

• Väri tallentuu leikepöydälle automaattisesti jokaisella napsautuksella. Erillistä “kopioi”-toimintoa ei tarvita.
• Eyedropper-widgetistä voi valita, missä muodossa väri menee leikepöydälle: RGB / HEX / HSL / CMYK / OKLCH.
• Nappatun värin visuaalinen esikatselu ja lähimmät järjestelmävärit näytetään samalla.

Eyedropper → automaattinen tallennus leikepöydälle → hae leikepöytävalikosta — työnkulku ei katkea. Mac:n Digital Color Meter -sovelluksen tapaan ei tarvitse avata erillistä ikkunaa eikä painaa kopiointipikanäppäintä joka kerta.

Leikepöytä tunnistaa värit automaattisesti

fns:n leikepöytähistoria tunnistaa automaattisesti, onko kopioitu teksti värikoodi. Se toimii kaikissa muodoissa.

Kun haet kopioitua väriä historiasta, pelkästä tekstistä on vaikea muistaa, mikä väri oli kyseessä. fns näyttää jokaisen kohteen vieressä pienen väripalikan, joten väri näkyy yhdellä silmäyksellä.

Vain värit kerralla

Yhdellä näppäimellä voit suodattaa leikepöytähistoriasta pelkät värikoodit. Kun design-työn lomassa haluaa katsoa viimeksi käytettyjä värejä, ei tarvitse selata tekstin, URL-osoitteiden ja koodin läpi.

• Kirjoita color: suodatinavainsana samaan valikoimaan → näet vain värikohteet
• Etsi värin nimellä — “blue”, “red” → hakutulos rajautuu kyseiseen väriperheeseen
• Samankaltaiset värit ryhmitellään visuaalisesti

Yksi väri eri muodoissa

Voit muuntaa saman värin toiseen merkintätapaan hakiessasi sitä. Kun olet kopioinut Figmassa #FF5733 ja haluat liittää sen CSS:ään muodossa rgb(...), valitse kohde fns:n leikepöytävalikosta ja paina pikanäppäintä — muunnos tapahtuu automaattisesti.

Figman (HSB) ja CSS:n (HSL/HEX/OKLCH) välillä siirtyessäsi ei tarvitse avata muunninta joka kerta.

Tekstinlaajennus ja kokoaminen

Rekisteröi usein käytetyt brändivärit tekstilyhenteinä.

Sama lyhenne toimii kaikkialla — CSS-kentässä, Figman värisyötteessä, Slack-viestissä tai koodieditorissa. Brändioppaan värien etsiminen ja kopioiminen joka kerta jää historiaan.

Kokeile fns:ää ja säästä aika, joka kuluu värikoodin muuntamiseen eri muotoon joka kerta.

Haluatko tietää, mistä nämä luvut alun perin tulevat — RGB:n kolmen kanavan, binäärilukujen ja HEX-notaation perusteet? Aloita kirjoituksesta Miten tietokone tekee värejä: RGB, HEX ja binääriluvut.