Generátor barevných palet

Jak používat generátor barevných palet

1. Vyber Základní barvu pomocí vzorku barvy, nebo napiš libovolný kód do pole Kód základní barvy (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), název v CSS…).
2. Vyber Harmonii: Komplementární, Analogická, Triadická, Rozdělená komplementární, Tetradická (obdélník), Čtverec nebo Monochromatická.
3. Vyber Barevný kruh: HSL (klasický) nebo OKLCH (percepční). Paleta se aktualizuje při každé změně volby; obnoví ji i Generovat paletu.
4. Jednotlivou barvu zkopíruješ tlačítkem Kopírovat pod jejím vzorkem, nebo vyber formát v poli Exportovat jako (Seznam HEX, Proměnné CSS, Proměnné SCSS, Pole JSON nebo Barvy Tailwind) a celou paletu zkopíruj tlačítkem Kopírovat, případně ji Stáhnout.

Každý vzorek ukazuje kód HEX černě nebo bíle, podle toho, co má lepší kontrast, a svou polohu vůči základní barvě (například +120°).

Nástroj funguje ve tvém prohlížeči. Nic, co zadáš, se neodesílá na server.

Barevné harmonie

Barevné harmonie jsou pevné úhly na barevném kruhu. Nástroj vychází z odstínu základní barvy, otáčí ho a zachovává sytost i světlost základní barvy.

• Komplementární (0°, 180°): protilehlá barva. Maximální kontrast, skvělý například pro tlačítko výzvy k akci na hlavní barvě značky.
• Analogická (−60°, −30°, 0°, +30°, +60°): sousední barvy na kruhu. Klidné, přirozené kombinace, které se hodí na pozadí a ilustrace.
• Triadická (0°, 120°, 240°): tři rovnoměrně rozložené odstíny. Živá a vyvážená; obvykle jedna barva dominuje a další dvě jsou akcenty.
• Rozdělená komplementární (0°, 150°, 210°): dva sousedé komplementární barvy. Silný kontrast s menším napětím než čistá komplementární dvojice.
• Tetradická (obdélník) (0°, 60°, 180°, 240°): dvě komplementární dvojice. Bohaté palety, které potřebují jednu dominantní barvu, aby zůstaly soudržné.
• Čtverec (0°, 90°, 180°, 270°): čtyři rovnoměrně rozložené odstíny.
• Monochromatická: jeden odstín v pěti stupních světlosti od tmavé po světlou. Ideální pro stavy rozhraní, grafy a decentní návrhy.

Kruh HSL, nebo OKLCH?

Kruh HSL (klasický) je tradiční kruh, který používá většina designových nástrojů a návodů. Jeho nevýhodou je, že stejné úhly nevypadají stejně jasně: žlutá na 60° vypadá při stejné světlosti HSL mnohem světleji než modrá na 240°.

Kruh OKLCH (percepční) otáčí odstín v barevném modelu Oklab, který je navržen tak, aby světlost vypadala konzistentně. Palety z něj mají barvy podobné vizuální váhy, což pomáhá s přístupným kontrastem. Některé otočené barvy mohou ležet mimo to, co obrazovka zobrazí; nástroj pak mírně sníží jejich chromu, aby zůstaly zobrazitelné.

Použití exportované palety

Proměnné CSS vytvoří blok :root s --color-1, --color-2… který můžeš vložit do stylopisu. Proměnné SCSS dají řádky $color-1: …;, Pole JSON seznam řetězců HEX pro skripty a Barvy Tailwind objekt colors s klíči 100, 200, 300…, který vložíš do konfigurace Tailwindu.

Před nasazením zkontroluj kontrast textu: harmonie zaručuje příjemné odstíny, ne čitelný text. Pro běžný text použij tmavé nebo světlé neutrály a sytým barvám z palety nech akcenty, tlačítka a grafiku.