Generator harmonija boja
Tehnički detalji
Kako radi generator harmonija boja
Što alat radi
Generator harmonija boja izračunava matematički povezane skupove boja iz jedne osnovne nijanse: komplementarne, analogne, trijadne, tetradne, kvadratne, podijeljeno-komplementarne, monokromatske i nijanse. Svaka paleta prikazuje HEX, RGB i HSL vrijednosti koje možete kopirati jednim klikom i koristiti izravno u CSS-u ili dizajnerskim tokenima.
Uobičajeni slučajevi upotrebe za razvojne programere
Dizajneri prototipiraju brend palete istražujući kako se nijansa brenda mijenja pod različitim pravilima harmonije. Frontend developeri postavljaju akcentne boje za gumbe, upozorenja i bedževe na temelju primarne boje brenda. Inženjeri za vizualizaciju podataka biraju kategorijske skupove boja koji djeluju promišljeno, a ipak ostaju međusobno razlikovni. Product manageri uspoređuju opcije paleta pri pregledu dizajnerskih prijedloga bez potrebe za namjenskim dizajnerskim alatima.
Formati podataka, vrste ili varijante
Dostupno je osam shema: Komplementarna (osnovna + 180°), Analogna (osnovna ± 30°), Trijadna (3 boje udaljene 120°), Tetradna (pravokutna shema s 4 boje), Kvadratna (4 boje udaljene 90°), Podijeljeno-komplementarna (osnovna + ±150°), Monokromatska (ista nijansa uz različitu svjetlinu 10–90%) i Nijanse (ista nijansa, od tamne prema svijetloj). Svaka boja uključuje svoje HEX, RGB i HSL prikaze, zajedno s oznakom uloge.
Uobičajene zamke i rubni slučajevi
Harmonije izvedene iz izrazito nezasićenih ili gotovo sivih osnovnih boja izgledaju nerazlučivo kroz različite sheme — krenite od zasićene osnove. Vrlo zasićene osnove u kombinaciji s trijadnim ili tetradnim shemama mogu proizvesti prenaglašene, teško uravnotežive palete; razmislite o smanjenju zasićenosti za UI. Neka uparivanja izvedena iz harmonija ne zadovoljavaju WCAG kontrast — uvijek provjerite parove tekst/pozadina u alatu Color Contrast prije objave.
Kada koristiti ovaj alat umjesto koda
Koristite alat u pregledniku za ideaciju, brzo istraživanje i pregled dizajna. U kodu, biblioteke poput chroma.js, colord ili culori omogućuju programatski izračun harmonija, integraciju u build pipelineove dizajnerskih tokena i kombiniranje matematike harmonija s perceptivno ujednačenim prostorima boja poput Oklch za palete koje izgledaju ujednačenije.