Värvikoodide generaator ja valija

Genereerige värvikoode, variatsioone, harmooniaid ja kontrollige kontrastsussuhteid.

Värvide teisendamine

HEX

#e24826

Cinnabar

HEX
#e24826
HSL
11, 76, 52
RGB
226, 72, 38
XYZ
34, 21, 4
CMYK
0, 68, 83, 11
LUV
53,137,37
LAB
53, 58, 52
HWB
11, 15, 11

Variatsioonid

Selle sektsiooni eesmärk on toota täpselt valitud värvi toonid (puhas valge lisatud) ja toonid (puhas must lisatud) 10%-lise sammuga.

Pro nõuanne: Kasutage varjundeid hõljutusseisundite ja varjude jaoks, toonide kasutamist rõhutuste ja taustade jaoks.

Varjud

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

Tints

Heledamad variatsioonid, mis on loodud valget värvi lisades oma põhivärvile.

Üldised kasutusjuhtumid

  • Kasutajaliidese komponendi olekud (hõljumine, aktiivne, välja lülitatud)
  • Sügavuse loomine varjude ja tipphetkedega
  • Järjepidevate värvisüsteemide ehitamine

Disainisüsteemi näpunäide

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

Värvikombinatsioonid

Igal harmoonial on oma meeleolu. Kasutage harmooniaid, et mõelda välja värvikombinatsioonid, mis sobivad hästi kokku.

Kuidas kasutada

Klõpsake mis tahes värvil, et kopeerida selle heksaväärtust. Need kombinatsioonid on matemaatiliselt tõestatud, et luua visuaalset harmooniat.

Miks see on oluline

Värviharmoonia loob tasakaalu ja tekitab teie kujunduses konkreetseid emotsioone.

Täiendus

Värv ja selle vastandvärviringil, +180 kraadi tooni. Suur kontrastsus.

#e24826
Parimad selleks, et: Suure mõjujõuga kujundus, CTA-d, logod

Jagatud-komplementaarne

Üks värv ja kaks selle täiendiga külgnevat värvi, +/-30 kraadi tooni põhivärvi vastasväärtusest. Julge nagu sirge täiendiga, aga mitmekülgsem.

Parimad selleks, et: Elavat, kuid tasakaalustatud paigutus

Triadic

Kolm värvi, mis on värvirattal ühtlaselt jaotatud, igaüks 120-kraadise toonivahega. Parim on lasta ühel värvil domineerida ja kasutada teisi aktsentvärvidena.

Parimad selleks, et: Mänguline, energiline disain

Analoogne

Kolm sama heleduse ja küllastusega värvi, mille toonid asuvad värvirattal kõrvuti 30-kraadise vahega. Sujuvad üleminekud.

Parimad selleks, et: Loodusest inspireeritud, rahustavad kasutajaliidesed

Monokromaatiline

Kolm sama tooni värvi heledusväärtustega +/-50%. Peen ja rafineeritud.

Parimad selleks, et: Minimalistlik, keerukas disain

Tetradic

Kaks komplekti vastandvärve, mis on eraldatud 60 kraadise tooniga.

Parimad selleks, et: Rikkalikud, mitmekesised värvilahendused

Värviteooria põhimõtted

Saldo

Kasutage ühte domineerivat värvi, toetage sekundaarse värviga ja rõhuasetustega säästlikult.

Kontrast

Tagage piisav kontrastsus loetavuse ja ligipääsetavuse tagamiseks.

Harmony

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

Värvikontrasti kontrollija

Testige värvikombinatsioone, et tagada nende vastavus WCAG ligipääsetavuse standarditele teksti loetavuse osas.

Teksti värv
Taustavärv
Kontrast
1.00
Fail
Väga kehv
Väike tekst
✖︎
Suur tekst
✖︎
WCAG standardid
AA:Minimaalne kontrastsuse suhe 4,5:1 tavalise teksti puhul ja 3:1 suure teksti puhul. Nõutav enamiku veebisaitide puhul.
AAA:Täiustatud kontrastsuse suhe 7:1 tavalise teksti puhul ja 4,5:1 suure teksti puhul. Soovitatav optimaalse ligipääsetavuse tagamiseks.
Ebapiisav kontrastsus kõigi tekstisuuruste puhul – ei vasta WCAG standarditele.

Täiustatud kontrastikontrollija

Täpsustage liugureid, mitut eelvaadet ja muud

Kõik on geeniused. Aga kui sa hindad kala tema puu otsa ronimise võime järgi, siis elab ta kogu oma elu uskudes, et ta on rumal.

- Albert Einstein

Tehnilised vormingud

Praktilised vormingud

Värvianalüüs

Pimeduse simulaator

Loomingulised aspektid