Värinvalitsin Online
Valitse väri pyörästä, hienosäädä sitä kylläisyyskankaalla ja lue se takaisin missä tahansa projektisi käyttämässä muodossa – #RRGGBB:stä oklch():iin. Tämä valitsin tekee myös sen, mitä muut työkalut jättävät väliin: kolme pyörägeometriaa, mukaan lukien maalarin RYB-pyörä, harmoniapäällysteet, jotka rakentavat paletin puolestasi, alfakanava sekä koko paletin vienti yhdellä klikkauksella CSS-muuttujina, SCSS:nä tai JSON:na. Kaikki lasketaan paikallisesti selaimessasi.
Kolme pyörää, ei yhtä
Pyörän tila -valitsin muuttaa itse pyörän geometriaa:
- HSV ja HSL ovat digitaalisia pyöriä – sävyt on aseteltu samalla tavalla kuin RGB-näytöt sekoittavat valoa. Ne eroavat siinä, miten neliönmuotoinen kangas käyttäytyy: HSV:n kirkkain kulma on puhdas sävy, HSL sijoittaa puhtaat sävyt 50 %:n kirkkauteen valkoisen jäädessä yläpuolelle.
- RYB (maalarin) järjestää sävyt samalla tavalla kuin taiteilijat ovat ne oppineet: punainen, keltainen ja sininen perusväreinä, oranssi, vihreä ja violetti niiden välissä. Sen käytännön arvo näkyy harmonioissa – RYB-pyörällä punaisen vastaväri on vihreä ja sinisen vastaväri oranssi, klassiset pigmenttiparit, kun taas digitaalinen pyörä parittaa punaisen syaanin kanssa. Jos tavallisen valitsimen “vastaväri”-paletti on koskaan näyttänyt silmääsi väärältä, tässä on syy.
Harmoniat, jotka rakentavat paletin puolestasi
Valitse sääntö Väriharmonia-valikosta, ja pyörä merkitsee toisiaan täydentävät värit, jotka näkyvät valmiina palettina:
- Vastavärit – yksi vastakkainen väri. Voimakkain kontrasti; käytä sitä yhtenä korostuksena hallitsevaa brändiväriä vasten.
- Jaettu vastaväri – vastavärin kaksi naapuria. Lähes yhtä paljon kontrastia, mutta paljon helpompi tasapainottaa.
- Triadinen – kolme tasaisesti jakautunutta sävyä. Eloisa mutta vakaa; anna yhden hallita ja käytä kahta muuta säästeliäästi.
- Tetradinen (neliö) – neljä sävyä. Rikkaita yhdistelmiä kuvituksiin ja datavisualisointiin; vaikea tasapainottaa käyttöliittymätyössä.
- Analoginen – välittömät naapurit. Vähän jännitettä, hyvä taustoihin ja gradientteihin.
- Monokromaattinen – yksi sävy portaittaisella kirkkaudella. Turvallisin valinta käyttöliittymän tiloihin (hover, aktiivinen, pois käytöstä).
Palettipaneeli kopioi koko joukon yhdellä klikkauksella, valitsemassasi muodossa: tavallinen HEX, RGB, HSL, OKLCH, valmiiksi liitettävät CSS-muuttujat (--color-1: …), SCSS-muuttujat tai JSON koodiin vietäväksi.
Liitä mitä tahansa, lue kaikki
Syöttökentät hyväksyvät käytännössä minkä tahansa värimerkinnän: #f80, #ff8800, 8-numeroinen hex alfalla, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 tai CSS:n värinimet kuten rebeccapurple. Mitä tahansa syötätkin, seitsemän synkronoitua tulostetta palautuu: HEX, RGB, HSL, HSV, LCH, OKLCH ja CMYK, kukin omalla kopiointipainikkeellaan.
Esikatselun alla olevat kaksi apuchippiä nimeävät värin puolestasi: lähin CSS:n nimetty väri (kätevä nopeaan prototyyppiin ja väristä puhumiseen) ja lähin Tailwind-token (esim. orange-500), jotta voit pysyä suunnittelujärjestelmäsi sisällä sen sijaan, että keksisit kertaluontoisia arvoja.
Vedä alfa-liukusäädintä esikatselun alla, ja tulosteet vaihtuvat läpinäkyviin muotoihinsa – #RRGGBBAA, rgba(), hsla() – esikatselun näkyessä ruutukuvion päällä, jotta läpinäkyvyyttä on helppo arvioida.
Minkä muodon pitäisi valita?
| Muoto | Koko nimi | Milloin käyttää |
|---|---|---|
| HEX | Heksadesimaali | Verkon oletusarvo. Kompakti, laajasti tuettu, helppo kopioida. 8 numeroa lisää alfan. |
| RGB | Punainen, Vihreä, Sininen | Miten näytöt ajattelevat. Kolme valokanavaa, 0–255. Muoto, jota useimmat API:t ja canvas-koodi odottavat. |
| HSL | Sävy, Kylläisyys, Kirkkaus | Ihmisen käsin muokattavaksi. “Vähän vaaleampi” tai “vähemmän kylläinen” on yhden luvun muutos. |
| HSV | Sävy, Kylläisyys, Arvo | Graafiset ohjelmistot. Photoshopin ja GIMP:n valitsinten taustalla oleva malli. |
| LCH | Kirkkaus, Kroma, Sävy | Havainnollisesti yhdenmukainen. Yhtä suuret numeeriset askeleet näyttävät yhtä suurilta visuaalisilta askeleilta – sitä, mitä HSL vain väittää olevansa. |
| OKLCH | OK-kirkkaus, Kroma, Sävy | Moderni CSS-valinta. Korjaa LCH:n sävyvirheet sinisissä; tuettu kaikissa nykyisissä selaimissa ja ihanteellinen suunnittelutokeneille. |
| CMYK | Syaani, Magenta, Keltainen, Musta | Painoon suuntautunut. Likimääräinen muunnos painosuunnittelijoiden kanssa puhumiseen – lopulliset arvot tulevat aina painotalon väriprofiilista. |
Pienet asiat, jotka säästävät aikaa
- Historia pitää itsestään huolen. 24 viimeisintä väriä, joiden kanssa olet työskennellyt, säilyvät sivun päivityksen yli – tallennettuna vain selaimesi paikalliseen tallennustilaan, ei koskaan lähetettynä minnekään.
- Pipetti. Selaimissa, joissa on EyeDropper-API (Chrome ja Edge), voit poimia värin mistä tahansa näytöltäsi, jopa selainikkunan ulkopuolelta.
- Näppäimistöohjaus. Pyörä ja kylläisyyskangas reagoivat nuolinäppäimiin pikselintarkkoihin säätöihin.
- Esiasetukset kattavat yleiset perusvärit nopeaan lähtökohtaan.
Usein kysytyt kysymykset (FAQ)
Onko oklch() turvallinen käyttää tuotanto-CSS:ssä?
Kyllä. Kaikki Chromen, Edgen, Firefoxin ja Safarin nykyversiot tukevatoklch()-merkintää, ja siitä on tullut suositeltu tapa määritellä suunnittelutokeneita (Tailwind CSS 4 määrittelee koko paletin sillä). Hyvin vanhoja selaimia varten tarjoa HEX-varmuuskopio edellisellä rivillä – tämä työkalu antaa sinulle molemmat arvot.