Konverze barev
#e24826
≈ Cinnabar
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.
Split-komplementární
Jedna barva a dvě barvy sousedící s jejím doplňkem, +/-30 stupňů odstínu od hodnoty opačné k hlavní barvě. Výrazná jako přímý doplněk, ale všestrannější.
Triadický
Tři barvy rovnoměrně rozmístěné podél barevného kruhu, každá s odstupem 120 stupňů odstínu. Nejlepší je nechat jednu barvu dominovat a ostatní použít jako akcenty.
Analogický
Tři barvy se stejnou svítivostí a sytostí s odstíny, které sousedí na barevném kruhu a jsou od sebe vzdáleny 30 stupňů. Plynulé přechody.
Monochromatický
Tři barvy stejného odstínu s hodnotami jasu +/-50 %. Jemné a rafinované.
Tetradický
Dvě sady doplňkových barev, oddělené 60 stupni 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
Pokročilá kontrola kontrastu
Jemné doladění pomocí posuvníků, více náhledů a dalších funkcí
Každý je génius. Ale když budete soudit rybu podle její schopnosti lézt na strom, bude celý život věřit, že je hloupá.