Värioppaat
Lyhyitä ja käytännönläheisiä oppaita näyttöjen väreistä: muodot, kontrasti, paletit, tumma tila ja CSS. Jokainen luku on laskettu, ja jokaisen esimerkin voi kopioida.
- OKLCH selitettynä: värimuoto, joka vihdoin vastaa silmääsiOKLCH kuvaa värin sen mukaan, miten vaalealta se näyttää, kuinka värikäs se on ja mikä sen sävy on. Toisin kuin HSL:ssä, sama vaaleusarvo näyttää todella yhtä vaalealta jokaisella sävyllä, joten paletit, hover-tilat ja saavutettava kontrasti ovat ennustettavia.28. syyskuuta 2026Lukuaika 2 min
- APCA vai WCAG 2: kumpaan kontrastin tarkistukseen luottaaWCAG 2:n kontrastisuhteet ovat sitä, mitä laki vaatii. APCA on uudempi malli, joka ennustaa luettavuutta paljon paremmin, erityisesti tummissa teemoissa ja kylläisillä väreillä. Kun tarkistat molemmat, saat tekstiä, joka täyttää vaatimukset ja on oikeasti helppo lukea.28. syyskuuta 2026Lukuaika 2 min
- Värialue selitettynä: sRGB, Display P3 ja alueen ulkopuoliset väritVärialue (gamut) on joukko värejä, jotka näyttö tai väriavaruus pystyy esittämään. Verkko rakennettiin sRGB:n varaan, mutta useimmat puhelimet ja monet kannettavat näyttävät nykyään Display P3:a, jossa punaiset, vihreät ja oranssit ovat selvästi voimakkaampia.28. syyskuuta 2026Lukuaika 1 min
- Värimuodot selitettynä: HEX, RGB, HSL, OKLCH ja muutSaman värin voi kirjoittaa kymmenellä eri tavalla. Tässä kerrotaan, mitä kukin muoto tarkoittaa, milloin sitä kannattaa käyttää ja miltä sama väri näyttää jokaisessa niistä.28. syyskuuta 2026Lukuaika 1 min
- HEX-värikoodit selitettynä: näin #RRGGBB toimiiHEX-värikoodi, kuten #1e90ff, on kolme heksadesimaalinumeroparia: punaisen, vihreän ja sinisen valon määrä, kukin väliltä 00 (ei lainkaan) – ff (täysi, 255). Neljäs pari määrää peittävyyden: 80 tarkoittaa noin 50 % ja ff täysin peittävää.28. syyskuuta 2026Lukuaika 5 min
- Verkkosivujen väripaletti: näin valitset värit sivustolle tai sovellukseenAloita yhdestä brändiväristä, luo siitä asteikko 50–950, lisää hieman sävytetyt harmaat ja neljä tilaväriä ja testaa sitten jokaisen tekstiparin kontrasti ja erottuvuus värisokeille. Valitse vivahteet OKLCH-vaaleuden mukaan, älä silmämäärällä: valkoisella taustalla teksti läpäisee WCAG AA:n, kun vaaleus laskee noin arvoon 0,55, oli sävy mikä tahansa.28. syyskuuta 2026Lukuaika 5 min
- Tumman tilan värit: näin valitset taustan, tekstin ja korostusväritKäytä puhtaan mustan sijaan tummanharmaata taustaa, kuten #121212, puhtaan valkoisen sijaan melkein valkoista tekstiä, kuten #e5e5e5, ja brändiväreistäsi vaaleampia ja vähemmän kylläisiä versioita. Tarkista teksti WCAG 2:n lisäksi APCA:lla, koska WCAG 2 yliarvioi kontrastin tummilla taustoilla.28. syyskuuta 2026Lukuaika 5 min
- Väriharmoniat: vastavärit, analogiset värit, triadi ja muutVäriharmonia valitsee sävyt kiinteillä kulmilla väriympyrältä: komplementaarisessa 180° päässä toisistaan, analogisessa 30° päässä ja triadissa 120° päässä. Kierrä sävyä OKLCH:ssa HSL:n sijaan, niin värit pysyvät yhtä vaaleina eikä mikään sävy hyppää esiin vahingossa.28. syyskuuta 2026Lukuaika 4 min
- CSS color-mix() ja suhteelliset värit: vaaleat vivahteet, hover ja läpinäkyvyyscolor-mix() sekoittaa kaksi väriä valitsemassasi väriavaruudessa, ja suhteellisella värisyntaksilla voit muuttaa olemassa olevan värin yhtä kanavaa, esimerkiksi oklch(from var(--brand) calc(l - 0.1) c h). Molemmat toimivat selaimessa, sopivat yhteen CSS-muuttujien kanssa ja korvaavat useimmat Sassin värifunktiot. Sekoita oklabissa vaaleat vivahteet ja hover-tilat, srgb:ssä läpinäkyvyys.28. syyskuuta 2026Lukuaika 5 min
- Värisokeille sopiva väripaletti: näin tarkistat ja korjaat värisiVärisokeille sopivassa väripaletissa jokainen väripari erottuu myös protanopiassa, deuteranopiassa, tritanopiassa ja harmaasävyissä. Varmin ratkaisu ei ole jokin erityinen sävy vaan vaaleusero: värit, joiden OKLCH-vaaleus eroaa noin 0,2, pysyivät erillään jokaisessa ajamassamme simulaatiossa. Täydennä värejä kuvakkeilla tai tekstiselitteillä, koska pelkkä väri jättää aina jonkun ulkopuolelle.28. syyskuuta 2026Lukuaika 5 min
- Tailwind CSS -värit: v4:n OKLCH-paletti, omat värit ja vivahteetTailwind CSS v4:ssä on 26 väriasteikkoa, joissa kussakin on 11 vivahdetta 50:stä 950:een, yhteensä 286 väriä. Ne on määritelty OKLCH:ssa CSS-muuttujina, kuten --color-blue-500. Omat värit lisätään näin: @theme { --color-brand-500: oklch(...) }. Sama askelnumero ei tarkoita samaa vaaleutta: blue-600 on vaalein sininen, joka saavuttaa 4,5:1 valkoista vasten, kun taas yellow tarvitsee askeleen 700.28. syyskuuta 2026Lukuaika 5 min