Převod barev
#ca4e4e
≈ Chestnut Rose
Varianty
Účelem této části je přesně vytvořit odstíny (přidaná čistě bílá) a odstíny (přidaná čistě černá) vybrané barvy v krocích po 10 %.
Profesionální tip: Pro stavy najetí a stíny použijte odstíny, pro světla a pozadí odstíny.
Odstíny
Tmavší varianty vytvořené přidáním černé barvy do základní barvy.
Odstíny
Světlejší varianty vytvořené přidáním bílé barvy do základní barvy.
Běžné případy použití
- • Stavy komponent uživatelského rozhraní (hover, aktivní, vypnuté)
- • Vytváření hloubky pomocí stínů a světel
- • Vytváření konzistentních barevných systémů
Tip pro návrhový systém
Tyto varianty tvoří základ ucelené barevné palety. Jejich exportem zachováte konzistenci napříč celým projektem.
Kombinace barev
Každá harmonie má svou vlastní náladu. Pomocí harmonií vymýšlejte barevné kombinace, které spolu dobře fungují.
Jak používat
Kliknutím na libovolnou barvu zkopírujete její hexadecimální hodnotu. Tyto kombinace jsou matematicky ověřeny a vytvářejí vizuální harmonii.
Proč na tom záleží
Barevné harmonie vytvářejí rovnováhu a vyvolávají v návrzích určité emoce.
Doplněk
Barva a její opak na barevném kruhu, +180 stupňů odstínu. Vysoký kontrast.
Dělená komplementární
Barva a dvě sousední barvy, které ji doplňují, +/-30 stupňů odstínu od hodnoty naproti hlavní barvě. Tučné jako přímý doplněk, ale univerzálnější.
Triadické
Tři barvy rovnoměrně rozmístěné podél barevného kruhu, každá s odstínem 120 stupňů od sebe. Nejlepší je nechat jednu barvu dominovat a ostatní použít jako akcenty.
Analogické
Tři barvy stejné svítivosti a sytosti s odstíny, které jsou na barevném kruhu vedle sebe vzdálené 30 stupňů. Plynulé přechody.
Monochromatické
Tři barvy stejného odstínu s hodnotami jasu +/-50 %. Jemné a rafinované.
Tetrádní
Dvě sady doplňkových barev, které od sebe dělí 60 stupňů odstínu.
Zásady teorie barev
Bilance
Použijte jednu dominantní barvu, podpořte ji sekundární a akcentujte střídmě.
Kontrast
Zajistěte dostatečný kontrast pro čitelnost a přístupnost.
Harmonie
Barvy by měly spolupracovat a vytvářet jednotný vizuální dojem.
Kontrola barevného kontrastu
Otestujte kombinace barev, abyste se ujistili, že splňují standardy přístupnosti WCAG pro čitelnost textu.
Barva textu
Barva pozadí
Kontrast
Standardy WCAG
Každý je génius. Ale když budete posuzovat rybu podle toho, jestli umí vylézt na strom, bude celý život věřit, že je hloupá.