Väripalettigeneraattori

Näin käytät väripalettigeneraattoria

1. Valitse Perusväri värinäytteestä tai kirjoita mikä tahansa koodi kenttään Perusvärin koodi (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), CSS-nimi…).
2. Valitse Harmonia: Komplementtivärit, Vierekkäiset värit, Triadi, Jaettu komplementti, Tetradi (suorakulmio), Neliö tai Yksivärinen.
3. Valitse Värikehä: HSL (perinteinen) tai OKLCH (havaintoon perustuva). Paletti päivittyy, kun muutat mitä tahansa asetusta. Myös Luo paletti päivittää sen.
4. Kopioi yksittäinen väri värinäytteen alla olevalla Kopioi-painikkeella tai valitse muoto kohdasta Vie muodossa (HEX-luettelo, CSS-muuttujat, SCSS-muuttujat, JSON-taulukko tai Tailwind-värit) ja käytä Kopioi- tai Lataa-painiketta koko paletille.

Jokainen värinäyte näyttää HEX-koodinsa mustalla tai valkoisella sen mukaan, kumpi on kontrastiltaan parempi, sekä sijaintinsa suhteessa perusväriin (esimerkiksi +120°).

Työkalu toimii selaimessasi. Mitään kirjoittamaasi ei lähetetä palvelimelle.

Värien harmoniat

Värien harmoniat ovat kiinteitä kulmia värikehällä. Perussävystäsi lähtien työkalu kiertää sävyä ja säilyttää perusvärin kylläisyyden ja vaaleuden.

• Komplementtivärit (0°, 180°): vastakkainen väri. Suurin kontrasti, erinomainen toimintakehotuspainikkeelle pääbrändivärin rinnalla.
• Vierekkäiset värit (−60°, −30°, 0°, +30°, +60°): värikehän naapurit. Rauhallisia, luonnollisia yhdistelmiä, jotka sopivat taustoihin ja kuvituksiin.
• Triadi (0°, 120°, 240°): kolme tasavälein sijoitettua sävyä. Eloisa ja tasapainoinen. Yleensä yksi väri hallitsee ja kaksi muuta ovat korostuksia.
• Jaettu komplementti (0°, 150°, 210°): komplementtivärin molemmat naapurit. Vahva kontrasti pienemmällä jännitteellä kuin puhtaassa komplementtiparissa.
• Tetradi (suorakulmio) (0°, 60°, 180°, 240°): kaksi komplementtiparia. Rikkaita paletteja, jotka tarvitsevat yhden hallitsevan värin pysyäkseen yhtenäisinä.
• Neliö (0°, 90°, 180°, 270°): neljä tasavälein sijoitettua sävyä.
• Yksivärinen: yksi sävy viidessä vaaleusportaassa tummasta vaaleaan. Sopii käyttöliittymän tiloihin, kaavioihin ja hillittyihin ulkoasuihin.

HSL- vai OKLCH-kehä?

HSL (perinteinen) -kehä on perinteinen, jota useimmat suunnittelutyökalut ja oppaat käyttävät. Sen haittapuoli on, ettei yhtä suurilla kulmilla ole yhtä suurta kirkkautta: keltainen 60°:n kohdalla näyttää paljon vaaleammalta kuin sininen 240°:n kohdalla samalla HSL-vaaleudella.

OKLCH (havaintoon perustuva) -kehä kiertää sävyä Oklab-värimallissa, joka on suunniteltu niin, että vaaleus näyttää tasaiselta. Sillä rakennetuissa paleteissa värien visuaalinen paino on samankaltainen, mikä auttaa saavutettavan kontrastin kanssa. Jotkin kierretyt värit voivat osua näytön esitettävissä olevan alueen ulkopuolelle. Työkalu laskee silloin niiden kromaa hieman, jotta ne pysyvät esitettävinä.

Viedyn paletin käyttö

CSS-muuttujat tuottavat :root-lohkon, jossa on --color-1, --color-2… ja jonka voit liittää tyylitiedostoon. SCSS-muuttujat antavat $color-1: …;-rivejä, JSON-taulukko antaa HEX-merkkijonojen luettelon skripteille ja Tailwind-värit antaa colors-objektin, jossa on avaimet 100, 200, 300…, liitettäväksi Tailwind-asetuksiin.

Tarkista tekstin kontrasti ennen julkaisua: harmonia takaa miellyttävät sävyt, ei luettavaa tekstiä. Käytä leipätekstiin tummia tai vaaleita neutraaleja värejä ja säilytä kylläiset palettivärit korostuksiin, painikkeisiin ja grafiikkaan.