Käyttöohje
- Syötä perusväri tai valitse sellainen. ”Uusi satunnainen perusväri” valitsee yhden puolestasi.
- Valitse harmonia. ”Tummennukset ja vaalennukset” luo 11-portaan asteikon erittäin vaaleasta erittäin tummaan.
- Lukitse kaikki värit, jotka haluat säilyttää, ja jatka sitten muiden perusvärien kokeilua.
- Valitse HEX, CSS-muuttujat tai JSON, anna nimi ja kopioi koodi.
Näin se toimii
Harmoniat löydetään kiertämällä sävyä väriympyrässä: täydentävä lisää vastakkaisen sävyn (180°), analoginen lisää vierekkäiset sävyt 30° ja 60° kummaltakin puolelta, triadinen käyttää kolmea sävyä 120° välein, tetradinen neljää sävyä 90° välein ja jaettu täydentävä kahta sävyä täydentävän vieressä (150° ja 210°).
Kierto tapahtuu OKLCH:ssa eikä HSL:ssä. OKLCH pitää havaitun vaaleuden vakaana, joten keltainen ja sininen samassa paletissa näyttävät samankaltaisen kirkkailta sen sijaan, että keltainen häikäisisi. Kun kierretty väri putoaisi sRGB-näyttöjen näyttämän alueen ulkopuolelle, sen kromaattisuutta vähennetään, kunnes se mahtuu, säilyttäen vaaleuden ja sävyn.
Sävy- ja vaaleusasteikko käyttää kiinteitä OKLCH-vaaleusaskeleita 50–950, samankaltainen kuin Tailwind CSS:ssä käytetty nimeäminen, kromaattisuutta vähennetään lähellä valkoista ja mustaa, jotta vaaleimmat sävyt eivät näytä neonilta. Harmoniat ovat lähtökohta: tarkista teksti- ja taustaparit kontrastitarkistimella ennen kuin käytät niitä sisällössä.
Esimerkit
Brändiväri korostusvärillä
Pohja #3366cc ja ”Täydentävä” lisää #8c6500, lämmin okra, jolla on sama OKLCH-vaaleus. Sinisen ja oranssinkeltaisen parit ovat yleinen valinta korostuksiin sinisen brändin vieressä.
Design tokenit komponenttikirjastolle
Valitse ”Sävyt ja vaaleusasteet”, aseta nimeksi ”primary” ja vie CSS-muuttujat. Saat --primary-50:stä --primary-950:een, valmiina taustoille (50–100), reunuksille (200–300) ja tekstille (700–900).
Yhden värin säilyttäminen kokeilun aikana
Lukitse triadisen paletin toinen väri ja kokeile sitten eri perusvärejä. Lukittu värimalli säilyttää HEX-arvonsa, kun muut vaihtuvat.
Usein kysytyt kysymykset
Miksi värini eroavat HSL-väriympyrätyökalun tuloksista?
Tämä työkalu kiertää sävyä OKLCH:ssa, joka on havaintopohjainen väriavaruus. Sen sävykulmat eivät täsmää tarkasti HSL:n kanssa, joten värin ”vastaväri” voi olla hieman eri sävy kuin HSL-työkalussa.
Voinko käyttää JSON:ia Tailwind CSS:ssä?
JSON yhdistää nimet HEX-arvoihin samassa muodossa, jonka Tailwind hyväksyy värille teemakokoonpanossaan. Tailwind 4:ssä voit myös liittää CSS-muuttujat @theme-lohkoon nimettyäsi ne muotoon --color-…
Ovatko luodut paletit esteettömiä?
Ei automaattisesti. Väriharmonia ei kerro mitään tekstin ja taustan välisestä kontrastista. Tarkista jokainen käyttämäsi pari Contrast Checker -työkalulla.
Tietosuoja
Paletit luodaan selaimessasi. Värejäsi ei lähetetä minnekään eikä tallenneta.