Generátor barevných harmonií
Technické detaily
Jak funguje generátor barevných harmonií
Co nástroj dělá
Generátor barevných harmonií vypočítává matematicky související sady barev z jediného základního odstínu: komplementární, analogické, triadické, tetradické, čtvercové, děleně komplementární, monochromatické a odstíny. Každá paleta je vykreslena s hodnotami HEX, RGB a HSL, které můžete jedním kliknutím zkopírovat a použít přímo v CSS nebo v design tokenech.
Běžné případy použití pro vývojáře
Designéři prototypují značkové palety tím, že zkoumají, jak se odstín značky mění podle různých pravidel harmonie. Frontend vývojáři odvozují akcentní barvy pro tlačítka, upozornění a štítky z primární barvy značky. Inženýři datové vizualizace vybírají kategoriální sady barev, které působí záměrně, ale zůstávají rozlišitelné. Produktoví manažeři porovnávají možnosti palet při hodnocení návrhů designu, aniž by potřebovali specializované designové nástroje.
Datové formáty, typy nebo varianty
K dispozici je osm schémat: Komplementární (základ + 180°), Analogické (základ ± 30°), Triadické (3 barvy vzdálené o 120°), Tetradické (obdélníkové 4barvové), Čtvercové (4 barvy vzdálené o 90°), Děleně komplementární (základ + ±150°), Monochromatické (stejný odstín s různou světlostí 10–90 %) a Odstíny (stejný odstín, od tmavé po světlou). Každá barva obsahuje své reprezentace HEX, RGB a HSL spolu se štítkem role.
Běžné nástrahy a okrajové případy
Harmonie odvozené z extrémně desaturovaných nebo téměř šedých základních barev vypadají napříč schématy nerozlišitelně — začněte se saturovaným základem. Vysoce saturované základy v kombinaci s triadickými nebo tetradickými schématy mohou vytvářet křiklavé, obtížně vyvážitelné palety; pro použití v UI zvažte snížení saturace. Některé kombinace odvozené z harmonií nesplňují kontrast WCAG — před nasazením vždy ověřte dvojice text/pozadí v nástroji Color Contrast.
Kdy použít tento nástroj vs. kód
Nástroj v prohlížeči použijte pro ideaci, rychlé zkoumání a revizi designu. V kódu vám knihovny jako chroma.js, colord nebo culori umožní počítat harmonie programově, integrovat je do build pipeline pro design tokeny a kombinovat matematiku harmonií s perceptuálně uniformními barevnými prostory, jako je Oklch, pro rovnoměrněji působící palety.