Spalvų kodų generatorius ir rinkiklis

Sukurkite spalvų kodus, variacijas, harmonijas ir patikrinkite kontrasto santykį.

Spalvų konvertavimas

HEX

#ca4e4e

Chestnut Rose

HEX
#ca4e4e
HSL
0, 54, 55
RGB
202, 78, 78
XYZ
28, 19, 9
CMYK
0, 61, 61, 21
LUV
50,105,21,
LAB
50, 49, 26
HWB
0, 31, 21

Variacijos

Šio skyriaus tikslas - tiksliai sukurti pasirinktos spalvos atspalvius (pridedama grynos baltos spalvos) ir atspalvius (pridedama grynos juodos spalvos) 10 % tikslumu.

Profesionalų patarimas: Naudokite atspalvius užsklandos būsenoms ir šešėliams, o atspalvius - šviesoms ir fonams.

Atspalviai

Tamsesni variantai sukuriami į pagrindinę spalvą pridedant juodos spalvos.

Spalvos

Šviesesni variantai sukuriami į pagrindinę spalvą pridedant baltos spalvos.

Bendrieji naudojimo atvejai

  • Sąsajos komponento būsenos (užvedimas, aktyvus, išjungtas)
  • Gylio kūrimas naudojant šešėlius ir šviesas
  • Nuoseklių spalvų sistemų kūrimas

Dizaino sistemos patarimas

Šie variantai sudaro darnios spalvų paletės pagrindą. Eksportuokite jas, kad visame projekte išlaikytumėte nuoseklumą.

Spalvų deriniai

Kiekviena harmonija turi savo nuotaiką. Naudokite harmonijas, kad sugalvotumėte spalvų derinius, kurie gerai dera tarpusavyje.

Kaip naudoti

Spustelėkite bet kurią spalvą, kad nukopijuotumėte jos šešiaženklę vertę. Matematiškai įrodyta, kad šie deriniai sukuria vizualinę harmoniją.

Kodėl tai svarbu

Spalvų dermės sukuria pusiausvyrą ir sukelia tam tikras emocijas jūsų dizaine.

Papildymas

Spalva ir jos priešingybė spalvų rate, +180 atspalvio laipsnių. Didelis kontrastas.

#ca4e4e
Geriausiai tinka: Didelio poveikio dizainai, CTA, logotipai

Padalyti-komplementarūs

Spalva ir dvi gretimos spalvos, +/-30 laipsnių atspalvio nuo vertės, priešingos pagrindinei spalvai. Drąsus kaip tiesioginis papildymas, bet universalesnis.

Geriausiai tinka: Ryškūs, bet subalansuoti išdėstymai

Triadinis

Trys spalvos, tolygiai išdėstytos išilgai spalvų rato, kurių atspalviai skiriasi 120 laipsnių. Geriausia, kad viena spalva dominuotų, o kitos būtų naudojamos kaip akcentai.

Geriausiai tinka: Žaismingas, energingas dizainas

Analogiškas

Trys to paties ryškumo ir sodrumo spalvos, kurių atspalviai spalvų rate yra greta, 30 laipsnių atstumu viena nuo kitos. Sklandūs perėjimai.

Geriausiai tinka: Gamtos įkvėptos, raminančios sąsajos

Vienspalvis

Trys to paties atspalvio spalvos, kurių šviesumo vertės +/-50 %. Subtilus ir rafinuotas.

Geriausiai tinka: Minimalistinis, rafinuotas dizainas

Tetradinis

Du papildomų spalvų rinkiniai, kuriuos skiria 60 laipsnių atspalvis.

Geriausiai tinka: Sodrios, įvairios spalvų schemos

Spalvų teorijos principai

Balansas

Naudokite vieną dominuojančią spalvą, palaikykite ją antrine, o akcentus dėkite retai.

Kontrastas

Užtikrinkite pakankamą kontrastą, kad tekstas būtų įskaitomas ir prieinamas.

Harmonija

Spalvos turėtų derėti tarpusavyje, kad sukurtų vientisą vizualinę patirtį.

Spalvų kontrasto tikrintuvas

Išbandykite spalvų derinius, kad įsitikintumėte, jog jie atitinka WCAG teksto įskaitomumo standartus.

Teksto spalva
Fono spalva
Kontrastas
Fail
Mažas tekstas
✖︎
Didelis tekstas
✖︎
WCAG standartai
AA:Mažiausias kontrasto santykis 4,5:1 įprastam tekstui ir 3:1 dideliam tekstui. Būtinas daugumoje svetainių.
AAA:Patobulintas kontrasto santykis - 7:1 įprastam tekstui ir 4,5:1 dideliam tekstui. Rekomenduojama siekiant optimalaus prieinamumo.

Visi yra genijai. Bet jei apie žuvį spręsite pagal jos gebėjimą įlipti į medį, ji visą gyvenimą gyvens manydama, kad yra kvaila.

- Albert Einstein

Techniniai formatai

Praktiniai formatai

Spalvų analizė

Aklumo simuliatorius

Kūrybiniai aspektai