# Värvivalija

> Värviratas HSV, HSL ja maalikunstniku RYB režiimis, kuus valmis värviharmooniat ning HEX, RGB, HSL, OKLCH, CMYK teisendus. Lisaks lähim Tailwindi token. Tasuta.

URL: https://acrafto.com/et/varvivalija-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.

Vali värv rattal, peenhäälesta seda küllastuse ja heleduse lõuendil ning loe see tagasi igas vormingus, mida sinu projekt kasutab, alates `#RRGGBB`\-st kuni `oklch()`\-ni. Tööriist teeb ka seda, mida teised värvivalijad vahele jätavad: kolm ratta režiimi, sealhulgas maalikunstniku RYB-ratas, harmooniad, mis ehitavad sulle valmis paleti, alfakanal ning terve paleti eksport ühe klõpsuga CSS-muutujatena, SCSS-ina või JSON-ina. Kõik arvutatakse kohapeal sinu brauseris.

## RYB või RGB? Kolm värviratast ühe asemel

**Ratta režiim** valik muudab toonide paigutust rattal:

- **HSV** ja **HSL** on digitaalsed rattad. Toonid on paigutatud nii, nagu ekraan valgust segab. Need erinevad ruudukujulise lõuendi poolest: HSV heledaim nurk on puhas toon, HSL paigutab puhtad toonid heleduse keskele ja valge nende kohale.
- **RYB (maalikunstniku)** paigutab toonid nii, nagu kunstnikud need õppisid: punane, kollane ja sinine põhivärvidena, nende vahel oranž, roheline ja lilla (vt [RYB-mudel Vikipeedias](https://et.wikipedia.org/wiki/RYB-mudel)). Erinevuse märkad kõige selgemalt harmooniate juures. RYB-rattal on punase komplement **roheline** ja sinise komplement **oranž**, samad pigmendipaarid, mida õpetatakse joonistustunnis. Digitaalne ratas paarib punase hoopis tsüaaniga. Kui “komplementaarne” palett tavalisest värvivalijast on kunagi silmale valesti tundunud, siis nüüd tead, miks.

## Värviharmooniad: palett, mis ehitub iseenesest

Vali reegel välja **Värviharmoonia** all. Ratas märgib kaaslasvärvid ja nende alla ilmub valmis palett:

- **Komplementaarne:** üks vastasvärv. Kõige tugevam kontrast, sobib üksikuks aktsendiks domineeriva brändivärvi kõrvale.
- **Jagatud komplementaarne:** komplemendi kaks naaberit. Peaaegu sama tugev kontrast, aga palju lihtsam tasakaalustada.
- **Triaadne:** kolm ühtlaselt jaotatud tooni. Elav ja samas stabiilne, kui üks toon domineerib ja teisi kahte kasutad säästlikult.
- **Tetraadne (ruut):** neli tooni. Rikkalikud skeemid illustratsioonidele ja graafikutele, rakenduse liideses raske tasakaalustada.
- **Analoogne:** vahetud naaberid. Rahulik kombinatsioon taustadele ja üleminekutele.
- **Monokroomne:** üks toon mitmel heledusastmel. Kõige turvalisem valik nupu olekutele (hõljumine, aktiivne, keelatud).

Terve paleti kopeerid ühe klõpsuga vormingus, mida vajad: lihtne **HEX**, **RGB**, **HSL**, **OKLCH**, kleepimisvalmis **CSS kohandatud omadused** (`--color-1: …`), **SCSS muutujad** või **JSON** koodi jaoks. Kas palett hoiab kontrasti ka inimeste jaoks, kes toone raskemini eristavad? Kontrolli seda kiiresti ekraanipildil pärast [halltoonidesse teisendamist](https://acrafto.com/et/piltide-teisendamine-halltoonidesse-vorgus/).

## Teisenda HEX, RGB, HSL, OKLCH ja CMYK: kleebi ükskõik mida, loe kõike

Sisendväljad võtavad vastu peaaegu igasugust värvinotatsiooni: `#f80`, `#ff8800`, 8-kohaline hex koos alfaga, `rgb()` ja `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` ja CSS värvinimed nagu `rebeccapurple`. Ükskõik, mida sisestad, saad tagasi seitse kooskõlastatud väljundit: **HEX, RGB, HSL, HSV, LCH, OKLCH ja CMYK**, igaühel oma kopeerimisnupp.

Eelvaate all olev **läbipaistmatuse (alfa)** liugur lülitab väljundid nende läbipaistvatele vormidele `#RRGGBBAA`, `rgba()` ja `hsla()`. Eelvaade kuvatakse malelaua-mustri peal, nii et näed läbipaistvust kohe.

## Leia lähim Tailwind CSS värvitoken

Eelvaate all olevad kaks silti nimetavad värvi sinu eest: **lähim nimega CSS värv** (kasulik kiireks prototüüpimiseks) ja **lähim Tailwindi token**, näiteks `orange-500`. Nii jääd oma disainisüsteemi sisse, selle asemel et leiutada ühekordseid väärtusi. Kliki sildil, et see kopeerida.

See vastab küsimusele, mis kerkib igas disaini üleandmises: disainer saatis hex-koodi, milline Tailwindi klass sellele kõige lähemal on? Vastavus arvutatakse Tailwind CSS 4 vaikepaleti järgi (vt [Tailwindi dokumentatsiooni](https://tailwindcss.com/docs/colors), inglise keeles), nii et tokeni saad kohe kleepida klassinimesse.

## Millist värvivormingut kasutada?

| Vorming | Täisnimi | Millal kasutada |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Veebi vaikevalik.** Lühike, toetatud kõikjal, lihtsalt kopeeritav. Kaheksa numbrit lisavad läbipaistmatuse. |
| **RGB** | Red, Green, Blue | **Nii mõtlevad ekraanid.** Kolm valguskanalit vahemikus 0 kuni 255. Vorming, mida enamik API-sid ja canvas-koodi ootab. |
| **HSL** | Hue, Saturation, Lightness | **Silma järgi muutmiseks.** “Veidi heledam” või “vähem küllastunud” tähendab ühe numbri muutmist. |
| **HSV** | Hue, Saturation, Value | **Graafikaprogrammid.** Mudel, millel põhineb Photoshopi ja GIMP-i värvivalija. |
| **LCH** | Lightness, Chroma, Hue | **Tajuliselt ühtlane.** Samad numbrilised sammud näevad välja nagu samad visuaalsed sammud, mida HSL vaid teeskleb. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Kaasaegne CSS valik.** Parandab LCH-d vaevavad toonimuutused sinistes toonides. Toetatud kõigis praegustes brauserites, sobib disainitokenite jaoks. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Suunis trükile.** Ligikaudne teisendus trükikojaga suhtlemiseks, lõplikud väärtused määrab trükikoja värviprofiil. |

Miks OKLCH on tajuliselt ühtlasem kui vanemad mudelid, selgitab Oklab värviruumi autor Björn Ottosson oma [algses artiklis](https://bottosson.github.io/posts/oklab/) (inglise keeles). Süntaksit ja brauseritoe seisu kirjeldab [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (inglise keeles). Kuidas trükimudel toimib, selgitab [Vikipeedia artikkel CMYK kohta](https://et.wikipedia.org/wiki/CMYK).

## Väikesed asjad, mis säästavad aega

- **Ajalugu hoolitseb enda eest.** Viimased 24 värvi säilivad lehe värskendamisel. Need jäävad ainult sinu brauseri kohalikku salvestusse ega liigu kuhugi.
- **Pipett.** Brauserites, kus on EyeDropper API (Chrome ja Edge), saad valida värvi ükskõik kust ekraanilt, isegi väljaspool brauseriakent. Värvi fotolt või logofailist leiad [pildi värvipipetiga](https://acrafto.com/et/pildi-varvivalija/).
- **Klaviatuuriga juhtimine.** Ratas ja küllastuse-heleduse lõuend reageerivad nooleklahvidele, nii et saad värvi täpsete sammudega paika sättida.
- **Eelseaded** pakuvad levinud põhivärve, kui vajad lihtsalt kiiret lähtepunkti.

## Korduma kippuvad küsimused

### Kuidas teisendada OKLCH HEX-iks?

Kleebi `oklch()` väärtus OKLCH väljale ja kõik teised väljundid, sealhulgas HEX, uuenevad kohe. See toimib ka vastupidi: sisesta HEX-kood ja loe tagasi vastav `oklch()`. Üks hoiatus: OKLCH suudab kirjeldada ka värve, mis jäävad väljapoole sRGB värviruumi, ja need lõigatakse sellele, mida sRGB kuvada suudab. Väga küllastunud `oklch()` ei näe seepärast laia värviruumiga ekraanil välja täpselt samasugune kui selle HEX-vaste.

### Kas oklch() on tootmises kasutamiseks turvaline?

Jah. Kõik Chrome'i, Edge'i, Firefoxi ja Safari praegused versioonid toetavad `oklch()` väärtust, millest on saanud levinud notatsioon disainitokenite jaoks (Tailwind CSS 4 defineerib kogu oma paleti sellega). Väga vanade brauserite jaoks lisa eelmisele reale HEX-tagavaravariant. See tööriist annab sulle mõlemad väärtused.

### Miks harmooniad muutuvad, kui lülitun RYB-rattale?

Sest see, mis on "vastas", sõltub sellest, kuidas toonid ringil paiknevad. RYB-ratas jaotab pigmendi põhivärvid ühtlaselt, nii et komplementaarsed paarid vastavad sellele, mida kunstnikud teavad: punane ja roheline, sinine ja oranž, kollane ja lilla. HSV- ja HSL-rattad jaotavad toonid valguse segunemise järgi, mistõttu paarivad nad punase hoopis tsüaaniga. Kumbki pole vale: RYB vastab kunstiõpetusele, HSV ja HSL sellele, mida ekraanid teevad.

### Kas ma saan usaldada CMYK-väärtusi trüki jaoks?

Võta neid orientiirina. Tegelik trükiteisendus sõltub trükikoja, paberi ja tindi [ICC-profiilist](https://en.wikipedia.org/wiki/ICC_profile) (inglise keeles). Sama RGB-värv tuleb kaetud ja katmata paberil erinev. Siinsed väärtused kasutavad standardvalemit, mis viib sind lähedale, kuid lõpliku prooviväljatrüki teeb trükikoda.

### Kus on pipetinupp Firefoxis või Safaris?

See on sihilikult peidetud. [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, inglise keeles), millel nupp põhineb, on praegu olemas ainult Chromiumil põhinevates brauserites (Chrome, Edge, Opera). Kõik muud tööriista funktsioonid toimivad kõikjal, puudub ainult ekraanilt värvi valimine. Kui vajad värvi pildilt, kasuta [pildi värvipipetti](https://acrafto.com/et/pildi-varvivalija/), mis töötab kõigis brauserites.

### Kas mu värviajalugu jääb privaatseks?

Jah. Ajalugu on salvestatud sinu brauseri localStorage's sinu seadmes. Miski, mida valid, kleebid või kopeerid, ei lähe kuhugi mujale. Kogu tööriist töötab brauseris JavaScriptina, mida saad kinnitada arendajatööriistade võrguvahekaardilt.

## 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))
- 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))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/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))