Värvikoodi generaator ja Picker

Genereeri värvikoodid, variatsioonid, harmooniad ja kontrolli kontrastsuse suhteid.

Värvimuundus

HEX

#831923

Merlot

HEX
#831923
HSL
354, 68, 31
RGB
131, 25, 35
XYZ
10, 6, 2
CMYK
0, 81, 73, 49
LUV
28,81,13
LAB
28, 44, 23
HWB
354, 10, 49

Variatsioonid

Selle jaotise eesmärk on täpselt toota sinu valitud värvi toone (lisatud puhas valge) ja varje (lisatud puhas must) 10% sammudega.

Pro nõuanne: Kasuta varje hover-olekute ja varjude jaoks, toone esiletõstete ja taustade jaoks.

Varjud

Tumedamad variatsioonid, mis on loodud musta lisamisega sinu põhivärvile.

Toonid

Heledamad variatsioonid, mis on loodud valge lisamisega sinu põhivärvile.

Levinud kasutusjuhud

  • Kasutajaliidese komponentide olekud (hover, aktiivne, keelatud)
  • Sügavuse loomine varjude ja esiletõstetega
  • Järjepidevate värvisüsteemide loomine

Disainisüsteemi nõuanne

Need variatsioonid moodustavad ühtse värvipaleti aluse. Ekspordi need, et säilitada järjepidevus kogu oma projektis.

Värvikombinatsioonid

Igal harmoonial on oma meeleolu. Kasuta harmooniaid, et leida värvikombosid, mis hästi kokku sobivad.

Kuidas kasutada

Klõpsa mis tahes värvil, et kopeerida selle hex väärtus. Need kombinatsioonid on matemaatiliselt tõestatud, et luua visuaalset harmooniat.

Miks see on oluline

Värviharmooniad loovad tasakaalu ja kutsuvad esile spetsiifilisi emotsioone sinu disainides.

Komplement

Värv ja selle vastand värvirattal, +180 kraadi tooni. Kõrge kontrast.

#831923
Parim: Mõjusa disaini, CTA-de, logode jaoks

Lahutatud komplementaarne

Värv ja kaks selle komplementaari kõrval asuvat värvi, +/-30 kraadi tooni peavärvi vastas. Julge nagu sirge komplement, kuid mitmekülgsem.

Parim: Elavad, kuid tasakaalustatud paigutused

Triadiline

Kolm värvi, mis on värvirattal ühtlaselt jaotatud, igaüks 120 kraadi tooni kaugusel. Parim, kui üks värv domineerib ja teisi kasutatakse aktsentidena.

Parim: Mängulised, energilised disainid

Analoogsed

Kolm sama luminantsuse ja küllastusega värvi, mille toonid on värvirattal kõrvuti, 30 kraadi kaugusel. Sujuvad üleminekud.

Parim: Loodusest inspireeritud, rahustavad liidesed

Monokromaatiline

Kolm sama tooni värvi, mille luminantsusväärtused on +/-50%. Peen ja rafineeritud.

Parim: Minimalistlikud, rafineeritud disainid

Tetradiline

Kaks komplekti täiendvärve, eraldatud 60 kraadi võrra tooni järgi.

Parim: Rikkalikud, mitmekesised värviskeemid

Värviteooria põhimõtted

Tasakaal

Kasuta ühte domineerivat värvi, toeta sekundaarsega ja kasuta aktsente säästlikult.

Kontrast

Tagage piisav kontrast loetavuse ja ligipääsetavuse jaoks.

Harmoonia

Värvid peaksid koos töötama, et luua ühtne visuaalne kogemus.

Värvikontrasti kontrollija

Testi värvikombinatsioone, et tagada nende vastavus WCAG juurdepääsetavuse standarditele teksti loetavuse osas.

Teksti värv
Taustavärv
Kontrastsus
1.00
Fail
Väga halb
Väike tekst
✖︎
Suur tekst
✖︎
WCAG standardid
AA:Minimaalne kontrastsuse suhe 4,5:1 tavalise teksti ja 3:1 suure teksti jaoks. Nõutav enamikul veebisaitidel.
AAA:Tõhustatud kontrastsuse suhe 7:1 tavalise teksti ja 4,5:1 suure teksti jaoks. Soovitatav optimaalseks juurdepääsetavuseks.
Ebapiisav kontrastsus kõigi tekstisuuruste jaoks - ei vasta WCAG standarditele.

Täiustatud kontrastikontroll

Peenhäälesta liuguritega, mitme eelvaatega ja rohkem

Igaüks on geenius. Aga kui sa hindad kala tema võime järgi puu otsa ronida, elab ta kogu oma elu uskudes, et on rumal.

- Albert Einstein

Tehnilised formaadid

Praktilised formaadid

Värvianalüüs

Pimeduse simulaator

Loomingulised aspektid