Převod barev
#ff69b4
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 design 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žij harmonie k brainstormingu barevných kombinací, které spolu dobře fungují.
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č je to důležité
Barevné harmonie vytvářejí rovnováhu a vyvolávají specifické emoce ve tvých designech.
Komplementární
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 saturace 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á.