Přeskočit na obsah
nastroje.io

Barevné palety

Vyberte paletu a hned ji vidíte na webu, v aplikaci i na mobilu.

Paleta 1

5 barevVýraznáStudenáJednobarevná

Zamknuté barvy zůstávají při míchání na místě.

ZnačkaPřihlásit
Novinka

Postavte web, který lidem utkví

Rychlé, přehledné a v barvách, které spolu ladí. Tahle paleta ukazuje, jak by web mohl vypadat.

Začít zdarmaVíce informací
Přehledná kartaPlocha, text a akcenty z palety pohromadě.

Barvy palety

Klepnutím na hodnotu ji zkopírujete.
  • Barva 1
    Na bílé1.1NevyhovujeNa černé19.3AAA
  • Barva 2
    Na bílé1.0NevyhovujeNa černé21.0AAA
  • Barva 3
    Na bílé10.4AAANa černé2.0Nevyhovuje
  • Barva 4
    Na bílé5.2AANa černé4.1AA velký text
  • Barva 5
    Na bílé2.1NevyhovujeNa černé9.8AAA

Paleta v kódu

:root {
  --color-1: #eff6ff;
  --color-2: #ffffff;
  --color-3: #1e3a8a;
  --color-4: #2563eb;
  --color-5: #38bdf8;
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #1e3a8a;
  --primary: #2563eb;
  --accent: #1e3a8a;
}

Kromě pěti barev přidáváme i role odvozené z palety: pozadí, plochu, text, hlavní a akcentovou barvu.

Knihovna palet

112 palet

Více o nástroji Barevné palety

Barevné palety s živým náhledem

Vybrat barvy na web nebo do prezentace je snazší, když je hned vidíte v akci. Vybranou paletu tady ukazujeme přes celou šířku, k tomu na ukázkovém webu, v aplikaci i na mobilu. Poznáte tak, jak spolu barvy ladí v nadpisu, tlačítku i na kartě, ne jen jako pruhy vedle sebe.

Jak palety používat

Tlačítkem Zamíchat nebo mezerníkem dostanete novou paletu, zámek u barvy ji při míchání podrží na místě. V knihovně dole si můžete palety filtrovat podle nálady, tedy jestli je světlá, tmavá, pastelová nebo zemitá, a hledat podle konkrétní barvy: stačí kus HEX kódu, třeba 2563eb.

Klepnutím na barvu zkopírujete její HEX kód, v rozboru pod náhledem najdete i zápisy RGB, HSL, HSV a CMYK. U každé barvy je kontrast vůči bílé a černé i stupeň podle WCAG, takže hned víte, jestli na ní bude text čitelný.

Celou paletu si můžete odnést jako proměnné CSS, konfiguraci Tailwindu, proměnné SCSS nebo JSON. Kromě pěti barev v ní najdete i role odvozené z palety: pozadí, plochu, text, hlavní a akcentovou barvu. Paleta se propisuje do adresy, takže odkaz na ni můžete rovnou poslat kolegovi, a stáhnout ji jde i jako obrázek PNG.

Časté otázky

Jak náhled pozná, která barva je která?

Z barev palety si náhled vybere nejsvětlejší jako pozadí, nejtmavší (nebo černou či bílou pro čitelnost) jako text a nejsytější barvy jako hlavní a akcent. Díky tomu funguje i paleta, která role sama neurčuje.

Co znamená stupeň AA a AAA u kontrastu?

Jsou to stupně přístupnosti podle WCAG. Na běžný text potřebujete poměr aspoň 4,5 : 1, což je stupeň AA, přísnější AAA znamená 7 : 1. Poměr od 3 : 1 stačí jen na velký text, tedy od 18 bodů nebo tučný od 14 bodů.

Můžu palety použít zdarma?

Ano. Jde o konkrétní barevné kódy, ty nepodléhají licenci. Zkopírujte je a použijte ve svém projektu, jak potřebujete.

Jde si upravit vlastní barvu?

Tady vybíráte z hotových palet. Když chcete konkrétní odstín doladit a zjistit jeho hodnoty, použijte barevné kolo.

Podobné nástroje