நிற குறியீடு உருவாக்கி & Picker

நிற குறியீடுகள், மாறுபாடுகள், ஒற்றுமைகள் உருவாக்கவும், மாறுபாடு விகிதங்களை சரிபார்க்கவும்.

நிற மாற்றம்

HEX

#032b52

Green Vogue

HEX
#032b52
HSL
210, 93, 17
RGB
3, 43, 82
XYZ
2, 2, 8
CMYK
96, 48, 0, 68
LUV
17,-7,-27
LAB
17, 4, -27
HWB
210, 1, 68

மாறுபாடுகள்

இந்த பிரிவின் நோக்கம் உங்கள் தேர்ந்தெடுத்த நிறத்தின் 10% அதிகரிப்பில் தூய வெள்ளை சேர்க்கப்பட்ட நிறங்களையும் (tints) தூய கருப்பு சேர்க்கப்பட்ட நிறங்களையும் (shades) துல்லியமாக உருவாக்குவதாகும்.

சிறந்த குறிப்புகள்: ஹோவர் நிலைகள் மற்றும் நிழல்களுக்கு shades ஐ பயன்படுத்தவும், முக்கிய அம்சங்கள் மற்றும் பின்னணிகளுக்கு tints ஐ பயன்படுத்தவும்.

Shades

உங்கள் அடிப்படை நிறத்திற்கு கருப்பை சேர்த்து உருவாக்கப்பட்ட இருண்ட மாறுபாடுகள்.

Tints

உங்கள் அடிப்படை நிறத்திற்கு வெள்ளையை சேர்த்து உருவாக்கப்பட்ட ஒளிர்ந்த மாறுபாடுகள்.

பொதுவான பயன்பாட்டு வழக்குகள்

  • UI கூறு நிலைகள் (ஹோவர், செயலில், முடக்கப்பட்டது)
  • நிழல்கள் மற்றும் முக்கிய அம்சங்களுடன் ஆழத்தை உருவாக்குதல்
  • முறையான நிற அமைப்புகளை உருவாக்குதல்

வடிவமைப்பு அமைப்பு குறிப்பு

இந்த மாறுபாடுகள் ஒரே மாதிரியான நிறத் தொகுப்பின் அடித்தளமாக அமைகின்றன. உங்கள் முழு திட்டத்திலும் ஒரே மாதிரியான தன்மையை பராமரிக்க அவற்றை ஏற்றுமதி செய்யவும்.

நிற சேர்க்கைகள்

ஒவ்வொரு இசைவுக்கும் அதன் சொந்த மனநிலை உள்ளது. நல்ல இசைவுடன் வேலை செய்யும் நிறக் கூட்டங்களை யோசிக்க இசைவுகளைப் பயன்படுத்தவும்.

எப்படி பயன்படுத்துவது

எந்த நிறத்தையும் கிளிக் செய்து அதன் hex மதிப்பை நகலெடுக்கவும். இந்த சேர்க்கைகள் கணித ரீதியாக காட்சித் இசையை உருவாக்குவதற்கு நிரூபிக்கப்பட்டவை.

ஏன் இது முக்கியம்

நிற இசைவுகள் சமநிலையை உருவாக்குகின்றன மற்றும் உங்கள் வடிவமைப்புகளில் குறிப்பிட்ட உணர்வுகளைத் தூண்டுகின்றன.

பூர்த்தி

ஒரு நிறம் மற்றும் அதன் எதிர்மறை நிற வட்டத்தில், +180 டிகிரி நிறம். உயர் மாறுபாடு.

#032b52
சிறந்தது: உயர் தாக்கம் உள்ள வடிவமைப்புகள், CTAகள், லோகோக்கள்

பிளவு-பூர்த்தி

ஒரு நிறம் மற்றும் அதன் பூர்த்திக்கு அருகிலுள்ள இரண்டு நிறங்கள், முக்கிய நிறத்திற்கு எதிராக உள்ள மதிப்பிலிருந்து +/-30 டிகிரி நிறம். நேராக பூர்த்தி போல தைரியமானது, ஆனால் அதிக பன்முகத்தன்மை கொண்டது.

சிறந்தது: உற்சாகமான ஆனால் சமநிலை உள்ள அமைப்புகள்

மூவகை

நிற வட்டத்தில் சமமாக இடைவெளி விட்டு மூன்று நிறங்கள், ஒவ்வொன்றும் 120 டிகிரி நிறம். ஒரு நிறம் ஆதிக்கம் செலுத்த அனுமதிக்கவும், மற்றவற்றை சிறிய அளவில் பயன்படுத்தவும்.

சிறந்தது: விளையாட்டுத்தனமான, ஆற்றல் நிறைந்த வடிவமைப்புகள்

ஒத்த

அதே ஒளிர்வு மற்றும் நிறமிகுதி கொண்ட மூன்று நிறங்கள், நிற வட்டத்தில் அருகிலுள்ள நிறங்கள், 30 டிகிரி இடைவெளி. மென்மையான மாற்றங்கள்.

சிறந்தது: இயற்கை-ஊக்கமளிக்கும், அமைதியான இடைமுகங்கள்

ஒற்றைநிறம்

அதே நிறத்துடன் மூன்று நிறங்கள், ஒளிர்வு மதிப்புகள் +/-50%. நுட்பமான மற்றும் நுணுக்கமானது.

சிறந்தது: குறைந்தபட்ச, நுணுக்கமான வடிவமைப்புகள்

நான்கு நிறம்

60 டிகிரி நிறமாற்றத்தால் பிரிக்கப்பட்ட இரண்டு செட் எதிர்மறை நிறங்கள்.

சிறந்தது: சம்ருத்தமான, பல்வகை நிற திட்டங்கள்

நிறக் கோட்பாடு கொள்கைகள்

சமநிலை

ஒரு ஆதிக்க நிறத்தைப் பயன்படுத்தவும், இரண்டாம் நிலை நிறத்தால் ஆதரிக்கவும், மற்றும் சிறிதளவு வண்ணத்தைச் சேர்க்கவும்.

மாறுபாடு

படிக்கக்கூடிய மற்றும் அணுகக்கூடிய அளவுக்கு போதுமான மாறுபாடு உறுதிசெய்க.

இணக்கம்

நிறங்கள் ஒன்றாக இணைந்து ஒரே பார்வை அனுபவத்தை உருவாக்க வேண்டும்.

நிற மாறுபாடு சரிபார்ப்பான்

உரை படிக்கக்கூடியதற்கான WCAG அணுகல் தரநிலைகளை பூர்த்தி செய்ய நிற சேர்க்கைகளைச் சோதிக்கவும்.

உரை நிறம்
பின்னணி நிறம்
மாறுபாடு
1.00
Fail
மிகவும் மோசமானது
சிறிய உரை
✖︎
பெரிய உரை
✖︎
WCAG தரநிலைகள்
AA:சாதாரண உரைக்கு குறைந்தபட்ச மாறுபாடு விகிதம் 4.5:1 மற்றும் பெரிய உரைக்கு 3:1. பெரும்பாலான வலைத்தளங்களுக்கு தேவை.
AAA:சாதாரண உரைக்கு மேம்பட்ட மாறுபாடு விகிதம் 7:1 மற்றும் பெரிய உரைக்கு 4.5:1. சிறந்த அணுகலுக்காக பரிந்துரைக்கப்படுகிறது.
அனைத்து எழுத்து அளவுகளுக்கும் போதுமான மாறுபாடு இல்லை - WCAG தரநிலைகளை பூர்த்தி செய்யவில்லை.

மேம்பட்ட மாறுபாடு பரிசோதகர்

ஸ்லைடர்களுடன் நுணுக்கமாக அமைக்கவும், பல முன்னோட்டங்கள் மற்றும் மேலும்

ஒவ்வொருவரும் ஒரு மேதை. ஆனால் நீந்தும் திறமையை வைத்து ஒரு மீனை நீ மரம் ஏறுவதில் மதிப்பீடு செய்தால், அது தன் வாழ்நாள் முழுவதும் தன்னை முட்டாளாக நம்பி வாழும்.

- Albert Einstein

தொழில்நுட்ப வடிவங்கள்

நடைமுறை வடிவங்கள்

நிற பகுப்பாய்வு

கண்குருட்டு ஒத்திகை

படைப்பாற்றல் அம்சங்கள்