Värin vaaleat ja tummat sävyt

Näin käytät sävygeneraattoria

1. Valitse Perusväri värinäytteestä tai kirjoita arvo kenttään Värikoodi: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) tai CSS-nimi, kuten teal.
2. Valitse Askel: 5 %, 10 %, 20 % tai 25 %. Arvolla 10 % saat vaaleat sävyt 10 %, 20 % … 100 % ja saman määrän tummia sävyjä.
3. Valitse, missä avaruudessa Sekoita avaruudessa: OKLCH (havaintoon perustuva) tai sRGB (perinteinen). Kaksi riviä päivittyy kerralla: Vaaleat sävyt (sekoitettu valkoiseen) ja Tummat sävyt (sekoitettu mustaan), kumpikin perusväristä alkaen.
4. Napsauta Kopioi minkä tahansa värinäytteen alla kopioidaksesi sen HEX-koodin.
5. Valitse kohdassa Vie muodossa CSS-muuttujat, Tailwind-asetukset (v3), Tailwind @theme (v4), SCSS-muuttujat tai JSON, aseta Nimi, kuten primary tai brand, ja Kopioi tai Lataa koodi.

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

Vaaleat sävyt, tummat sävyt ja harmaasävyt

Väriteoriassa vaalea sävy (tint) on valkoiseen sekoitettu väri, tumma sävy (shade) mustaan sekoitettu väri ja sävy (tone) harmaaseen sekoitettu väri. Prosenttiluku kertoo, kuinka paljon valkoista tai mustaa lisätään: 30 %:n vaalea sävy on 70 % perusväriä ja 30 % valkoista. Arvolla 100 % päästään puhtaaseen valkoiseen tai mustaan, minkä vuoksi kunkin rivin viimeinen värinäyte on aina #FFFFFF tai #000000. Se merkitsee asteikon loppua.

Vaaleat ja tummat sävyt ovat nopein tapa rakentaa yhtenäinen asteikko yhdestä brändivärista: vaaleat taustat ja osoitustilat vaaleista sävyistä, reunaviivat, painetut tilat ja tumma teksti tummista sävyistä.

OKLCH- vai sRGB-sekoitus?

sRGB (perinteinen) sekoittaa punaisen, vihreän ja sinisen arvot suoraan. Sitä useimmat vanhemmat generaattorit tekevät, ja se vastaa CSS:n color-mix(in srgb, …)-funktiota. Vaalean sävyn kaava on yksinkertaisesti kanava + (255 − kanava) × p ja tumman sävyn kanava × (1 − p). Se on ennustettava, mutta askeleet eivät ole havaintojen mukaan tasaisia: siniset kallistuvat vaalennettaessa kohti violettia ja tummat sävyt näyttävät usein mutaisilta.

OKLCH (havaintoon perustuva) sekoittaa Björn Ottossonin vuonna 2020 suunnittelemassa OKLCH-väriavaruudessa, kuten CSS:n color-mix(in oklch, …). Vaaleus, kroma ja sävy interpoloidaan erikseen. Valkoisella ja mustalla ei ole sävyä, joten perusvärin sävy säilyy loppuun asti, ja jokainen askel muuttaa vaaleutta visuaalisesti samankaltaisella määrällä. Värit, jotka putoaisivat sRGB-alueen ulkopuolelle, tuodaan takaisin pienentämällä kromaa, ei leikkaamalla kanavia, joten sävy pysyy vakaana. Design-järjestelmissä tämä antaa yleensä siistimpiä ja tasaisempia asteikkoja.

Viennin käyttö

• CSS-muuttujat tuottavat :root-lohkon, jossa on esimerkiksi --primary-tint-20 ja --primary-shade-40, valmiina liitettäväksi tyylitiedostoon.
• Tailwind-asetukset (v3) antavat colors-objektin kohtaan theme.extend.colors. Sen jälkeen kirjoitat luokkia, kuten bg-primary-tint-20 tai text-primary-shade-60. DEFAULT sisältää perusvärin, joten myös bg-primary toimii.
• Tailwind @theme (v4) antaa --color-…-muuttujia Tailwind 4:n CSS-ensin-asetuksia varten.
• SCSS-muuttujat ja JSON sopivat muihin koontityökaluihin ja suunnittelutunnisteisiin.

Nimet muunnetaan pieniksi kirjaimiksi ja välilyönnit muuttuvat tavuviivoiksi, joten ”Brand Blue” muuttuu muotoon brand-blue.