Generator barvnih harmonij
Tehnične podrobnosti
Kako deluje generator barvnih harmonij
Kaj orodje počne
Generator barvnih harmonij izračuna matematično povezane nabore barv iz enega osnovnega odtenka: komplementarne, analogne, triadne, tetradne, kvadratne, razcepljeno-komplementarne, monokromatske in sence. Vsaka paleta je prikazana z vrednostmi HEX, RGB in HSL, ki jih lahko s klikom kopirate in neposredno uporabite v CSS ali oblikovalskih žetonih.
Pogosti primeri uporabe za razvijalce
Oblikovalci prototipirajo palete blagovne znamke tako, da raziskujejo, kako se odtenek znamke spreminja pod različnimi pravili harmonije. Frontend razvijalci iz primarne barve blagovne znamke izpeljejo poudarjene barve za gumbe, opozorila in značke. Inženirji podatkovne vizualizacije izberejo kategorične nabore barv, ki delujejo premišljeno, a ostanejo razločljivi. Produktni vodje primerjajo možnosti palet pri pregledu oblikovalskih predlogov, ne da bi potrebovali namenska oblikovalska orodja.
Podatkovni formati, tipi ali različice
Na voljo je osem shem: komplementarna (osnova + 180°), analogna (osnova ± 30°), triadna (3 barve, oddaljene 120°), tetradna (pravokotna 4-barvna), kvadratna (4 barve, oddaljene 90°), razcepljeno-komplementarna (osnova + ±150°), monokromatska (isti odtenek pri različni svetlosti 10–90%) in sence (isti odtenek, od temnega do svetlega). Vsaka barva vključuje svoje predstavitve HEX, RGB in HSL skupaj z oznako vloge.
Pogoste pasti in robni primeri
Harmonije, izpeljane iz izjemno nenasičenih ali skoraj sivinskih osnovnih barv, so med shemami videti nerazločljive — začnite z nasičeno osnovo. Zelo nasičene osnove v kombinaciji s triadnimi ali tetradnimi shemami lahko ustvarijo kričeče, težko uravnotežene palete; za uporabo v UI razmislite o zmanjšanju nasičenosti. Nekatere kombinacije, izpeljane iz harmonij, ne dosegajo kontrasta WCAG — pred objavo vedno preverite pare besedilo/ozadje v orodju Color Contrast.
Kdaj uporabiti to orodje namesto kode
Orodje v brskalniku uporabite za ideacijo, hitro raziskovanje in pregled oblikovanja. V kodi vam knjižnice, kot so chroma.js, colord ali culori, omogočajo programatičen izračun harmonij, njihovo integracijo v gradbene cevovode oblikovalskih žetonov ter kombiniranje matematike harmonij s perceptualno enakomernimi barvnimi prostori, kot je Oklch, za bolj enakomerno videti palete.