Generátor Barevné Palety

Vytvářejte harmonické palety na základě teorie barev — komplementární, triadická, analogická a další

Podíl:
Click any color swatch to copy its hex code
Copied!

Proč používat generátor barevné palety?

Výběr harmonických barev vyžaduje znalost teorie barev. Náš generátor používá HSL matematiku k automatickému výpočtu harmonických palet z libovolné základní barvy, což umožňuje designérům a vývojářům vytvářet profesionální barevná schémata během sekund.

🎨

6 harmonických módů

Komplementární, triadická, analogická, dělená komplementární, tetradická, monochromatické odstíny

👁️

Náhled vzorků barev

Klikněte na vzorek barvy pro kopírování hex kódu přímo do schránky

📋

Export CSS proměnných

Exportujte celou paletu jako vlastní CSS vlastnosti — stačí vložit do stylopisu

Vytvoření palety ve 3 krocích

1

Vyberte základní barvu

Použijte výběr barvy nebo zadejte hex kód pro nastavení barvy vaší značky nebo výchozí barvy

2

Vyberte typ harmonie

Vyberte komplementární, triadickou, analogickou nebo jinou harmonii, která odpovídá vašemu designu

3

Zkopírujte a použijte

Klikněte na vzorek barvy pro kopírování hex kódu nebo zkopírujte celou paletu pomocí 'Kopírovat jako CSS proměnné'

Případy použití barevných palet

🌐

Webový design

Vytvořte kompletní barevný systém pro webovou stránku na základě primární barvy značky

🏢

Identita značky

Vyviňte profesionální paletu značky s primárními, sekundárními a akcentními barvami

📱

UI/UX design

Vytvořte přístupné, vizuálně konzistentní barvy pro tlačítka, text a pozadí aplikace

📊

Datová vizualizace

Generujte odlišné kategoriální barvy pro grafy, tabulky a analytické dashboardy

Nejlepší postupy pro barevný design

✓ Ověřte barevný kontrast (WCAG)

Ujistěte se, že páry textu/pozadí splňují poměr kontrastu WCAG AA (4,5:1 pro normální text).

✓ Omezte paletu

Držte se 3-5 barev: 1 primární, 1 sekundární, 1-2 akcentní, neutrální. Příliš mnoho barev vytváří vizuální šum.

✓ Zvažte psychologii barev

Modrá=důvěra/profesionalita, zelená=růst/úspěch, červená=naléhavost/energie, žlutá=optimismus.

✓ Testujte v tmavém režimu

Upravte hodnoty světlosti pro vytvoření variant tmavého režimu. Čistá černá (#000) nebo bílá (#fff) často nejsou ideální.

❓ Nejčastější dotazy

Co je komplementární barevné schéma?
Komplementární barvy jsou přímo naproti sobě na barevném kole (modrá a oranžová, červená a zelená atd.). Vytvářejí vysoký kontrast a vizuální energii — ideální pro CTA tlačítka a akcentní prvky.
Kdy použít analogické barevné schéma?
Analogická schémata používají 3 sousední barvy na barevném kole. Vytvářejí harmonický a klidný design s nízkým kontrastem — ideální pro pozadí, gradienty a jemné UI designy.
Jaký je rozdíl mezi HSL, RGB a Hex?
Všechny tři reprezentují stejnou barvu v různých formátech. Hex (#6366f1) se používá v CSS. RGB (99, 102, 241) udává červenou/zelenou/modrou. HSL (237°, 84%, 67%) používá odstín, sytost a světlost.
Jak vytvořit barevnou paletu pro tmavý režim?
V tmavém režimu výrazně snižte hodnoty světlosti (např. L:60% → L:30%) a prohoďte role textu/pozadí. Zachovejte podobné hodnoty odstínu a sytosti, upravte světlost pro čitelnost na tmavém pozadí.