# Värinvalitsin online

> Väripyörä HSV, HSL ja RYB, valmiit väriharmoniat, muunnos HEX, RGB, HSL, OKLCH ja CMYK välillä sekä lähin Tailwind-token. Ilmainen, ei asennusta.

URL: https://acrafto.com/fi/varinvalitsin-online/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

Valitse väri pyörästä, hienosäädä sitä kylläisyys- ja kirkkauspinnalla ja lue se sitten takaisin missä tahansa muodossa, jota projektisi käyttää, aina `#RRGGBB`:stä `oklch()`:iin. Työkalu tekee myös sen, minkä moni muu värinvalitsin jättää väliin: kolme pyörän geometriaa, mukaan lukien perinteinen maalarin RYB-pyörä, harmoniat, jotka rakentavat paletin puolestasi, peittävyyskanavan sekä koko paletin viennin yhdellä klikkauksella CSS-muuttujina, SCSS:nä tai JSON:na. Kaikki lasketaan selaimessasi.

## RYB vai RGB? Kolme väripyörää yhden sijaan

**Pyörän tila** -valitsin muuttaa sävyjen järjestystä pyörällä:

- **HSV** ja **HSL** ovat digitaalisia pyöriä. Sävyt sijaitsevat siten kuin valo ne näytöllä sekoittaa. Ne eroavat neliön käytöksessä: HSV:ssä kirkkain kulma on puhdas sävy, HSL sijoittaa puhtaat sävyt keskikirkkauteen ja valkoisen niiden yläpuolelle.
- **RYB (maalarin)** järjestää sävyt niin kuin taiteilijat ne oppivat: punainen, keltainen ja sininen perusväreinä, niiden välissä oranssi, vihreä ja violetti (ks. [RYB-värimalli](https://en.wikipedia.org/wiki/RYB_color_model), englanniksi). Ero näkyy varsinkin harmonioissa. RYB-pyörällä punaisen vastaväri on **vihreä** ja sinisen vastaväri **oranssi**, eli klassiset pigmenttiparit. Digitaalinen pyörä parittaa punaisen syaanin kanssa. Jos tavallisen värinvalitsimen “vastaväri”-paletti on koskaan tuntunut väärältä, tässä on syy.

## Väriharmoniat: paletti, joka syntyy itsestään

Valitse sääntö kentästä **Väriharmonia**. Pyörä merkitsee mukana kulkevat värit, ja niiden alle ilmestyy valmis paletti:

- **Vastavärit:** yksi vastakkainen väri. Voimakkain kontrasti, sopii yhdeksi korostukseksi päävärin rinnalle.
- **Jaettu vastaväri:** vastavärin kaksi naapuria. Lähes yhtä paljon kontrastia, mutta helpompi tasapainottaa.
- **Triadinen:** kolme tasaisin välein sijoitettua sävyä. Eloisa mutta vakaa, kun yksi hallitsee ja kahta muuta käytetään säästeliäästi.
- **Tetradinen (neliö):** neljä sävyä. Runsaita yhdistelmiä kuvituksiin ja kaavioihin, vaikea tasapainottaa sovelluksen käyttöliittymässä.
- **Analoginen:** lähimmät naapurit. Rauhallinen yhdistelmä taustoihin ja liukuväreihin.
- **Monokromaattinen:** yksi sävy useilla kirkkaustasoilla. Turvallisin valinta painikkeen tiloihin (hover, aktiivinen, pois käytöstä).

Koko paletin kopioit yhdellä klikkauksella haluamassasi muodossa: pelkkä **HEX**, **RGB**, **HSL**, **OKLCH**, valmiit **CSS-muuttujat** (`--color-1: …`), **SCSS-muuttujat** tai **JSON** koodiin. Jos haluat tarkistaa, pitääkö paletti kontrastinsa myös ihmisille, jotka erottavat sävyjä huonommin, ota kuvakaappaus ja [muunna se harmaasävyiksi](https://acrafto.com/fi/kuvien-muuntaminen-harmaasavyiksi-verkossa/).

## Muunna HEX, RGB, HSL, OKLCH ja CMYK: liitä mitä vain, saat kaiken

Syöttökentät hyväksyvät lähes minkä tahansa värimerkinnän: `#f80`, `#ff8800`, kahdeksannumeroisen hexin peittävyydellä, `rgb()`\- ja `rgba()`\-merkinnät, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` sekä nimetyt CSS-värit kuten `rebeccapurple`. Mitä tahansa syötät, saat seitsemän synkronoitua tulostetta: **HEX, RGB, HSL, HSV, LCH, OKLCH ja CMYK**, kullakin oma kopiointipainikkeensa.

**Peittävyys (alfa)** -liukusäädin esikatselun alla vaihtaa tulosteet läpinäkyviin muotoihin `#RRGGBBAA`, `rgba()` ja `hsla()`. Esikatselu piirtyy ruudukkokuvion päälle, joten näet peittävyyden heti.

## Lähin Tailwind CSS -token mille tahansa värille

Kaksi apuchippiä esikatselun alla nimeää värin puolestasi: **lähin nimetty CSS-väri** (kätevä nopeisiin prototyyppeihin) ja **lähin Tailwind-token**, esimerkiksi `orange-500`. Näin pysyt omassa suunnittelujärjestelmässäsi etkä keksi kertaluontoisia arvoja. Klikkaamalla chippiä kopioit sen.

Tämä ratkaisee kysymyksen, joka nousee esiin jokaisessa suunnittelun luovutuksessa: graafikko lähetti hex-koodin, mikä Tailwind-luokka vastaa sitä parhaiten? Vastaavuus lasketaan Tailwind CSS 4:n oletuspalettia vasten (ks. [Tailwindin dokumentaatio](https://tailwindcss.com/docs/colors), englanniksi), joten tokenin voi liittää suoraan luokan nimeen.

## Minkä värimuodon pitäisi valita?

| Muoto | Koko nimi | Milloin käyttää |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Verkon oletusvalinta.** Lyhyt, tuettu kaikkialla, helppo kopioida. Kahdeksan numeroa lisää peittävyyden. |
| **RGB** | Red, Green, Blue | **Näin näytöt ajattelevat.** Kolme valokanavaa väliltä 0 ja 255. Muoto, jota useimmat API:t ja canvas-koodi odottavat. |
| **HSL** | Hue, Saturation, Lightness | **Säätämiseen silmämäärin.** “Vähän vaaleampi” tai “vähemmän kylläinen” tarkoittaa yhden luvun muutosta. |
| **HSV** | Hue, Saturation, Value | **Graafiset ohjelmat.** Malli, jolle Photoshopin ja GIMP:n värinvalitsin perustuu. |
| **LCH** | Lightness, Chroma, Hue | **Havaittu tasaisuus.** Samat numeeriset askeleet näyttävät samoilta visuaalisilta askeleilta, mitä HSL vain teeskentelee. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Moderni valinta CSS:ään.** Korjaa LCH:ta vaivaavat sävysiirtymät sinisissä. Kaikki nykyiset selaimet tukevat sitä, ja se sopii suunnittelutokeneihin. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Suuntaa antava painoon.** Likimääräinen muunnos puhumiseen painotalon kanssa, lopulliset arvot ratkaisee sen väriprofiili. |

Miksi OKLCH on havaittavasti tasaisempi kuin vanhemmat mallit, selittää Oklab-väriavaruuden suunnitellut Björn Ottosson [alkuperäisessä artikkelissaan](https://bottosson.github.io/posts/oklab/) (englanniksi). Syntaksin ja selaintuen tiivistää [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (englanniksi). Miten painomalli toimii, kertoo Wikipedian artikkeli [CMYK](https://fi.wikipedia.org/wiki/CMYK).

## Pienet asiat, jotka säästävät aikaa

- **Historia tallentuu itsestään.** 24 viimeisintä väriä säilyy sivun päivityksen yli. Ne pysyvät vain selaimesi tallennustilassa eivätkä lähde minnekään.
- **Pipetti.** Selaimissa, joissa on EyeDropper-API (Chrome ja Edge), voit poimia värin mistä tahansa näytöltä, myös selainikkunan ulkopuolelta. Jos väri pitää poimia valokuvasta tai logotiedostosta, käytä [kuvan pipettiä](https://acrafto.com/fi/kuvan-varinvalitsin/).
- **Näppäimistöohjaus.** Pyörä sekä kylläisyys- ja kirkkauspinta reagoivat nuolinäppäimiin, joten väriä voi hienosäätää pienin askelin.
- **Esiasetukset** tarjoavat yleiset perusvärit, kun tarvitset vain nopean lähtökohdan.

## Usein kysytyt kysymykset

### Miten muunnan OKLCH:n HEX-muotoon?

Liitä `oklch()`\-arvo OKLCH-kenttään, ja muut tulosteet, HEX mukaan lukien, päivittyvät heti. Se toimii myös toisinpäin: kirjoita HEX ja lue vastaava `oklch()`\-arvo. Yksi varaus: OKLCH voi kuvata myös sRGB-alueen ulkopuolisia värejä, ja ne rajataan siihen, mitä sRGB pystyy näyttämään. Erittäin kylläinen `oklch()` ei siksi näytä laajan väriavaruuden näytöllä samalta kuin sen HEX-vastine.

### Voinko käyttää oklch()-merkintää tuotanto-CSS:ssä?

Kyllä. Kaikki Chromen, Edgen, Firefoxin ja Safarin nykyiset versiot tukevat `oklch()`\-merkintää, ja siitä on tullut suosittu tapa kirjoittaa suunnittelutokeneita (Tailwind CSS 4 määrittelee koko palettinsa sillä). Hyvin vanhoja selaimia varten laita edelliselle riville HEX-varmistus. Tämä työkalu antaa molemmat arvot valmiina.

### Miksi harmoniat muuttuvat, kun vaihdan RYB-pyörään?

Koska se, mikä on "vastakkainen", riippuu siitä, miten sävyt on aseteltu ympyrälle. RYB-pyörä jakaa pigmenttien perusvärit tasaisesti, joten vastaväriparit vastaavat sitä, mitä taiteilijat oppivat: punainen ja vihreä, sininen ja oranssi, keltainen ja violetti. HSV- ja HSL-pyörät jakavat sävyt valon sekoittumisen mukaan, joten ne parittavat punaisen syaanin kanssa. Kumpikaan ei ole väärässä: RYB vastaa perinteistä taideopetusta, HSV ja HSL sitä, miten näytöt toimivat.

### Voinko luottaa CMYK-arvoihin painatuksessa?

Pidä niitä suuntaa antavina. Todellinen muunnos painatukseen riippuu painokoneen, paperin ja musteen [ICC-profiilista](https://fi.wikipedia.org/wiki/ICC-profiili). Sama RGB-väri näyttää erilaiselta päällystetyllä ja päällystämättömällä paperilla. Tässä lasketut arvot käyttävät vakiokaavaa, joka vie lähelle oikeaa tulosta, mutta lopullinen vedos on painotalon asia.

### Missä pipetin painike on Firefoxissa tai Safarissa?

Se on piilotettu tarkoituksella. [EyeDropper-API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, englanniksi), johon painike perustuu, toimii tällä hetkellä vain Chromium-pohjaisissa selaimissa (Chrome, Edge, Opera). Muut työkalun ominaisuudet toimivat kaikkialla, vain värin poiminta näytöltä puuttuu. Jos tarvitset värin kuvasta, käytä [kuvan pipettiä](https://acrafto.com/fi/kuvan-varinvalitsin/), joka toimii kaikissa selaimissa.

### Pysyykö värihistoriani yksityisenä?

Kyllä. Historia tallentuu selaimesi localStorageen laitteellesi. Mitään, mitä valitset, liität tai kopioit, ei lähetetä minnekään. Koko työkalu toimii JavaScriptinä selaimessa, minkä voit tarkistaa kehittäjätyökalujen Verkko-välilehdeltä.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))