Generátor farebných paliet

Ako používať generátor farebných paliet

1. Vyber Základnú farbu farebnou vzorkou alebo zadaj ľubovoľný kód do poľa Kód základnej farby (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), názov v CSS…).
2. Vyber Harmóniu: Komplementárna, Analogická, Triadická, Rozdelená komplementárna, Tetradická (obdĺžnik), Štvorec alebo Monochromatická.
3. Vyber Farebné koleso: HSL (klasické) alebo OKLCH (percepčné). Paleta sa aktualizuje pri každej zmene možností; obnoví ju aj Generovať paletu.
4. Jednu farbu skopíruješ tlačidlom Kopírovať pod jej vzorkou, alebo vyber formát v Exportovať ako (Zoznam HEX, Premenné CSS, Premenné SCSS, Pole JSON alebo Farby Tailwind) a pomocou Kopírovať či Stiahnuť získaš celú paletu.

Každá vzorka zobrazuje svoj kód HEX čiernou alebo bielou, podľa lepšieho kontrastu, a svoju polohu voči základnej farbe (napríklad +120°).

Nástroj funguje v tvojom prehliadači. Nič, čo zadáš, sa neodosiela na server.

Farebné harmónie

Farebné harmónie sú pevné uhly na farebnom kolese. Nástroj vychádza z odtieňa základnej farby, otáča odtieň a zachováva sýtosť a svetlosť základu.

• Komplementárna (0°, 180°): protiľahlá farba. Maximálny kontrast, vhodný napríklad pre tlačidlo výzvy na akciu na pozadí hlavnej farby značky.
• Analogická (−60°, −30°, 0°, +30°, +60°): susedia na kolese. Pokojné, prirodzené kombinácie, ktoré dobre fungujú pre pozadia a ilustrácie.
• Triadická (0°, 120°, 240°): tri rovnomerne rozložené odtiene. Živá a vyvážená; zvyčajne jedna farba dominuje a ďalšie dve sú akcenty.
• Rozdelená komplementárna (0°, 150°, 210°): dvaja susedia komplementu. Silný kontrast s menším napätím než čistá komplementárna dvojica.
• Tetradická (obdĺžnik) (0°, 60°, 180°, 240°): dve komplementárne dvojice. Bohaté palety, ktoré potrebujú jednu dominantnú farbu, aby zostali súdržné.
• Štvorec (0°, 90°, 180°, 270°): štyri rovnomerne rozložené odtiene.
• Monochromatická: jeden odtieň v piatich stupňoch svetlosti, od tmavého po svetlý. Ideálna pre stavy rozhrania, grafy a decentné návrhy.

Koleso HSL alebo OKLCH?

Koleso HSL (klasické) je tradičné koleso, ktoré používa väčšina dizajnérskych nástrojov a návodov. Jeho nevýhodou je, že rovnaké uhly nevyzerajú rovnako jasne: žltá pri 60° vyzerá oveľa svetlejšie než modrá pri 240° s rovnakou svetlosťou HSL.

Koleso OKLCH (percepčné) otáča odtieň v modeli Oklab, ktorý je navrhnutý tak, aby svetlosť vyzerala konzistentne. Palety z neho majú farby s podobnou vizuálnou váhou, čo pomáha pri dostupnom kontraste. Niektoré otočené farby môžu padnúť mimo toho, čo dokáže obrazovka zobraziť; nástroj potom mierne zníži ich sýtosť (chroma), aby sa dali zobraziť.

Používanie exportovanej palety

Premenné CSS vytvoria blok :root s --color-1, --color-2…, ktorý môžeš vložiť do štýlov. Premenné SCSS dajú riadky $color-1: …;, Pole JSON zoznam reťazcov HEX pre skripty a Farby Tailwind objekt colors s kľúčmi 100, 200, 300…, ktorý vložíš do konfigurácie Tailwindu.

Pred nasadením skontroluj kontrast textu: harmónia zaručuje príjemné odtiene, nie čitateľný text. Pre bežný text používaj tmavé alebo svetlé neutrálne farby a sýte farby palety si nechaj na akcenty, tlačidlá a grafiku.