Světlejší a tmavší odstíny barvy

Jak používat generátor světlejších a tmavších odstínů

1. Vyber Základní barvu pomocí vzorku, nebo napiš hodnotu do pole Kód barvy: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) nebo název v CSS, například teal.
2. Vyber Krok: 5 %, 10 %, 20 % nebo 25 %. S krokem 10 % získáš světlejší odstíny na 10 %, 20 % … 100 % a stejný počet tmavších odstínů.
3. Vyber, v čem se má Míchat: OKLCH (percepční) nebo sRGB (klasický). Obě řady se aktualizují najednou: Světlejší odstíny (příměs bílé) a Tmavší odstíny (příměs černé), každá začíná od základní barvy.
4. Kliknutím na Kopírovat pod libovolným vzorkem zkopíruješ jeho kód HEX.
5. V části Exportovat jako vyber Proměnné CSS, Konfigurace Tailwind (v3), Tailwind @theme (v4), Proměnné SCSS nebo JSON, nastav Název, například primary nebo brand, a kód Kopírovat nebo Stáhnout.

Nástroj funguje ve tvém prohlížeči. Nic, co zadáš, se neodesílá na server.

Světlé odstíny, tmavé odstíny a tóny

V nauce o barvách je světlý odstín (tint) barva smíchaná s bílou, tmavý odstín (shade) barva smíchaná s černou a tón barva smíchaná se šedou. Procento říká, kolik bílé nebo černé se přidá: světlý odstín 30 % je 70 % základní barvy a 30 % bílé. Na 100 % dosáhneš čisté bílé nebo čisté černé, proto je poslední vzorek každé řady vždy #FFFFFF nebo #000000; označuje konec škály.

Světlejší a tmavší odstíny jsou nejrychlejší způsob, jak z jediné barvy značky vytvořit konzistentní škálu: světlá pozadí a stavy po najetí z světlejších odstínů, okraje, stisknuté stavy a tmavý text z tmavších.

Míchání v OKLCH, nebo sRGB?

sRGB (klasický) míchá hodnoty červené, zelené a modré přímo. Dělá to většina starších generátorů a odpovídá to CSS color-mix(in srgb, …). Vzorec pro světlý odstín je prostě kanál + (255 − kanál) × p a pro tmavý kanál × (1 − p). Je předvídatelný, ale kroky nejsou percepčně rovnoměrné: modré odstíny se při zesvětlování posouvají k fialové a tmavé odstíny často vypadají kalně.

OKLCH (percepční) míchá v barevném prostoru OKLCH, který navrhl Björn Ottosson v roce 2020, stejně jako CSS color-mix(in oklch, …). Světlost, chroma a odstín se interpolují zvlášť. Bílá a černá nemají odstín, takže se základní odstín zachovává po celou dobu a každý krok mění světlost o vizuálně podobnou hodnotu. Barvy, které by padly mimo gamut sRGB, se vracejí snížením chromy, ne ořezáním kanálů, takže odstín zůstává stabilní. Pro designové systémy to obvykle dává čistší a rovnoměrnější škály.

Použití exportu

• Proměnné CSS vytvoří blok :root, například --primary-tint-20 a --primary-shade-40, připravený k vložení do stylopisu.
• Konfigurace Tailwind (v3) dává objekt colors pro theme.extend.colors; pak píšeš třídy jako bg-primary-tint-20 nebo text-primary-shade-60. DEFAULT drží základní barvu, takže funguje i bg-primary.
• Tailwind @theme (v4) dává proměnné --color-… pro konfiguraci Tailwindu 4 postavenou na CSS.
• Proměnné SCSS a JSON se hodí pro jiné sestavovací nástroje a designové tokeny.

Názvy se převádějí na malá písmena a mezery se mění na pomlčky, takže „Brand Blue“ se stane brand-blue.