Generator tinti i sjena

Kako koristiti generator tinti i sjena

1. Odaberi Osnovna boja uzorkom ili upiši vrijednost u Kôd 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 % dobijaš tinte na 10 %, 20 % … 100 % i isti broj sjena.
3. Odaberi kako da Miješaj u: OKLCH (perceptualni) ili sRGB (klasični). Oba reda se ažuriraju odjednom: Tinte (pomiješane s bijelom) i Sjene (pomiješane s crnom), svaki počinje od osnovne boje.
4. Klikni Kopiraj ispod bilo kojeg uzorka da kopiraš njegov HEX kôd.
5. U dijelu Izvezi kao odaberi CSS varijable, Tailwind konfiguracija (v3), Tailwind @theme (v4), SCSS varijable ili JSON, postavi Naziv poput primary ili brand, pa Kopiraj ili Preuzmi kôd.

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

Tinte, sjene i tonovi

U teoriji boja tinta je boja pomiješana s bijelom, sjena je boja pomiješana s crnom, a ton je boja pomiješana sa sivom. Postotak kaže koliko je bijele ili crne dodano: tinta od 30 % je 70 % osnovne boje i 30 % bijele. Na 100 % dolaziš do čiste bijele ili čiste crne, zato je posljednji uzorak svakog reda uvijek #FFFFFF ili #000000; on označava kraj skale.

Tinte i sjene su najbrži način da iz jedne boje brenda izgradiš dosljednu skalu: svijetle pozadine i stanja prelaska mišem iz tinti, okvire, stanja pritiska i tamni tekst iz sjena.

OKLCH ili sRGB miješanje?

sRGB (klasični) miješa vrijednosti crvene, zelene i plave direktno. To rade većina starijih generatora i poklapa se s CSS-om color-mix(in srgb, …). Formula za tintu je jednostavno kanal + (255 − kanal) × p, a za sjenu kanal × (1 − p). Predvidljiv je, ali koraci nisu perceptualno ravnomjerni: plave boje pri posvjetljivanju teže ljubičastoj, a tamne sjene često izgledaju mutno.

OKLCH (perceptualni) miješa u OKLCH prostoru boja koji je 2020. osmislio Björn Ottosson, kao CSS color-mix(in oklch, …). Svjetlina, hroma 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 vizuelno sličan iznos. Boje koje bi pale izvan sRGB gamuta vraćaju se smanjivanjem hrome, a ne odsijecanjem kanala, pa ton ostaje stabilan. Za dizajn sisteme to obično daje čistije i ravnomjernije skale.

Korištenje izvoza

• CSS varijable daju blok :root poput --primary-tint-20 i --primary-shade-40, spreman za lijepljenje u stilski list.
• Tailwind konfiguracija (v3) daje objekat colors za theme.extend.colors; zatim pišeš klase poput bg-primary-tint-20 ili text-primary-shade-60. DEFAULT drži osnovnu boju, pa radi i bg-primary.
• Tailwind @theme (v4) daje varijable --color-… za konfiguraciju zasnovanu na CSS-u u Tailwindu 4.
• SCSS varijable i JSON odgovaraju drugim alatima za izgradnju i dizajn tokenima.

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