Väripyörä (HSV/RGB) – perus- ja sivuvärit, digitaalinen vs. tulostus

Tutustu HSV/RGB-väripyörään: perus- ja sivuvärit, digitaalinen vs. tulostus, RGB ja CMYK-erot sekä käytännön vinkit värisävyihin ja kylläisyyteen.

Tekijä: Leandro Alegsa

15-03-2026 19:09

Väripyörä on pyöreä kaavio, jossa näkyvät pää- ja sivuvärit.

Nykyään yleisimmin käytetty värikehä on nimeltään HSV-värikehä, joka tarkoittaa värisävyä, kylläisyyttä ja arvoa. HSV-väripyörän digitaalinen muoto on nimeltään RGB-väripyörä (kuvassa alla). HSV/RGB-väripyörä kuvataan jäljempänä. Siitä on kaksi versiota: toinen, jossa punaista, vihreää ja sinistä pidetään pääväreinä (sähköinen tai tietokoneen väripyörä), ja toinen, jossa magentaa, keltaista ja syaania pidetään pääväreinä (tulostimen väripyörä).

HSV:n eli värisävyn, kylläisyyden ja arvon merkitys

Hue (värisävy) kertoo, mikä perusväri on (esim. punainen, sininen tai vihreä). Sen arvo määritellään usein asteina 0–360° väripyörällä.

Saturation (kylläisyys) määrittää värin puhtauden: 0 = harmaa (ei väriä), 100 % = täysi väri ilman harmaata lisänä.

Value / Brightness (arvo/valoisuus) kertoo värin kirkkauden: 0 = musta, 100 % = mahdollisimman kirkas (riippuen väritilasta).

Additiivinen vs. subtraktiivinen väri

On tärkeää erottaa kaksi perusperiaatetta väreille:

Additiivinen väri (RGB): näytöt ja valonlähteet käyttävät punaista, vihreää ja sinistä. Värit syntyvät lisäämällä valon säteitä: punainen + vihreä = keltainen, punainen + sininen = magenta, vihreä + sininen = syaani. Lisää valoa -> vaaleampaa.
Subtraktiivinen väri (CMY(K)): painotuotteissa ja maaleissa käytetään syaania, magentaa ja keltaista (ja usein mustaa, K). Väri syntyy poistamalla (imeyttämällä) valoa: esimerkiksi keltainen ja magenta yhdessä tuottavat punaista. Lisää mustaa tekee tummemmaksi.

RGB vs. CMYK – digitaalinen vs. tulostus

RGB on oletus verkkosisällölle ja näyttölaitteille. CMYK on yleinen painatuksessa. Näiden välillä on eroja:

RGB: laajempi väriala tietyissä kirkkauksissa (voi näyttää erittäin kirkkaita, neon-tyyppisiä sävyjä, joita ei saada painettua).
CMYK: rajaavamman gamutin vuoksi jotkin näytöllä näkyvät värit näyttävät painossa haaleammilta. Tästä syystä käytetään väriprofiileja (ICC) ja soft proof -toimintoja suunnittelussa.

Perus- ja sivuvärit

RGB-päävärit: puna (R), vihreä (G), sininen (B). Niistä muodostuvat sivuvärit: keltainen (R+G), magenta (R+B), syaani (G+B).
CMY-päävärit: syaani, magenta, keltainen. Niistä muodostuvat sivuvärit painotekniikassa vastaavasti.

Esimerkkejä heksakoodeista (web)

Red (punainen): #FF0000
Green (vihreä): #00FF00
Blue (sininen): #0000FF
Cyan (syaani): #00FFFF
Magenta: #FF00FF
Yellow (keltainen): #FFFF00
Black (musta): #000000
White (valkoinen): #FFFFFF

Rajoitukset ja käytännön huomioita

Monet kirkkaat näytöllä näkyvät sävyt eivät ole tulostettavissa. Käytä CMYK-esikatselua ja väriprofiileja, kun suunnittelet painotuotteita.
HSV on intuitiivinen työkalu valitsemaan sävy ja säätämään kylläisyyttä/kirkkautta, mutta joissain sovelluksissa käytetään myös HSL-mallia (hue/saturation/lightness), joka jakaa valoisuuden eri tavalla.
Kontrasti on tärkeä saavutettavuuden kannalta: varmista tekstin ja taustan välinen kontrasti (esim. WCAG-ohjeet) sopivaksi luettavuuden takaamiseksi.
Värien sekoittaminen digitaalisesti (valon avulla) ei käyttäydy samalla tavalla kuin maaleilla tai musteilla. Todellisissa materiaaleissa pigmentit ja pintarakenteet vaikuttavat lopputulokseen.

Käytännön vinkit suunnittelijalle

Aloita valitsemalla pääsävy (hue) ja luo siitä sävyvariaatioita muuttamalla kylläisyyttä ja arvoa.
Tarkista värit eri laitteilla ja tulostusprofiileilla. Soft proof -toiminto auttaa ennakoimaan muutoksia CMYK-konversiossa.
Käytä harmaasävyjä ja mustaa korostamaan kontrastia sen sijaan, että yrittäisit korostaa vain kirkkailla väreillä.
Kun haluat kohteen erottuvan, lisää kylläisyyttä tai arvoa — kun taas hienovaraisempi ilme syntyy alhaisemmalla kylläisyydellä.

Yhteenvetona: väripyörä (HSV/RGB) on kätevä visuaalinen työkalu värien ymmärtämiseen ja valitsemiseen. Digitaalinen (RGB) ja tulostus (CMYK) -maailmat toimivat eri periaatteilla, joten aina kun suunnittelet työtä, joka siirtyy näytöltä painoon, huomioi konversiot, profiilit ja gamut-rajat.

HSV-väripyörän avulla käyttäjä voi nopeasti valita useita värejä.

Perusvärit

(* Ensisijainen tarkoittaa ensimmäistä) Elektronisissa laitteissa, kuten televisioissa ja tietokoneissa, käytetyssä elektronisessa värikehässä punaista, vihreää ja sinistä pidetään ensisijaisina väreinä ja magentaa, keltaista ja syaania toissijaisina väreinä.

Perusvärit näkyvät aina väripyörässä. Valossa on kolme pääväriä. Näitä kutsutaan kolmeksi additiiviseksi väriksi. Ne ovat punainen (syntyy pigmentissä sekoittamalla keltainen ja magenta), vihreä (syntyy pigmentissä sekoittamalla syaani ja keltainen) ja sininen (syntyy pigmentissä sekoittamalla magenta ja syaani). Nämä kolme valon pääväriä ovat tulostimen väripyörän toissijaisia värejä.

Valon perusvärit voidaan sekoittaa toisiinsa sekundääriväreiksi. Kauan sitten ihmiset ajattelivat, että päävärit ovat punainen, keltainen ja sininen. Nyt tiedämme, että he olivat väärässä.

Toissijaiset värit

(* Toissijainen tarkoittaa toista) Toissijaiset värit ovat kaikissa väripyörissä. Toissijaiset värit syntyvät sekoittamalla valon perusvärit yhteen. Valon sekundääriset värit ovat pigmentin primäärivärejä tulostimen väripyörässä (väritulostuksessa käytettävä väripyörä). Näitä kolmea väriä kutsutaan subtraktiivisiksi väreiksi. Ne ovat magenta (kirkkaan vaaleanpunainen), keltainen ja syaani (vaalean vihertävän sininen). Valon päävärit ovat "tulostimen väripyörän" toissijaisia värejä. Pigmentin kolmea pääväriä voidaan sekoittaa punaiseksi (magenta ja keltainen), vihreäksi (keltainen ja syaani) ja siniseksi (syaani ja magenta), mutta ne eivät näytä yhtä kirkkailta, kun ne valmistetaan valon sijasta pigmentillä. Sekundäärivärejä voidaan sekoittaa primaariväreihin, jolloin saadaan tertiäärivärejä.

Kolmannet värit

(* Tertiäärinen tarkoittaa kolmatta) Tertiääriset värit saadaan sekoittamalla sekundäärinen ja primäärinen väri yhteen. Tertiäärivärit ovat oranssi, joka valmistetaan sekoittamalla punaista ja keltaista; chartreuse-vihreä (kelta-vihreä), joka valmistetaan sekoittamalla vihreää ja keltaista; kevätvihreä, joka valmistetaan sekoittamalla vihreää ja syaania; atsuri, joka valmistetaan sekoittamalla sinistä ja syaania; violetti, joka valmistetaan sekoittamalla sinistä ja magentaa; ja ruusu, joka valmistetaan sekoittamalla punaista ja magentaa.

Tertiäärivärit ovat samat sekä tulostimen väripyörässä että elektronisessa väripyörässä.

Värikehän 12 pääväriä

Värikehän 12 pääväriä, jotka ovat 30 asteen välein HSV-värikehässä (kuvassa yllä), ovat seuraavat: punainen (0 astetta tai 360 astetta), oranssi (30 astetta), keltainen (60 astetta), kartanvihreä (90 astetta), vihreä (120 astetta), kevätvihreä (150 astetta), syaani (180 astetta), atsuri (210 astetta), sininen (240 astetta), violetti (270 astetta), purppuranvihreä (300 astetta) ja ruusunpunainen (330 astetta). Tämä muodostaa täydellisen primaari-, sekundääri- ja tertiäärivärinimien joukon.

RGB-värikehä, jossa värit näytetään diskreettisesti eikä jatkuvasti kuten edellä esitetyssä HSV-värikehässä.

12 pääväriä väriympyrän värien värivertailukartta

Huomautus: Punainen on esitetty kahdesti, jotta sitä voidaan verrata sekä oranssiin että ruusuun.

PUNAINEN (verkkoväri) (Hex: #FF0000) (RGB: 255, 0, 0, 0) (0 astetta)

ORANSSI (väripyörä Oranssi) (Hex: #FF7F00) (RGB: 255, 127, 0) (30 astetta)

KELTAINEN (verkkoväri) (Hex: #FFFF00) (RGB: 255, 255, 0) (60 astetta)

CHARTREUSE GREEN (verkkoväri Chartreuse) (Hex: #7FFF00) (RGB: 127, 255, 0) (90 astetta)

VIHREÄ (X11) (väripyörä Vihreä) (HTML/CSS "Lime") (Electric green) (Hex: #00FF00) (RGB: 0, 255, 0) (120 astetta)

SPRING GREEN (verkkoväri) (Hex: #00FF7F) (RGB: 0, 255, 127) (150 astetta)

CYAN (verkkoväri Aqua) (Hex: #00FFFF) (RGB: 0, 255, 255) (180 astetta)

AZURE (väriympyrä Azure) (Hex: #007FFF) (RGB: 0, 127, 255) (210 astetta)

SININEN (verkkoväri) (Hex: #0000FF) (RGB: 0, 0, 255) (240 astetta)

VIOLETTI (väriympyrä Violetti) (Lähes violetti) (Hex: #7F00FF) (RGB: 127, 0, 255) (270 astetta)

MAGENTA (verkkoväri Fuksia) (Hex: #FF00FF) (RGB: 255, 0, 255) (300 astetta)

ROSE (Hex: #FF007F) (RGB: 255, 0, 127) (330 astetta)

PUNAINEN (verkkoväri) (Hex: #FF0000) (RGB: 255, 0, 0, 0) (360 astetta)

RYB-väripyörä

Perinteisessä puna-kelta-sinisessä pigmenttiväripyörässä (jossa punaista, keltaista ja sinistä pidettiin ensisijaisina väreinä ja oranssia, vihreää ja violettia toissijaisina väreinä) puna-kelta-sinisen (RYB) väriympyrän kolmosvärit olivat nimeltään punavioletti, sinivioletti, sinivihreä, kellanvihreä, keltaoranssi ja punaoranssi.

Kysymyksiä ja vastauksia

K: Mikä on väripyörä?

A: Väripyörä on pyöreä kaavio, jossa näkyvät pää- ja sivuvärit.

K: Mikä on nykyisin yleisimmin käytetty väripyörä?

V: Nykyisin yleisimmin käytetty väripyörä on HSV-väripyörä, joka tarkoittaa hue (värisävy), saturation (kylläisyys) ja value (arvo).

K: Mikä on HSV-väripyörän digitaalinen muoto?

V: HSV-väripyörän digitaalinen muoto on RGB-väripyörä.

K: Miten HSV/RGB-väripyörä kuvataan?

V: HSV/RGB-värirengasta kuvataan kaksi versiota: toisessa on punainen, vihreä ja sininen pääväreinä (elektroninen/tietokoneen värirengas) ja toisessa magenta, keltainen ja syaani pääväreinä (tulostimen värirengas).

Kysymys: Missä päävärit sijaitsevat väripyörässä?

V: Perusvärit sijaitsevat väriympyrän yläosassa.

K: Mitkä ovat päävärit elektronisessa/tietokoneen väripyörässä?

V: Elektronisen/tietokoneen väripyörän päävärit ovat punainen, vihreä ja sininen.

K: Mitkä ovat tulostimen väripyörän päävärit?

V: Tulostimen väripyörän päävärit ovat magenta, keltainen ja syaani.

Etsiä