Svetlejšie a tmavšie odtiene farby

Ako používať generátor odtieňov

1. Vyber Základnú farbu vzorkou alebo zadaj hodnotu do Kód farby: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) alebo názov v CSS ako teal.
2. Vyber Krok: 5 %, 10 %, 20 % alebo 25 %. Pri 10 % získaš svetlejšie odtiene na 10 %, 20 % … 100 % a rovnaký počet tmavších odtieňov.
3. Vyber, v čom sa bude Miešať v: OKLCH (percepčne) alebo sRGB (klasicky). Oba riadky sa aktualizujú naraz: Svetlejšie odtiene (zmiešané s bielou) a Tmavšie odtiene (zmiešané s čiernou), každý začína od základu.
4. Kliknutím na Kopírovať pod ľubovoľnou vzorkou skopíruješ jej kód HEX.
5. V časti Exportovať ako vyber Premenné CSS, Konfigurácia Tailwind (v3), Tailwind @theme (v4), Premenné SCSS alebo JSON, nastav Názov, napríklad primary alebo brand, a potom kód Kopírovať alebo Stiahnuť.

Nástroj funguje v tvojom prehliadači. Nič, čo zadáš, sa neodosiela na server.

Svetlejšie odtiene, tmavšie odtiene a tóny

Vo farebnej teórii je tint (svetlejší odtieň) farba zmiešaná s bielou, shade (tmavší odtieň) farba zmiešaná s čiernou a tón farba zmiešaná so sivou. Percento hovorí, koľko bielej alebo čiernej sa pridá: 30 % svetlejší odtieň je 70 % základnej farby a 30 % bielej. Pri 100 % dosiahneš čistú bielu alebo čistú čiernu, preto je posledná vzorka každého riadka vždy #FFFFFF alebo #000000; označuje koniec stupnice.

Svetlejšie a tmavšie odtiene sú najrýchlejší spôsob, ako z jedinej farby značky vytvoriť konzistentnú stupnicu: svetlé pozadia a stavy po prechode myšou zo svetlejších odtieňov, okraje, stlačené stavy a tmavý text z tmavších odtieňov.

Miešanie v OKLCH alebo sRGB?

sRGB (klasicky) mieša hodnoty červenej, zelenej a modrej priamo. Robí to väčšina starších generátorov a zodpovedá CSS color-mix(in srgb, …). Vzorec svetlejšieho odtieňa je jednoducho kanál + (255 − kanál) × p a tmavšieho kanál × (1 − p). Je predvídateľný, no kroky nie sú vnemovo rovnomerné: modré tóny sa pri zosvetľovaní sklonia k fialovej a tmavé odtiene často vyzerajú špinavo.

OKLCH (percepčne) mieša vo farebnom priestore OKLCH, ktorý navrhol Björn Ottosson v roku 2020, rovnako ako CSS color-mix(in oklch, …). Svetlosť, sýtosť a odtieň sa interpolujú osobitne. Biela a čierna nemajú odtieň, takže sa základný odtieň zachová celou cestou a každý krok mení svetlosť o vizuálne podobnú hodnotu. Farby, ktoré by padli mimo gamut sRGB, sa vrátia znížením sýtosti, nie orezaním kanálov, takže odtieň zostane stabilný. Pre dizajnové systémy to zvyčajne dáva čistejšie a rovnomernejšie stupnice.

Použitie exportu

• Premenné CSS vytvoria blok :root ako --primary-tint-20 a --primary-shade-40, pripravený na vloženie do štýlov.
• Konfigurácia Tailwind (v3) dá objekt colors pre theme.extend.colors; potom píšeš triedy ako bg-primary-tint-20 alebo text-primary-shade-60. DEFAULT obsahuje základ, takže funguje aj bg-primary.
• Tailwind @theme (v4) dá premenné --color-… pre konfiguráciu Tailwindu 4 založenú na CSS.
• Premenné SCSS a JSON vyhovujú iným nástrojom na build a dizajnovým tokenom.

Názvy sa prevedú na malé písmená a medzery sa zmenia na pomlčky, takže „Brand Blue“ sa stane brand-blue.