Krāsu koda ģenerators un krāsu izvēle

Ģenerē krāsu kodus, variācijas, harmonijas un pārbaudi kontrasta attiecības.

Krāsu konvertēšana

HEX

#52001f

Castro

HEX
#52001f
HSL
337, 100, 16
RGB
82, 0, 31
XYZ
4, 2, 1
CMYK
0, 100, 62, 68
LUV
15,45,0
LAB
15, 37, 6
HWB
337, 0, 68

Variācijas

Šīs sadaļas mērķis ir precīzi izveidot tavas izvēlētās krāsas toņus (pievienojot tīru balto) un ēnas (pievienojot tīru melno) 10% pieaugumos.

Profesionāls padoms: Izmanto ēnas hover stāvokļiem un ēnām, toņus izcēlumiem un fonam.

Ēnas

Tumšākas variācijas, kas izveidotas, pievienojot melno tavai pamatkrāsai.

Toņi

Gaišākas variācijas, kas izveidotas, pievienojot balto tavai pamatkrāsai.

Bieži lietošanas gadījumi

  • UI komponentu stāvokļi (hover, aktīvs, atspējots)
  • Dziļuma radīšana ar ēnām un izcēlumiem
  • Vienota krāsu sistēmu veidošana

Dizaina sistēmas padoms

Šīs variācijas veido saskaņotas krāsu paletes pamatu. Eksportē tās, lai saglabātu konsekvenci visā projektā.

Krāsu kombinācijas

Katrai harmonijai ir savs noskaņojums. Izmanto harmonijas, lai izdomātu krāsu kombinācijas, kas labi sader kopā.

Kā izmantot

Klikšķini uz jebkuras krāsas, lai nokopētu tās hex vērtību. Šīs kombinācijas ir matemātiski pierādītas, lai radītu vizuālu harmoniju.

Kāpēc tas ir svarīgi

Krāsu harmonijas rada līdzsvaru un izraisa specifiskas emocijas tavos dizainos.

Komplements

Krāsa un tās pretējā krāsu aplī, +180 grādu tonis. Augsts kontrasts.

#52001f
Vislabāk piemērots: Augstas ietekmes dizainiem, CTA, logotipiem

Dalītais komplementārs

Krāsa un divas blakus esošās tās komplementam, +/-30 grādu tonis no vērtības pretējā galvenajai krāsai. Drosmīgs kā tiešs komplementārs, bet daudzveidīgāks.

Vislabāk piemērots: Dzīvi, bet līdzsvaroti izkārtojumi

Triādisks

Trīs krāsas, kas vienmērīgi izvietotas krāsu aplī, katra 120 grādu tonis. Vislabāk ļaut vienai krāsai dominēt un izmantot pārējās kā akcentus.

Vislabāk piemērots: Spēlīgi, enerģiski dizaini

Analogs

Trīs krāsas ar vienādu luminanci un piesātinājumu, kuru toņi ir blakus krāsu aplī, 30 grādu attālumā. Gludas pārejas.

Vislabāk piemērots: Dabai iedvesmoti, nomierinoši interfeisi

Monohromatisks

Trīs krāsas ar vienādu toni un luminances vērtībām +/-50%. Smalks un izsmalcināts.

Vislabāk piemērots: Minimālistiski, izsmalcināti dizaini

Tetradisks

Divi komplekti ar papildinošām krāsām, atdalīti ar 60 grādu toņa leņķi.

Vislabāk piemērots: Bagātīgas, daudzveidīgas krāsu shēmas

Krāsu teorijas principi

Līdzsvars

Izmanto vienu dominējošo krāsu, atbalsti ar sekundāro un akcentē taupīgi.

Kontrasts

Nodrošini pietiekamu kontrastu lasāmībai un pieejamībai.

Harmonija

Krāsām jāstrādā kopā, lai radītu vienotu vizuālo pieredzi.

Krāsu kontrasta pārbaudītājs

Pārbaudi krāsu kombinācijas, lai nodrošinātu, ka tās atbilst WCAG pieejamības standartiem teksta salasāmībai.

Teksta krāsa
Fona krāsa
Kontrasts
1.00
Fail
Ļoti slikti
Mazs teksts
✖︎
Liels teksts
✖︎
WCAG standarti
AA:Minimālā kontrasta attiecība 4.5:1 parastam tekstam un 3:1 lielam tekstam. Nepieciešams lielākajai daļai vietņu.
AAA:Uzlabota kontrasta attiecība 7:1 parastam tekstam un 4.5:1 lielam tekstam. Ieteicams optimālai pieejamībai.
Nepietiekams kontrasts visiem teksta izmēriem - neatbilst WCAG standartiem.

Uzlabots kontrasta pārbaudītājs

Precīza pielāgošana ar slīdņiem, vairākiem priekšskatījumiem un vairāk

Ikviens ir ģēnijs. Bet, ja tu vērtēsi zivi pēc tās spējas kāpt kokā, tā visu mūžu dzīvos, domājot, ka ir muļķe.

- Albert Einstein

Tehniskie formāti

Praktiskie formāti

Krāsu analīze

Krāsu akluma simulators

Radošie aspekti