Odstíny a tóny
Generátor odstínů vytváří světlejší varianty (smíchané s bílou) a tmavší varianty (smíchané s černou) libovolné základní barvy v 5, 10 nebo 20 krocích a vypíše je jako CSS proměnné.
O tomto nástroji
Generátor odstínů vytváří světlejší varianty (smíchané s bílou) a tmavší varianty (smíchané s černou) libovolné základní barvy v 5, 10 nebo 20 krocích a vypíše je jako CSS proměnné.
Jak ho použít
- Vyber základní barvu.
- Zvol 5, 10 nebo 20 kroků.
- Kliknutím na libovolný vzorek zkopíruješ jeho hex hodnotu.
- Kliknutím na Kopírovat jako CSS proměnné exportuješ celou škálu.
Dobré vědět
- Tint je barva smíchaná s bílou; shade je barva smíchaná s černou.
- Generátor míchá v rovnoměrných krocích RGB, takže každý krok změní barvu o stejnou hodnotu.
- Design systémy jako Tailwind používají škálu 50–900 složenou ze světlejších a tmavších odstínů každé barvy značky.
- U barev textu vzatých ze škály kontroluj kontrast, protože prostřední kroky na bílé často nesplní WCAG AA.
Běží celý ve vašem prohlížeči — nic, co zadáte, se nenahrává ani neukládá.
Časté dotazy
Jaký je rozdíl mezi tintem a shadem?
Tint barvu zesvětlí přidáním bílé; shade ji ztmaví přidáním černé. Tón (tone) přidává šedou.
Kolik odstínů by měla mít barva v design systému?
Běžně kolem 10 kroků, například 50, 100 … 900 v Tailwindu. To dává dostatečný rozsah pro pozadí, ohraničení, text i stavy při najetí myší.
Jak škálu použiju v CSS?
Zkopíruj škálu jako custom properties a odkazuj na ni pomocí var(--color-name), například u pozadí, ohraničení nebo stavů hover.
Proč některé světlé odstíny vypadají vybledle?
Míchání s bílou snižuje sytost a zároveň zvyšuje světlost. Pro výraznější světlé varianty uprav sytost zvlášť v HSL.