Generator paleta boja
Harmonija boja
Two colors opposite on the color wheel
Generisana paleta
Pregled palete
Izvezi paletu
:root {
--color-1: #3b82f6;
--color-2: #f6af3c;
}Tehnički detalji
Kako funkcioniše generator palete boja
Šta alat radi
Generator palete boja kreira harmonične šeme boja iz bilo koje osnovne boje koristeći utvrđene principe teorije boja. Izaberite osnovnu boju i odaberite jedan od šest tipova harmonije — komplementarnu, analognu, trijadnu, tetradnu, podeljeno-komplementarnu ili monohromatsku — da biste odmah generisali usklađenu paletu. Svaka generisana boja prikazuje HEX, RGB i HSL vrednosti spremne za kopiranje u vaš CSS, dizajn alat ili vodič stilova.
Uobičajeni slučajevi upotrebe za programere
Dizajneri i programeri koriste generatore paleta kada započinju nove projekte, kreiraju dizajn sisteme ili osvežavaju boje brenda. Uobičajeni scenariji uključuju generisanje komplementarnih akcentnih boja za primarnu boju brenda, kreiranje analognih šema boja za vizualizacije podataka, izgradnju trijadnih paleta za živopisne UI teme i istraživanje monohromatskih varijacija za minimalističke dizajne. Alat je takođe koristan za generisanje skupova CSS prilagođenih svojstava i JSON tokena boja za dizajn sisteme.
Tipovi harmonije boja
Harmonije boja zasnivaju se na točku boja. Komplementarne boje nalaze se jedna naspram druge (180°) i stvaraju visok kontrast. Analogne boje su susedne (±30°) i deluju skladno. Trijadne boje su ravnomerno raspoređene u intervalima od 120° za uravnoteženu živost. Tetradna (pravougaona) koristi četiri boje u intervalima od 90°. Podeljeno-komplementarna uparuje osnovnu boju sa dve boje susedne njenoj komplementarnoj. Monohromatska varira svetlinu i zasićenost jedne nijanse za suptilne, ujedinjene palete.
Uobičajene greške i rubni slučajevi
Generisane palete su polazne tačke, a ne finalni dizajni. Uvek proverite odnose kontrasta između generisanih boja kako biste obezbedili pristupačnost. Veoma zasićene ili veoma tamne osnovne boje mogu proizvesti palete sa slabom čitljivošću. Imajte na umu da boje na ekranu izgledaju drugačije u štampi. Testirajte palete na stvarnom sadržaju i UI elementima umesto da se oslanjate isključivo na prikaze uzoraka.
Kada koristiti ovaj alat umesto koda
Koristite ovaj alat u pregledaču za interaktivno istraživanje i brzo generisanje paleta tokom dizajn sprintova. Za produkcione dizajn sisteme, implementirajte generisanje paleta programatski koristeći biblioteke kao što su chroma.js, culori ili polished, koje mogu da generišu harmonije, nametnu odnose kontrasta i integrišu se sa build pipeline-ovima.