Generátor a Color Picker kódů barev

Generuj kódy barev, variace, harmonie a kontroluj kontrastní poměry.

Převod barev

HEX

#b400ff

Electric Violet

HEX
#b400ff
HSL
282, 100, 50
RGB
180, 0, 255
XYZ
37, 17, 96
CMYK
29, 100, 0, 0
LUV
48,51,-122
LAB
48, 88, -81
HWB
282, 0, 0

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.

#b400ff
Nejlepší pro: Vysoký dopad na design, CTA, loga

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ší.

Nejlepší pro: Živé, ale vyvážené rozvržení

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.

Nejlepší pro: Hravé, energické návrhy

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.

Nejlepší pro: Přírodou inspirované, uklidňující rozhraní

Monochromatický

Tři barvy stejného odstínu s hodnotami luminance +/-50 %. Jemné a rafinované.

Nejlepší pro: Minimalistické, sofistikované návrhy

Tetradický

Dvě sady komplementárních barev, oddělené o 60 stupňů odstínu.

Nejlepší pro: Bohaté, rozmanité barevné schémata

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
1.00
Fail
Velmi špatné
Malý text
✖︎
Velký text
✖︎
Standardy WCAG
AA:Minimální poměr kontrastu 4,5:1 pro běžný text a 3:1 pro velký text. Požadováno pro většinu webových stránek.
AAA:Vylepšený poměr kontrastu 7:1 pro běžný text a 4,5:1 pro velký text. Doporučeno pro optimální přístupnost.
Nedostatečný kontrast pro všechny velikosti textu - nesplňuje 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á.

- Albert Einstein

Technické formáty

Praktické formáty

Analýza barev

Simulátor slepoty

Kreativní aspekty