Värivalitsin
Poimi mikä tahansa väri kuvasta ja saat HEX-, RGB-, HSL-, HSV- ja CMYK-koodit heti.
Lataa kuva poimiaksesi värin
Vedä & pudota, liitä tai selaa — PNG, JPG, WEBP tai GIF
Vinkki: voit myös liittää kuvan näppäimillä Ctrl/Cmd + V
Värikoodit
Lähin värin nimi: Royal Blue
Väriharmoniat
Kontrastin tarkistus (WCAG)
Esimerkkiteksti
Tallennetut värit
Ei vielä tallennettuja värejä — poimi väri ja napauta “Tallenna väri”.
Värivalitsin on työkalu, jolla poimit minkä tahansa värin kuvasta tai näytöltä ja saat sen tarkat väriarvot heti käyttöösi. Napsauta pipetillä haluamaasi pikseliä, niin näet saman värin HEX-, RGB-, HSL-, HSV- ja CMYK-muodossa. Tämä on kätevää monissa tilanteissa: verkkosuunnittelussa ja käyttöliittymätyössä, frontend-kehityksessä, painotöissä ja brändäyksessä sekä silloin, kun haluat varmistaa tekstin ja taustan riittävän kontrastin saavutettavuuden vuoksi.
Työkalu on täysin ilmainen ja toimii suoraan selaimessasi — kuviasi ei ladata palvelimelle, joten yksityisyytesi säilyy. Väriarvojen lukemisen lisäksi voit poimia koko väripaletin valokuvasta, luoda värille harmonisia yhdistelmiä (esimerkiksi komplementaarisen tai analogisen harmonian) ja tarkistaa värien välisen WCAG-kontrastisuhteen. Kopioi koodit yhdellä napsautuksella tai tallenna ja vie valmis paletti projektiisi.
Näin poimit värin kuvasta
- 1
Lataa tai vedä kuva
Valitse kuva laitteeltasi, vedä ja pudota se työkaluun tai liitä se leikepöydältä näppäimillä Ctrl/Cmd + V. Voit myös liittää kuvan URL-osoitteen. Tuetut muodot ovat PNG, JPG, WEBP ja GIF.
- 2
Napsauta pipetillä pikseliä
Vie kohdistin kuvan päälle ja napsauta kohtaa, jonka värin haluat poimia. Zoomausnäkymän avulla osut tarkalleen oikeaan pikseliin myös pienissä yksityiskohdissa.
- 3
Lue ja kopioi värikoodit
Työkalu näyttää poimitun värin heti HEX-, RGB-, HSL-, HSV- ja CMYK-muodossa. Napsauta mitä tahansa arvoa kopioidaksesi sen leikepöydälle valmiina liitettäväksi koodiin tai suunnitteluohjelmaan.
- 4
Poimi paletti kuvasta
Anna työkalun analysoida kuva ja koota siitä väripaletti hallitsevimmista sävyistä. Näet valokuvan tärkeimmät värit yhdellä silmäyksellä ja voit kopioida ne yksitellen.
- 5
Luo väriharmoniat
Muodosta valitusta väristä harmonisia yhdistelmiä — komplementaarinen, analoginen, triadinen, tetradinen, jaettu komplementaarinen tai monokromaattinen. Näin rakennat tasapainoisen väriteeman nopeasti.
- 6
Tarkista kontrasti ja vie paletti
Vertaa tekstin ja taustan värejä WCAG-kontrastin tarkistuksella varmistaaksesi luettavuuden. Lopuksi tallenna valitut värit ja vie paletti CSS-, JSON- tai PNG-muodossa suoraan projektiisi.
HEX, RGB, HSL, HSV ja CMYK selitettynä
Sama väri voidaan ilmaista monella eri tavalla, ja jokaisella värimallilla on oma käyttötarkoituksensa. HEX ja RGB sopivat parhaiten näytöille ja verkkosivuille, HSL ja HSV helpottavat värin intuitiivista säätämistä, ja CMYK on tarkoitettu painotöihin. Alla oleva taulukko selittää, mihin kutakin mallia kannattaa käyttää.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Verkkosivut ja CSS — lyhyt merkintä, jota käytetään yleisimmin koodissa |
| RGB | rgb(59, 130, 246) | Näytöt ja digitaaliset välineet — punainen, vihreä ja sininen kanava |
| HSL | hsl(217, 91%, 60%) | Intuitiivinen säätö — sävyn, kylläisyyden ja vaaleuden hienosäätö |
| HSV | hsv(217, 76%, 96%) | Suunnittelutyökalut — sävy, kylläisyys ja kirkkaus värivalitsimissa |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Painatus — syaani, magenta, keltainen ja musta painovärit |
Verkko- ja UI-suunnittelu
Poimi värit inspiraatiokuvista, kuvakaappauksista tai brändimateriaaleista ja rakenna niiden pohjalta yhtenäinen väriteema käyttöliittymällesi. Väriharmoniat auttavat valitsemaan toisiaan tukevat sävyt painikkeille, taustoille ja korostuksille, ja tallennettu paletti pitää suunnittelun johdonmukaisena eri näkymissä.
Frontend-kehitys
Kopioi tarkat HEX- tai RGB-arvot suoraan CSS-muuttujiin, teemamäärittelyihin tai suunnittelujärjestelmän tokeneihin. Kun poimit värin valmiista suunnitelmasta, vältät arvailun ja varmistat, että toteutus vastaa täsmälleen suunnittelijan tarkoittamaa sävyä. Paletin vieminen CSS- tai JSON-muodossa nopeuttaa työtä entisestään.
Painatus ja brändäys
Painotöissä värit määritellään CMYK-mallilla, joten näytöllä nähtävä sävy on muunnettava painoväreille sopivaan muotoon. Työkalu näyttää jokaiselle poimitulle värille valmiit CMYK-arvot, mikä helpottaa brändivärien siirtämistä esitteisiin, käyntikortteihin ja muihin painettaviin materiaaleihin.
Saavutettavuus
Tekstin on erotuttava taustastaan riittävästi, jotta sisältö on kaikkien luettavissa. WCAG-kontrastin tarkistus laskee tekstin ja taustan välisen kontrastisuhteen ja kertoo heti, täyttyvätkö AA- ja AAA-tason vaatimukset tavallisella ja suurella tekstillä. Näin varmistat saavutettavuuden jo suunnitteluvaiheessa.
Vertailu
Moni käyttää verkossa yksinkertaisia värinpoimintatyökaluja, kuten imagecolorpicker.com. Tämä työkalu tarjoaa laajemmat värimallit, painatukseen soveltuvat CMYK-arvot, saavutettavuuden kontrastintarkistuksen ja väriharmoniat — kaikki ilman mainoksia.
| Värimallit | HEX, RGB, HSL, HSV ja CMYK | Pääosin HEX ja RGB |
| CMYK painatukseen | Kyllä, valmiit CMYK-arvot jokaiselle värille | Rajallisesti tai ei lainkaan |
| WCAG-kontrastin tarkistus | Kyllä, AA- ja AAA-tasot tavalliselle ja suurelle tekstille | Ei |
| Väriharmoniat | Komplementaarinen, analoginen, triadinen ja muut | Ei |
| Mainokset | Ei mainoksia | Sisältää mainoksia |
Usein kysytyt kysymykset
Miten poimin värin kuvasta?
Lataa tai vedä kuva työkaluun ja napsauta pipetillä kohtaa, jonka värin haluat poimia. Työkalu näyttää valitun pikselin värin heti HEX-, RGB-, HSL-, HSV- ja CMYK-muodossa, ja voit kopioida minkä tahansa arvon yhdellä napsautuksella.
Mikä on HEX-värikoodi?
HEX-värikoodi on kuusinumeroinen heksadesimaalimerkintä, joka kuvaa värin punaisen, vihreän ja sinisen kanavan, esimerkiksi #3B82F6. Ensimmäiset kaksi merkkiä ovat punainen, seuraavat kaksi vihreä ja viimeiset kaksi sininen. HEX on verkkosivuilla ja CSS:ssä yleisimmin käytetty värimerkintä.
Miten muunnan RGB-arvon HEX-muotoon?
Jokainen RGB-kanava (0–255) muunnetaan kaksimerkkiseksi heksadesimaaliluvuksi ja arvot yhdistetään # -merkin perään. Esimerkiksi rgb(59, 130, 246) vastaa koodia #3B82F6. Työkalu tekee muunnoksen automaattisesti — poimit värin ja saat sekä RGB- että HEX-arvon samanaikaisesti.
Miten luon väripaletin valokuvasta?
Lataa valokuva ja käytä paletin poimintatoimintoa. Työkalu analysoi kuvan ja kokoaa siitä paletin hallitsevimmista väreistä. Voit kopioida värit yksitellen tai viedä koko paletin CSS-, JSON- tai PNG-muodossa suunnitteluprojektiisi.
Miten tarkistan värikontrastin saavutettavuutta varten?
Valitse tekstin ja taustan värit kontrastin tarkistukseen. Työkalu laskee niiden välisen kontrastisuhteen ja kertoo, täyttyvätkö WCAG:n AA- ja AAA-tason vaatimukset tavallisella ja suurella tekstillä. Suositeltu vähimmäissuhde tavalliselle tekstille on 4,5:1 (AA-taso).
Onko työkalu ilmainen ja säilyykö yksityisyyteni?
Kyllä. Värivalitsin on täysin ilmainen eikä vaadi rekisteröitymistä. Kaikki käsittely tapahtuu suoraan selaimessasi — kuviasi ei lähetetä eikä tallenneta palvelimelle, joten tietosi pysyvät yksityisinä.
