Převod barev
#b400ff
≈ Electric Violet
Variace
Účelem této sekce je přesně vytvořit odstíny (přidáním čisté bílé) a stíny (přidáním čisté černé) vybrané barvy v 10% krocích.
Profesionální tip: Používej stíny pro stavy hover a stíny, odstíny pro zvýraznění a pozadí.
Stíny
Tmavší variace vytvořené přidáním černé k tvé základní barvě.
Odstíny
Světlé variace vytvořené přidáním bílé k tvé základní barvě.
Běžné případy použití
- • Stavy UI komponent (hover, aktivní, deaktivované)
- • Vytváření hloubky pomocí stínů a zvýraznění
- • Budování konzistentních barevných systémů
Tip pro designový systém
Tyto variace tvoří základ soudržné barevné palety. Exportuj je pro udržení konzistence v celém projektu.
Barevné kombinace
Každá harmonie má svou vlastní náladu. Používej harmonie k vymýšlení barevných kombinací, které spolu dobře ladí.
Jak používat
Klikni na jakoukoli barvu pro zkopírování její hex hodnoty. Tyto kombinace jsou matematicky prokázány, že vytvářejí vizuální harmonii.
Proč na tom záleží
Barevné harmonie vytvářejí rovnováhu a vyvolávají specifické emoce v tvých návrzích.
Komplement
Barva a její protiklad na barevném kole, +180 stupňů odstínu. Vysoký kontrast.
Rozdělený komplementární
Barva a dvě sousední k jejímu komplementu, +/-30 stupňů odstínu od hodnoty opačné hlavní barvě. Odvážné jako přímý komplement, ale všestrannější.
Triadický
Tři barvy rovnoměrně rozmístěné na barevném kole, každá 120 stupňů odstínu od sebe. Nejlepší je nechat jednu barvu dominovat a ostatní použít jako akcenty.
Analogické
Tři barvy stejné luminance a sytosti s odstíny, které jsou sousední na barevném kole, 30 stupňů od sebe. Hladké přechody.
Monochromatický
Tři barvy stejného odstínu s hodnotami luminance +/-50 %. Jemné a rafinované.
Tetradický
Dvě sady komplementárních barev, oddělené o 60 stupňů odstínu.
Principy teorie barev
Rovnováha
Použij jednu dominantní barvu, podpoř sekundární a akcentuj střídmě.
Kontrast
Zajisti dostatečný kontrast pro čitelnost a přístupnost.
Harmonie
Barvy by měly spolupracovat na vytvoření jednotného vizuálního zážitku.
Kontrola kontrastu barev
Testuj barevné kombinace, aby splňovaly standardy přístupnosti WCAG pro čitelnost textu.
Barva textu
Barva pozadí
Kontrast
Standardy WCAG
Pokročilý kontrolor kontrastu
Doladění pomocí posuvníků, více náhledů a další
Každý je génius. Ale pokud budeš soudit rybu podle její schopnosti vylézt na strom, prožije celý svůj život v přesvědčení, že je hloupá.