Värimuunnin

Mitä ovat värimuodot HEX, RGB ja HSL?

Digitaaliset värit esitetään erilaisilla värikoodeilla, joista yleisimmät ovat HEX, RGB ja HSL. Jokainen muoto kuvaa saman värin eri tavalla – värimuunnin auttaa siirtymään näiden muotojen välillä nopeasti ja virheettömästi.

HEX (heksadesimaali) on web-kehityksessä yleisin tapa ilmaista värejä. Koodi alkaa risuaidalla (#) ja sisältää kuusi merkkiä (0–9, A–F), joista kaksi ensimmäistä kuvaavat punaista, seuraavat vihreää ja viimeiset sinistä kanavaa. Esimerkiksi #FF5733 tarkoittaa voimakasta oranssinpunaista.

RGB (Red, Green, Blue) ilmaisee värin kolmen kanavan voimakkuutena asteikolla 0–255. CSS:ssä se kirjoitetaan muodossa rgb(255, 87, 51). RGB on intuitiivinen, koska se perustuu suoraan siihen, miten näytöt tuottavat värit – yhdistämällä punaista, vihreää ja sinistä valoa eri voimakkuuksilla.

HSL (Hue, Saturation, Lightness) kuvaa väriä ihmisen havainnon näkökulmasta. Sävy (H) on kulma väriympyrällä 0–360°, kylläisyys (S) kertoo värin puhtauden prosentteina ja valoisuus (L) tummuus–vaaleus-akselin. HSL on erityisen hyödyllinen suunnittelijoille, koska sävyn, kylläisyyden ja valoisuuden muuttaminen erikseen on helppoa ja intuitiivista.

Värimuunnosten kaavat

Värimuunnoksissa käytetään matemaattisia kaavoja, jotka muuntavat arvot muodosta toiseen. Seuraavassa tärkeimmät muunnokset:

HEX → RGB

Jokainen HEX-koodin kahden merkin pari muunnetaan desimaaliluvuksi:

• R = parseInt(hex[1..2], 16)
• G = parseInt(hex[3..4], 16)
• B = parseInt(hex[5..6], 16)

Esimerkiksi #4287F5: R = 66, G = 135, B = 245.

RGB → HEX

Jokainen RGB-kanavan arvo (0–255) muunnetaan kahden merkin heksadesimaaliluvuksi ja yhdistetään:

# + R.toString(16) + G.toString(16) + B.toString(16)

RGB → HSL

1. Normalisoi R, G, B jakamalla 255:llä.
2. Laske max ja min arvoista.
3. Valoisuus L = (max + min) / 2.
4. Jos max = min, sävy H = 0 ja kylläisyys S = 0 (harmaa).
5. Muuten kylläisyys S = d / (2 − max − min) tai d / (max + min) riippuen valoisuudesta.
6. Sävy H lasketaan sen mukaan, mikä kanava on suurin.

HSL → RGB

1. Jos kylläisyys S = 0, kaikki kanavat ovat yhtä suuret (harmaa).
2. Muuten lasketaan apumuuttujat p ja q valoisuuden ja kylläisyyden perusteella.
3. Jokainen kanava lasketaan hue-to-rgb-funktiolla eri vaihesiirrolla.

Esimerkkilaskelma

Muunnetaan HEX-koodi #4287F5 kaikkiin muotoihin:

Yleisiä värikoodeja

Milloin käyttää mitäkin värimuotoa?

HEX on paras valinta, kun kirjoitat CSS:ää tai HTML:ää – se on lyhyt, laajasti tuettu ja helppo kopioida. HEX on myös yleisin muoto brändiohjeiden värimäärityksissä.

RGB on luonnollinen valinta ohjelmointikontekstissa, esimerkiksi Canvas API:ssa, WebGL:ssä tai kuvanmuokkauksessa. Se sopii myös tilanteisiin, joissa yksittäisiä kanava-arvoja pitää muuttaa dynaamisesti.

HSL on suunnittelijoille intuitiivisin, koska värin sävyä, kylläisyyttä ja valoisuutta voi säätää itsenäisesti. CSS:n modernit ominaisuudet, kuten color-mix() ja oklch(), perustuvat samankaltaiseen ajatteluun. HSL on erinomainen väripalettien luomiseen: pidä sävy vakiona ja varioi kylläisyyttä ja valoisuutta saadaksesi yhtenäisiä sävyasteikkoja.

Värit web-kehityksessä ja graafisessa suunnittelussa

Värien oikea käyttö vaikuttaa merkittävästi verkkosivuston käyttökokemukseen ja saavutettavuuteen. WCAG 2.1 -ohjeistuksen mukaan tekstin ja taustan kontrastisuhteen tulee olla vähintään 4,5:1 normaalille tekstille ja 3:1 suurelle tekstille. Värimuunnin auttaa tarkistamaan, miltä väri näyttää eri muodoissa, ja komplementtivärin avulla voi arvioida kontrastia.

Graafisessa suunnittelussa värikoodien muuntaminen on arkipäivää. Painotuotteissa käytetään usein CMYK-värijärjestelmää, mutta digitaalisessa mediassa RGB ja HEX ovat standardeja. Suunnittelijan työkalu, kuten Figma tai Adobe XD, näyttää värit yleensä HEX- ja RGB-muodoissa, kun taas CSS-koodi suosii yhä useammin HSL-muotoa sen luettavuuden vuoksi.

Muita hyödyllisiä työkaluja

• Binaarimuunnin — Muunna lukuja binääri- ja desimaalijärjestelmien välillä.
• QR-generaattori — Luo QR-koodeja teksteistä ja linkeistä.
• Salasanageneraattori — Luo turvallisia satunnaisia salasanoja.
• Sanalaskuri — Laske tekstin sanat, merkit ja lauseet.
• Roomalaisnumeromuunnin — Muunna lukuja roomalaisiksi numeroiksi.

Lähteet

• MDN Web Docs – CSS color values
• W3C – CSS Color Module Level 4
• Wikipedia – HSL and HSV
• WCAG 2.1 – Contrast requirements

Usein kysytyt kysymykset