കളർ കോഡ് ജനറേറ്ററും പിക്കറും

വർണ്ണ കോഡുകൾ, വ്യതിയാനങ്ങൾ, ഹാർമണികൾ എന്നിവ സൃഷ്ടിക്കുക, കോൺട്രാസ്റ്റ് അനുപാതങ്ങൾ പരിശോധിക്കുക.

വർണ്ണ പരിവർത്തനം

HEX

#b3b3b3

Nobel

HEX
#b3b3b3
HSL
0, 0, 70
RGB
179, 179, 179
XYZ
43, 45, 49
CMYK
0, 0, 0, 30
LUV
73,12,5,
LAB
73, 0, 0
HWB
0, 70, 30

വ്യതിയാനങ്ങൾ

ഈ വിഭാഗത്തിന്റെ ഉദ്ദേശ്യം നിങ്ങൾ തിരഞ്ഞെടുത്ത നിറത്തിന്റെ ടിന്റുകളും (ശുദ്ധമായ വെള്ള ചേർത്തത്) ഷേഡുകളും (ശുദ്ധമായ കറുപ്പ് ചേർത്തത്) 10% വർദ്ധനവിൽ കൃത്യമായി നിർമ്മിക്കുക എന്നതാണ്.

പ്രോ ടിപ്പ്: ഹോവർ സ്റ്റേറ്റുകൾക്കും ഷാഡോകൾക്കും ഷേഡുകൾ ഉപയോഗിക്കുക, ഹൈലൈറ്റുകൾക്കും പശ്ചാത്തലങ്ങൾക്കും ടിന്റുകൾ ഉപയോഗിക്കുക.

ഷേഡുകൾ

നിങ്ങളുടെ അടിസ്ഥാന നിറത്തിലേക്ക് കറുപ്പ് ചേർത്തുകൊണ്ട് ഇരുണ്ട വ്യതിയാനങ്ങൾ സൃഷ്ടിച്ചു.

ടിന്റുകൾ

നിങ്ങളുടെ അടിസ്ഥാന നിറത്തിൽ വെള്ള ചേർത്തുകൊണ്ട് സൃഷ്ടിച്ച ഇളം നിറ വ്യതിയാനങ്ങൾ.

സാധാരണ ഉപയോഗ കേസുകൾ

  • UI ഘടക അവസ്ഥകൾ (ഹോവർ, സജീവം, പ്രവർത്തനരഹിതം)
  • ഷാഡോകളും ഹൈലൈറ്റുകളും ഉപയോഗിച്ച് ആഴം സൃഷ്ടിക്കുന്നു
  • സ്ഥിരമായ വർണ്ണ സംവിധാനങ്ങൾ നിർമ്മിക്കുന്നു

ഡിസൈൻ സിസ്റ്റം നുറുങ്ങ്

ഈ വ്യതിയാനങ്ങളാണ് ഒരു ഏകീകൃത വർണ്ണ പാലറ്റിന്റെ അടിത്തറയായി മാറുന്നത്. നിങ്ങളുടെ മുഴുവൻ പ്രോജക്റ്റിലും സ്ഥിരത നിലനിർത്താൻ അവ എക്സ്പോർട്ട് ചെയ്യുക.

വർണ്ണ കോമ്പിനേഷനുകൾ

ഓരോ ഹാർമണിക്കും അതിന്റേതായ മാനസികാവസ്ഥയുണ്ട്. പരസ്പരം നന്നായി പ്രവർത്തിക്കുന്ന വർണ്ണ കോമ്പോസിഷനുകൾക്കായി ഹാർമണികൾ ഉപയോഗിക്കുക.

എങ്ങനെ ഉപയോഗിക്കാം

ഏതെങ്കിലും നിറത്തിന്റെ ഹെക്സ് മൂല്യം പകർത്താൻ അതിൽ ക്ലിക്കുചെയ്യുക. ഈ കോമ്പിനേഷനുകൾ ദൃശ്യ ഐക്യം സൃഷ്ടിക്കാൻ ഗണിതശാസ്ത്രപരമായി തെളിയിക്കപ്പെട്ടിട്ടുണ്ട്.

എന്തുകൊണ്ട് അത് പ്രധാനമാണ്

വർണ്ണ പൊരുത്തങ്ങൾ നിങ്ങളുടെ ഡിസൈനുകളിൽ സന്തുലിതാവസ്ഥ സൃഷ്ടിക്കുകയും പ്രത്യേക വികാരങ്ങൾ ഉണർത്തുകയും ചെയ്യുന്നു.

പൂരകം

കളർ വീലിൽ ഒരു നിറവും അതിന്റെ വിപരീതവും, +180 ഡിഗ്രി ഹ്യൂ. ഉയർന്ന കോൺട്രാസ്റ്റ്.

#b3b3b3
ഏറ്റവും അനുയോജ്യം: ഉയർന്ന സ്വാധീനമുള്ള ഡിസൈനുകൾ, CTA-കൾ, ലോഗോകൾ

സ്പ്ലിറ്റ്-കോംപ്ലിമെന്ററി

ഒരു നിറവും അതിന്റെ പൂരകത്തോട് ചേർന്നുള്ള രണ്ട് നിറങ്ങളും, പ്രധാന നിറത്തിന് എതിർവശത്തുള്ള മൂല്യത്തിൽ നിന്ന് +/-30 ഡിഗ്രി ഹ്യൂ. ഒരു നേരായ പൂരകം പോലെ ബോൾഡ്, പക്ഷേ കൂടുതൽ വൈവിധ്യമാർന്നത്.

ഏറ്റവും അനുയോജ്യം: ഊർജ്ജസ്വലവും എന്നാൽ സന്തുലിതവുമായ ലേഔട്ടുകൾ

ട്രയാഡിക്

കളർ വീലിൽ തുല്യ അകലത്തിൽ മൂന്ന് നിറങ്ങൾ, ഓരോന്നിനും 120 ഡിഗ്രി നിറം അകലം. ഒരു നിറം ആധിപത്യം സ്ഥാപിക്കാൻ അനുവദിക്കുകയും മറ്റുള്ളവ ആക്സന്റുകളായി ഉപയോഗിക്കുകയും ചെയ്യുന്നതാണ് നല്ലത്.

ഏറ്റവും അനുയോജ്യം: രസകരവും ഊർജ്ജസ്വലവുമായ ഡിസൈനുകൾ

സമാനം

ഒരേ പ്രകാശത്തിന്റെയും സാച്ചുറേഷന്റെയും മൂന്ന് നിറങ്ങൾ, കളർ വീലിൽ 30 ഡിഗ്രി അകലത്തിൽ തൊട്ടടുത്തുള്ള നിറങ്ങൾ. സുഗമമായ സംക്രമണങ്ങൾ.

ഏറ്റവും അനുയോജ്യം: പ്രകൃതിയിൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ടതും ശാന്തവുമായ ഇന്റർഫേസുകൾ

മോണോക്രോമാറ്റിക്

+/-50% പ്രകാശ മൂല്യങ്ങളുള്ള ഒരേ നിറത്തിലുള്ള മൂന്ന് നിറങ്ങൾ. സൂക്ഷ്മവും പരിഷ്കൃതവും.

ഏറ്റവും അനുയോജ്യം: മിനിമലിസ്റ്റ്, സങ്കീർണ്ണമായ ഡിസൈനുകൾ

ടെട്രാഡിക്

60 ഡിഗ്രി ഹ്യൂ കൊണ്ട് വേർതിരിച്ച രണ്ട് സെറ്റ് പൂരക നിറങ്ങൾ.

ഏറ്റവും അനുയോജ്യം: സമ്പന്നവും വൈവിധ്യപൂർണ്ണവുമായ വർണ്ണ സ്കീമുകൾ

വർണ്ണ സിദ്ധാന്ത തത്വങ്ങൾ

ബാലൻസ്

ഒരു പ്രബല നിറം മാത്രം ഉപയോഗിക്കുക, ദ്വിതീയ നിറം ഉപയോഗിച്ച് പിന്തുണ നൽകുക, ആക്സന്റ് വളരെ കുറച്ച് മാത്രം ഉപയോഗിക്കുക.

കോൺട്രാസ്റ്റ്

വായനാക്ഷമതയ്ക്കും ആക്‌സസ്സിബിലിറ്റിക്കും ആവശ്യമായ കോൺട്രാസ്റ്റ് ഉറപ്പാക്കുക.

ഹാർമണി

ഏകീകൃത ദൃശ്യാനുഭവം സൃഷ്ടിക്കുന്നതിന് നിറങ്ങൾ ഒരുമിച്ച് പ്രവർത്തിക്കണം.

കളർ കോൺട്രാസ്റ്റ് ചെക്കർ

ടെക്സ്റ്റ് വായനാക്ഷമതയ്ക്കായി WCAG പ്രവേശനക്ഷമത മാനദണ്ഡങ്ങൾ പാലിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ വർണ്ണ കോമ്പിനേഷനുകൾ പരീക്ഷിക്കുക.

വാചക നിറം
പശ്ചാത്തല നിറം
കോൺട്രാസ്റ്റ്
Fail
ചെറിയ വാചകം
✖︎
വലിയ വാചകം
✖︎
WCAG മാനദണ്ഡങ്ങൾ
AA:സാധാരണ ടെക്സ്റ്റിന് 4.5:1 ഉം വലിയ ടെക്സ്റ്റിന് 3:1 ഉം ആണ് ഏറ്റവും കുറഞ്ഞ കോൺട്രാസ്റ്റ് അനുപാതം. മിക്ക വെബ്‌സൈറ്റുകൾക്കും ആവശ്യമാണ്.
AAA:സാധാരണ വാചകത്തിന് 7:1 ഉം വലിയ വാചകത്തിന് 4.5:1 ഉം എന്ന മെച്ചപ്പെടുത്തിയ ദൃശ്യതീവ്രതാ അനുപാതം. ഒപ്റ്റിമൽ ആക്‌സസിബിലിറ്റിക്ക് ശുപാർശ ചെയ്യുന്നു.

എല്ലാവരും പ്രതിഭകളാണ്. എന്നാൽ ഒരു മത്സ്യത്തെ മരത്തിൽ കയറാനുള്ള കഴിവ് കൊണ്ട് നിങ്ങൾ വിലയിരുത്തുകയാണെങ്കിൽ, അത് മണ്ടത്തരമാണെന്ന് വിശ്വസിച്ച് ജീവിതകാലം മുഴുവൻ ജീവിക്കും.

- Albert Einstein

സാങ്കേതിക ഫോർമാറ്റുകൾ

പ്രായോഗിക ഫോർമാറ്റുകൾ

വർണ്ണ വിശകലനം

അന്ധത സിമുലേറ്റർ

സൃഷ്ടിപരമായ വശങ്ങൾ