Väripalettigeneraattori – harmoninen väripaletti yhdestä väristä
Valitse perusväri ja harmonia, niin saat viiden värin paletin: vierekkäiset, yksivärinen, vastaväri, jaettu vastaväri, kolmisointu tai neliö. Perusväri on aina mukana.
Jokaisessa värissä näkyy parempi tekstiväri (valkoinen tai musta) ja sen kontrasti, ja taulukko kertoo paletin väriparien kontrastit. Paletin voi laskea OKLCH-väriavaruudessa, jossa kirkkaus pysyy tasaisempana sävystä toiseen, tai tutussa HSL:ssä. Kopioi tulos CSS-muuttujina (--color-1 … --color-5) tai HEX-listana.
Miksi OKLCH eikä HSL?
HSL:ssä sama valoisuus näyttää eri sävyillä hyvin eri kirkkaalta: keltainen ja sininen 50 %:n valoisuudella eivät näytä yhtä vaaleilta. OKLCH on CSS Color 4:n väriavaruus, jonka L vastaa paremmin silmän näkemää kirkkautta, joten harmonian värit pysyvät tasapainoisempina. Jos väri ei mahdu näytön sRGB-alueelle, generaattori haalistaa sitä vain sen verran kuin on pakko.
Ladataan työkalua...
Etkö tiedä mihin ryhtyä seuraavaksi? Selaa kaikki työkalut
Hae työkalua →Väripalettigeneraattori tekee perusväristä viiden värin paletin väriharmonian mukaan ja näyttää värien kontrastit.
Valitse perusväri, harmonia ja väriavaruus. Napauta paletin väriä, niin siitä tulee uusi perusväri.
- Kuusi harmoniaa: vierekkäiset (±15°, ±30°), yksivärinen, vastaväri (180°), jaettu vastaväri (150°, 210°), kolmisointu (120°) ja neliö (90°).
- OKLCH tai HSL; perusväri on aina paletissa.
- Kontrasti jokaiselle värille ja väriparien kontrastitaulukko.
Harmonia on lähtökohta, kontrasti ratkaisee käytön.
- Vihreä luku (vähintään 4,5:1) riittää tavalliseen tekstiin, keltainen (3:1) vain isoon.
- Taulukossa rivi on teksti ja sarake tausta.
- 60-30-10-jako (pääväri, apuväri, korostus) on yleinen tapa käyttää palettia.
Näytöt näyttävät värit eri tavoin.
- Tarkista paletti myös puhelimella ja tulosteena, jos sitä tarvitaan painossa.
- Paletit tallentuvat vain tähän selaimeen.
- Lähteet: W3C, CSS Color Module Level 4 (HSL, OKLab, OKLCH); Björn Ottosson 2020; W3C, WCAG 2.2.