Generátor barevné palety
Generátor barevné palety vytvoří z libovolné základní barvy paletu 5 barev podle harmonií teorie barev — komplementární, triadické, analogické, rozdělené komplementární, tetradické nebo monochromatické — a exportuje ji jako CSS custom properties.
O tomto nástroji
Generátor barevné palety vytvoří z libovolné základní barvy paletu 5 barev podle harmonií teorie barev — komplementární, triadické, analogické, rozdělené komplementární, tetradické nebo monochromatické — a exportuje ji jako CSS custom properties.
Jak ho použít
- Vyber základní barvu pomocí výběru barev.
- Zvol typ harmonie, například komplementární nebo triadickou.
- Prohlédni si pět vygenerovaných vzorků.
- Klikni na Kopírovat jako CSS proměnné a vlož paletu do svého stylesheetu.
Dobré vědět
- Komplementární barvy leží na barevném kole 180° od sebe; triadické barvy jsou rozmístěny po 120°.
- Analogické palety používají sousední odstíny (asi 30° od sebe) a obvykle působí klidně a jednotně.
- Rozdělená komplementární harmonie spojuje základní odstín se dvěma odstíny po obou stranách jeho doplňku (±30°), což dává kontrast s menším napětím.
- Monochromatické palety zachovávají jeden odstín a mění jen sytost a světlost.
- Generátor pracuje v HSL, kde lze otáčet odstínem beze změny světlosti barvy.
Běží celý ve vašem prohlížeči — nic, co zadáte, se nenahrává ani neukládá.
Časté dotazy
Co je komplementární barevná paleta?
Komplementární paleta spojuje odstín s tím, který leží přímo naproti na barevném kole (180° daleko), například modrou a oranžovou. Dává nejsilnější kontrast ze všech harmonií.
Kolik barev by měla mít paleta webu?
Většina rozhraní používá jednu primární barvu, jeden či dva akcenty a sadu neutrálních barev. Pětibarevná harmonie je dobrý výchozí bod, který můžeš zúžit nebo rozšířit o světlejší a tmavší odstíny.
Jaký je rozdíl mezi triadickou a tetradickou paletou?
Triadická používá tři odstíny rovnoměrně rozmístěné po 120°. Tetradická používá čtyři odstíny po 90°, které tvoří na kole čtverec — je bohatší, ale hůř se vyvažuje.
Můžu paletu použít v CSS nebo Tailwindu?
Ano. Zkopíruj paletu jako CSS custom properties a odkazuj na ně pomocí var(), nebo vlož hex hodnoty do barev svého Tailwind motivu.