Generátor farebných harmónií
Technické podrobnosti
Ako funguje generátor farebných harmónií
Čo nástroj robí
Generátor farebných harmónií vypočíta matematicky súvisiace sady farieb z jedného základného odtieňa: komplementárne, analogické, triadické, tetradické, štvorcové, delené komplementárne, monochromatické a odtiene. Každá paleta sa zobrazuje s hodnotami HEX, RGB a HSL, ktoré môžete jedným kliknutím skopírovať a použiť priamo v CSS alebo v dizajnových tokenoch.
Bežné prípady použitia pre vývojárov
Dizajnéri prototypujú značkové palety skúmaním toho, ako sa odtieň značky mení pri rôznych pravidlách harmónie. Frontend vývojári odvodzujú akcentové farby pre tlačidlá, upozornenia a odznaky z primárnej farby značky. Inžinieri dátovej vizualizácie vyberajú kategóriové sady farieb, ktoré pôsobia zámerne, no zostávajú rozlíšiteľné. Produktoví manažéri porovnávajú možnosti paliet pri hodnotení dizajnových návrhov bez potreby špecializovaných dizajnových nástrojov.
Dátové formáty, typy alebo varianty
K dispozícii je osem schém: Komplementárna (základ + 180°), Analogická (základ ± 30°), Triadická (3 farby vzdialené o 120°), Tetradická (obdĺžniková 4-farebná), Štvorcová (4 farby vzdialené o 90°), Delená komplementárna (základ + ±150°), Monochromatická (rovnaký odtieň pri rôznej svetlosti 10–90 %) a Odtiene (rovnaký odtieň, od tmavej po svetlú). Každá farba obsahuje svoje reprezentácie HEX, RGB a HSL spolu so štítkom roly.
Bežné úskalia a okrajové prípady
Harmónie odvodené z extrémne desaturovaných alebo takmer sivých základných farieb vyzerajú naprieč schémami nerozoznateľne — začnite so saturovaným základom. Veľmi saturované základy v kombinácii s triadickými alebo tetradickými schémami môžu vytvoriť výrazné, ťažko vyvážiteľné palety; pre použitie v UI zvážte zníženie saturácie. Niektoré kombinácie odvodené z harmónií nespĺňajú kontrast podľa WCAG — pred nasadením vždy overte dvojice text/pozadie v nástroji Color Contrast.
Kedy použiť tento nástroj vs. kód
Nástroj v prehliadači použite na ideáciu, rýchle skúmanie a dizajnovú revíziu. V kóde vám knižnice ako chroma.js, colord alebo culori umožnia počítať harmónie programovo, integrovať ich do build pipeline dizajnových tokenov a kombinovať matematiku harmónií s percepčne uniformnými farebnými priestormi, ako je Oklch, pre rovnomernejšie vyzerajúce palety.