Generator paleta boja
Harmonija boja
Two colors opposite on the color wheel
Generirana paleta
Pregled palete
Izvezi paletu
:root {
--color-1: #3b82f6;
--color-2: #f6af3c;
}Tehnički detalji
Kako radi generator paleta boja
Što alat radi
Generator paleta boja stvara skladne sheme boja iz bilo koje osnovne boje koristeći utvrđena načela teorije boja. Odaberite osnovnu boju i izaberite jednu od šest vrsta harmonije — komplementarnu, analognu, trijadnu, tetradnu, podijeljeno-komplementarnu ili monokromatsku — kako biste odmah generirali usklađenu paletu. Svaka generirana boja prikazuje HEX, RGB i HSL vrijednosti spremne za kopiranje u vaš CSS, alat za dizajn ili vodič stilova.
Uobičajeni slučajevi upotrebe za razvojne programere
Dizajneri i programeri koriste generatore paleta pri pokretanju novih projekata, izradi dizajnerskih sustava ili osvježavanju boja brenda. Uobičajeni scenariji uključuju generiranje komplementarnih akcentnih boja za primarnu boju brenda, izradu analognih shema boja za vizualizacije podataka, izgradnju trijadnih paleta za živopisne UI teme te istraživanje monokromatskih varijacija za minimalističke dizajne. Alat je također koristan za generiranje skupova CSS prilagođenih svojstava i JSON tokena boja za dizajnerske sustave.
Vrste harmonije boja
Harmonije boja temelje se na krugu boja. Komplementarne boje nalaze se nasuprot jedna drugoj (180°) i stvaraju visok kontrast. Analogne boje su susjedne (±30°) i djeluju skladno. Trijadne boje ravnomjerno su raspoređene u intervalima od 120° za uravnoteženu živost. Tetradna (pravokutnik) koristi četiri boje u intervalima od 90°. Podijeljeno-komplementarna kombinira osnovnu boju s dvjema bojama susjednima njezinoj komplementarnoj. Monokromatska varira svjetlinu i zasićenost jedne nijanse za suptilne, ujednačene palete.
Uobičajene zamke i rubni slučajevi
Generirane palete su polazišne točke, a ne konačni dizajni. Uvijek provjerite omjere kontrasta između generiranih boja kako biste osigurali pristupačnost. Vrlo zasićene ili vrlo tamne osnovne boje mogu proizvesti palete sa slabom čitljivošću. Imajte na umu da se boje na ekranu u tisku prikazuju drugačije. Testirajte palete na stvarnom sadržaju i UI elementima umjesto da se oslanjate isključivo na preglede uzoraka.
Kada koristiti ovaj alat umjesto koda
Koristite ovaj alat u pregledniku za interaktivno istraživanje i brzo generiranje paleta tijekom dizajnerskih sprintova. Za produkcijske dizajnerske sustave implementirajte generiranje paleta programatski koristeći biblioteke poput chroma.js, culori ili polished koje mogu generirati harmonije, provoditi omjere kontrasta i integrirati se s build pipelineovima.