Generator svjetlijih i tamnijih nijansi

Kako koristiti generator svjetlijih i tamnijih nijansi

1. Odaberi Osnovnu boju uzorkom ili upiši vrijednost u Kod boje: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) ili CSS naziv poput teal.
2. Odaberi Korak: 5 %, 10 %, 20 % ili 25 %. Uz 10 % dobivaš svjetlije nijanse na 10 %, 20 % … 100 % i jednak broj tamnijih.
3. Odaberi kako Miješaj u: OKLCH (perceptivno) ili sRGB (klasično). Oba retka ažuriraju se odjednom: Svjetlije nijanse (pomiješano s bijelom) i Tamnije nijanse (pomiješano s crnom), svaki polazeći od osnovne boje.
4. Klikni Kopiraj ispod bilo kojeg uzorka da kopiraš njegov HEX kod.
5. Pod Izvezi kao odaberi CSS varijable, Tailwind konfiguracija (v3), Tailwind @theme (v4), SCSS varijable ili JSON, postavi Naziv poput primary ili brand, a zatim Kopiraj ili Preuzmi kod.

Alat radi u tvom pregledniku. Ništa što upišeš ne šalje se na poslužitelj.

Svjetlije nijanse, tamnije nijanse i tonovi

U teoriji boja tint je boja pomiješana s bijelom, shade je boja pomiješana s crnom, a ton je boja pomiješana sa sivom. Postotak kaže koliko je bijele ili crne dodano: tint od 30 % je 70 % osnovne boje i 30 % bijele. Na 100 % stižeš do čiste bijele ili čiste crne, zato je zadnji uzorak svakog retka uvijek #FFFFFF ili #000000; označava kraj ljestvice.

Svjetlije i tamnije nijanse najbrži su način da iz jedne boje brenda izgradiš dosljednu ljestvicu: svijetle pozadine i stanja prelaska mišem iz svjetlijih nijansi, obrubi, stanja pritiska i tamni tekst iz tamnijih.

Miješanje u OKLCH-u ili sRGB-u

sRGB (klasično) izravno miješa vrijednosti crvene, zelene i plave. Tako radi većina starijih generatora i podudara se s CSS-om color-mix(in srgb, …). Formula za svjetliju nijansu jednostavno je kanal + (255 − kanal) × p, a za tamniju kanal × (1 − p). Predvidljivo je, ali koraci nisu perceptivno ravnomjerni: plave pri posvjetljivanju teže prema ljubičastoj, a tamne nijanse često izgledaju prljavo.

OKLCH (perceptivno) miješa u prostoru boja OKLCH koji je 2020. osmislio Björn Ottosson, kao CSS color-mix(in oklch, …). Svjetlina, kroma i ton interpoliraju se zasebno. Bijela i crna nemaju ton, pa se ton osnovne boje zadržava do kraja, a svaki korak mijenja svjetlinu za vizualno sličan iznos. Boje koje bi pale izvan sRGB gamuta vraćaju se smanjenjem krome, a ne rezanjem kanala, pa ton ostaje stabilan. Za dizajnerske sustave to obično daje čišće i ravnomjernije ljestvice.

Korištenje izvoza

• CSS varijable daju blok :root poput --primary-tint-20 i --primary-shade-40, spreman za lijepljenje u stilsku datoteku.
• Tailwind konfiguracija (v3) daje objekt colors za theme.extend.colors; zatim pišeš klase poput bg-primary-tint-20 ili text-primary-shade-60. DEFAULT sadrži osnovnu boju pa radi i bg-primary.
• Tailwind @theme (v4) daje varijable --color-… za konfiguraciju Tailwinda 4 koja počinje od CSS-a.
• SCSS varijable i JSON pristaju drugim alatima za izgradnju i dizajnerskim tokenima.

Nazivi se pretvaraju u mala slova, a razmaci u crtice, pa „Brand Blue“ postaje brand-blue.