Krāsu paletes ģenerators
Krāsu harmonija
Two colors opposite on the color wheel
Ģenerētā palete
Paletes priekšskatījums
Eksportēt paleti
:root {
--color-1: #3b82f6;
--color-2: #f6af3c;
}Tehniskā informācija
Kā darbojas krāsu paletes ģenerators
Ko rīks dara
Krāsu paletes ģenerators izveido harmoniskas krāsu shēmas no jebkuras pamatkrāsas, izmantojot pārbaudītus krāsu teorijas principus. Izvēlieties pamatkrāsu un atlasiet vienu no sešiem harmonijas veidiem — komplementāro, analogo, triādisko, tetrādisko, dalīti komplementāro vai monohromatisko —, lai uzreiz ģenerētu saskaņotu paleti. Katra ģenerētā krāsa parāda HEX, RGB un HSL vērtības, kuras var ērti nokopēt savā CSS, dizaina rīkā vai stila vadlīnijās.
Biežākie izstrādātāju lietošanas gadījumi
Dizaineri un izstrādātāji izmanto paletes ģeneratorus, uzsākot jaunus projektus, veidojot dizaina sistēmas vai atsvaidzinot zīmola krāsas. Biežākie scenāriji ietver komplementāru akcentkrāsu ģenerēšanu primārajai zīmola krāsai, analogu krāsu shēmu veidošanu datu vizualizācijām, triādisku palešu izveidi košām UI tēmām un monohromatisku variāciju izpēti minimālistiskiem dizainiem. Rīks ir noderīgs arī CSS pielāgoto īpašību kopu un JSON krāsu tokenu ģenerēšanai dizaina sistēmām.
Krāsu harmonijas veidi
Krāsu harmonijas balstās uz krāsu apli. Komplementārās krāsas atrodas pretī viena otrai (180°) un rada augstu kontrastu. Analogās krāsas ir blakus (±30°) un šķiet saskanīgas. Triādiskās krāsas ir vienmērīgi izvietotas ar 120° intervāliem, nodrošinot līdzsvarotu košumu. Tetrādiskā (taisnstūra) shēma izmanto četras krāsas ar 90° intervāliem. Dalīti komplementārā shēma apvieno pamatkrāsu ar divām krāsām, kas atrodas blakus tās komplementārajai krāsai. Monohromatiskā shēma maina vienas nokrāsas gaišumu un piesātinājumu, veidojot smalkas, vienotas paletes.
Biežākās kļūdas un robežgadījumi
Ģenerētās paletes ir sākumpunkti, nevis gala dizaini. Vienmēr pārbaudiet kontrasta attiecības starp ģenerētajām krāsām, lai nodrošinātu pieejamību. Ļoti piesātinātas vai ļoti tumšas pamatkrāsas var radīt paletes ar sliktu lasāmību. Atcerieties, ka ekrāna krāsas drukā izskatās citādi. Testējiet paletes ar reālu saturu un UI elementiem, nevis paļaujieties tikai uz paraugu priekšskatījumiem.
Kad izmantot šo rīku, nevis kodu
Izmantojiet šo pārlūka rīku interaktīvai izpētei un ātrai paletes ģenerēšanai dizaina sprintu laikā. Ražošanas līmeņa dizaina sistēmām ieviesiet paletes ģenerēšanu programmatiski, izmantojot bibliotēkas, piemēram, chroma.js, culori vai polished, kas spēj ģenerēt harmonijas, nodrošināt kontrasta attiecības un integrēties būvēšanas cauruļvados.