Generator svetlejših in temnejših odtenkov

Kako uporabljati generator svetlejših in temnejših odtenkov

1. Izberi Osnovna barva z vzorcem ali vpiši vrednost v Koda barve: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) ali CSS-ime, kot je teal.
2. Izberi Korak: 5 %, 10 %, 20 % ali 25 %. Pri 10 % dobiš svetlejše odtenke pri 10 %, 20 % … 100 % in enako število temnejših.
3. Izberi, kako Mešaj v: OKLCH (zaznavno) ali sRGB (klasično). Obe vrstici se posodobita hkrati: Svetlejši odtenki (pomešani z belo) in Temnejši odtenki (pomešani s črno), vsaka se začne pri osnovni barvi.
4. Klikni Kopiraj pod katerim koli vzorcem, da kopiraš njegovo kodo HEX.
5. Pod Izvozi kot izberi Spremenljivke CSS, Konfiguracija Tailwind (v3), Tailwind @theme (v4), Spremenljivke SCSS ali JSON, nastavi Ime, kot je primary ali brand, nato kodo Kopiraj ali Prenesi.

Orodje deluje v tvojem brskalniku. Nič, kar vneseš, se ne pošlje na strežnik.

Svetlejši odtenki, temnejši odtenki in toni

V teoriji barv je svetlejši odtenek (angleško tint) barva, pomešana z belo, temnejši odtenek (angleško shade) barva, pomešana s črno, ton pa barva, pomešana s sivo. Odstotek pove, koliko bele ali črne je dodano: 30-odstotni svetlejši odtenek je 70 % osnovne barve in 30 % bele. Pri 100 % dosežeš čisto belo ali čisto črno, zato je zadnji vzorec vsake vrstice vedno #FFFFFF ali #000000; označuje konec lestvice.

Svetlejši in temnejši odtenki so najhitrejši način za gradnjo skladne lestvice iz ene same barve blagovne znamke: svetla ozadja in stanja ob lebdenju iz svetlejših odtenkov, obrobe, stanja ob pritisku in temno besedilo iz temnejših.

Mešanje v OKLCH ali sRGB?

sRGB (klasično) neposredno meša vrednosti rdeče, zelene in modre. To počne večina starejših generatorjev in se ujema s CSS color-mix(in srgb, …). Formula za svetlejši odtenek je preprosto kanal + (255 − kanal) × p, za temnejšega kanal × (1 − p). Je predvidljivo, vendar koraki niso zaznavno enakomerni: modre barve se ob posvetlitvi nagibajo proti vijolični, temni odtenki pa so pogosto videti blatni.

OKLCH (zaznavno) meša v barvnem prostoru OKLCH, ki ga je leta 2020 zasnoval Björn Ottosson, kot CSS color-mix(in oklch, …). Svetlost, kroma in odtenek se interpolirajo ločeno. Bela in črna nimata odtenka, zato se osnovni odtenek ohrani vse do konca, vsak korak pa spremeni svetlost za vizualno podobno vrednost. Barve, ki bi padle zunaj gamuta sRGB, se vrnejo z zmanjšanjem krome, ne z obrezovanjem kanalov, zato odtenek ostane stabilen. Za oblikovalske sisteme to običajno da čistejše in bolj enakomerne lestvice.

Uporaba izvoza

• Spremenljivke CSS ustvarijo blok :root, kot sta --primary-tint-20 in --primary-shade-40, pripravljen za lepljenje v slogovno datoteko.
• Konfiguracija Tailwind (v3) da objekt colors za theme.extend.colors; nato pišeš razrede, kot sta bg-primary-tint-20 ali text-primary-shade-60. DEFAULT vsebuje osnovno barvo, zato deluje tudi bg-primary.
• Tailwind @theme (v4) da spremenljivke --color-… za konfiguracijo Tailwind 4, ki temelji na CSS.
• Spremenljivke SCSS in JSON ustrezajo drugim orodjem za gradnjo in oblikovalskim žetonom.

Imena se pretvorijo v male črke, presledki pa v vezaje, zato »Brand Blue« postane brand-blue.