Värinvalitsin online

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, 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.

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, 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 (englanniksi). Syntaksin ja selaintuen tiivistää MDN (englanniksi). Miten painomalli toimii, kertoo Wikipedian artikkeli 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ä.
• 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. 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 (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ä, 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ä.