கலர் பிக்கர் (நிறத் தேர்வி)
எந்த நிறத்தையும் தேர்ந்தெடுத்து, அதன் குறியீட்டை எல்லா பொதுவான வடிவங்களிலும் நகலெடுக்கத் தயாராகப் பெறுங்கள். பொருத்தமான பேலட்களை உருவாக்கலாம், போட்டோவைப் பதிவேற்றாமலேயே அதன் முக்கிய நிறங்களைப் பிரித்தெடுக்கலாம், ஒரு உரை–பின்னணி நிற ஜோடி WCAG கான்ட்ராஸ்ட் தேவையை நிறைவு செய்கிறதா என்றும் சோதிக்கலாம்.
வண்ணத் தேர்வி
அனைத்து வடிவங்களிலும் வண்ணக் குறியீடுகள்
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK (தோராயம்)80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
இந்த வண்ணத்திலிருந்து வண்ணத்தட்டுகள்
நிரப்பு வண்ணம்
அடுத்தடுத்த வண்ணங்கள்
மூவண்ணம்
இளம் சாயல்கள் (வெள்ளையுடன் கலந்தவை)
அடர் சாயல்கள் (கருப்புடன் கலந்தவை)
படத்திலிருந்து வண்ணத்தட்டு
உங்கள் படம் உங்கள் உலாவியிலேயே படிக்கப்படுகிறது, பதிவேற்றப்படுவதில்லை: பிக்சல்கள் இந்தச் சாதனத்தில் கேன்வாஸில் மாதிரி எடுக்கப்படுகின்றன, எதுவும் எங்கும் அனுப்பப்படாது.
புகைப்படம், ஸ்கிரீன்ஷாட் அல்லது லோகோவை இங்கே இடவும்
உங்கள் படத்தின் ஆறு முதன்மை வண்ணங்கள் இங்கே தோன்றும். ஒரு வண்ணத்தைக் கிளிக் செய்தால் தேர்வியில் ஏற்றப்படும்.
மாறுபாடு சரிபார்ப்பி (WCAG 2.1)
பெரிய உரை மாதிரி
The quick brown fox jumps over the lazy dog. 0123456789
- AA · சாதாரண உரைதேர்ச்சி
- AAA · சாதாரண உரைதேர்ச்சி
- AA · பெரிய உரைதேர்ச்சி
- AAA · பெரிய உரைதேர்ச்சி
பெரிய உரை என்பது குறைந்தது 18 pt (24 px) சாதாரணம் அல்லது 14 pt (சுமார் 18.7 px) தடிமன். AA க்கு சாதாரண உரைக்கு 4.5:1, பெரிய உரைக்கு 3:1 தேவை; AAA க்கு 7:1 மற்றும் 4.5:1.
பொதுவான CSS பெயரிட்ட வண்ணங்கள்
ஒவ்வொரு உலாவியும் புரிந்துகொள்ளும் இருபது முக்கிய சொற்கள், அவற்றின் துல்லியமான HEX, RGB, HSL மதிப்புகளுடன்.
| பெயர் | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
HEX, RGB, HSL, HSB உண்மையில் எதைக் குறிக்கின்றன
இந்தப் பக்கத்தில் உள்ள ஒவ்வொரு நிறமும் sRGB நிற வெளியில் உள்ளது. 1990-களின் இறுதியில் உலாவிகள் இதை ஏற்றுக்கொண்டதிலிருந்து இதுவே இணையத்தின் இயல்புநிலை நிற வெளி. திரை சிவப்பு, பச்சை, நீல ஒளியைக் கலக்கிறது; ஒவ்வொரு சேனலுக்கும் 256 நிலைகள் (0–255) உண்டு, இதனால் 16,777,216 நிறங்கள் சாத்தியம். RGB அந்த மூன்று எண்களை நேரடியாக எழுதுகிறது; HEX அதே மூன்று எண்களை 16-ஆம் அடிப்படையில், தலா இரண்டு இலக்கங்களில் எழுதுகிறது. எனவே #FF6600 என்றால் சிவப்பு 255, பச்சை 102, நீலம் 0. மூன்று இலக்கச் சுருக்கம் ஒவ்வொரு இலக்கத்தையும் இரட்டிப்பாக்கும்: #F60 என்பது #FF6600.
HSL, HSB (HSV என்றும் அழைக்கப்படும்) ஆகியவை அதே நிறங்களைக் கையால் மாற்ற எளிதான முறையில் விவரிக்கின்றன. Hue என்பது நிறச் சக்கரத்தில் ஒரு கோணம்: 0° சிவப்பு, 120° பச்சை, 240° நீலம். வேறுபாடு கடைசி எண்ணில் உள்ளது. HSL-இல் lightness 100% எப்போதும் வெள்ளை, 50% என்பது அந்த hue-வின் தூய வடிவம்; HSB-இல் brightness 100% என்பது தூய hue, வெள்ளைக்கு saturation 0% தேவை. Photoshop, Figma போன்ற வடிவமைப்பு செயலிகள் தங்கள் picker-இல் HSB பயன்படுத்துகின்றன; CSS hsl()-ஐ நேரடியாகப் புரிந்துகொள்கிறது, அதனால் மேலே இரண்டும் தரப்பட்டுள்ளன.
CMYK மதிப்பு ஏன் தோராயமானது மட்டுமே
திரைகள் ஒளியைக் கூட்டுகின்றன; அச்சுப்பொறிகள் சியான், மெஜந்தா, மஞ்சள், கருப்பு மையால் அதைக் கழிக்கின்றன. இந்த இரு முறைகளும் வெவ்வேறு நிற வரம்புகளை (gamut) உள்ளடக்குகின்றன. பிரகாசமான RGB பச்சை, எலக்ட்ரிக் நீலம், நியான் ஆரஞ்சு போன்ற மிக அடர்த்தியான திரை நிறங்களை செயல்முறை மைகளால் உருவாக்க முடியாது, அதனால் அவை மானிட்டரில் தெரிவதை விட மங்கலாக அச்சாகும்.
இங்குள்ள CMYK எண்கள் ICC சுயவிவரம் இல்லாத எளிய கணித மாற்றத்தைப் பயன்படுத்துகின்றன. இது தோராயமான குறிப்புக்குப் பயனுள்ளது, ஆனால் அச்சகத்துக்கு ஏற்றதல்ல. அச்சகம் தன் தாள், இயந்திரத்துக்கான சுயவிவரத்துடன் மாற்றும், உதாரணமாக ஐரோப்பாவில் FOGRA39, அமெரிக்காவில் GRACoL; ஒரே RGB நிறம் ஒவ்வொன்றிலும் வெவ்வேறு மை சதவீதங்களைத் தரலாம். அச்சுப் பணிக்கு, RGB அல்லது HEX மதிப்புடன் அச்சகம் கேட்கும் சுயவிவரத்தையும் அனுப்புங்கள்.
கான்ட்ராஸ்ட் விகிதம் எப்படிக் கணக்கிடப்படுகிறது
WCAG 2.1 இரு நிறங்களின் relative luminance-ஐ ஒப்பிடுகிறது: வெளிர் நிறத்துடன் 0.05 கூட்டி, அடர் நிறத்துடன் 0.05 கூட்டியதால் வகுக்க வேண்டும். முடிவு 1:1 (ஒரே நிறங்கள்) முதல் 21:1 (வெள்ளையில் கருப்பு) வரை இருக்கும். AA நிலை சாதாரண உரைக்குக் குறைந்தது 4.5:1, பெரிய உரைக்கு (18 புள்ளி அல்லது 14 புள்ளி தடித்தது) 3:1 கேட்கிறது; AAA நிலை இதை 7:1, 4.5:1 ஆக உயர்த்துகிறது. உள்ளீட்டு எல்லைகள், ஐகான்கள் போன்ற பயனர் இடைமுகப் பகுதிகளுக்கு, வெற்றி அளவுகோல் 1.4.11-இன் கீழ் சுற்றுப்புறத்துடன் 3:1 தேவை.
Luminance கணக்கில் பச்சைக்கு நீலத்தை விட மிக அதிக எடை உண்டு, ஏனெனில் கண் அதற்கே மிகவும் உணர்திறன் கொண்டது. அதனால்தான் இரண்டு நிறங்களும் முழு அடர்த்தியாகத் தெரிந்தாலும், வெள்ளையில் மஞ்சள் உரை மோசமாகத் தோற்கிறது, வெள்ளையில் அடர் நீலம் எளிதாகத் தேர்ச்சி பெறுகிறது. லோகோக்களும் முற்றிலும் அலங்கார உரையும் இந்த விதியிலிருந்து விலக்கு.
போட்டோ அல்லது லோகோவிலிருந்து நிறப் பேலட் பெறுவது எப்படி
பட வண்ணத் தட்டு உங்கள் கோப்பை உலாவியின் canvas மூலம் படித்து, நீளமான பக்கம் அதிகபட்சம் 200 பிக்சலாகச் சுருக்கி, 1982-இல் Paul Heckbert விவரித்த median-cut முறையில் ஒத்த பிக்சல்களைத் தொகுக்கிறது: ஆறு குழுக்கள் வரும் வரை நிற வரம்பு அதன் அகலமான சேனல் வழியாக மீண்டும் மீண்டும் பிரிக்கப்படும், ஒவ்வொரு குழுவின் சராசரி ஒரு swatch ஆகும். ஒளி ஊடுருவும் பிக்சல்கள் புறக்கணிக்கப்படும், அதனால் ஒளி ஊடுருவும் பின்னணியில் உள்ள லோகோ, லோகோவின் நிறங்களையே தரும்.
நிறங்கள் கிடைத்ததும், தட்டையான லோகோ பெரும்பாலும் வெக்டராக இருந்தால் சிறப்பாக இருக்கும். படத்தை SVG ஆக மாற்றும் கருவி இதே நிறங்களைத் தக்கவைத்து வடிவங்களாக மாற்றுகிறது; சேனல் ஹெடர் வடிவமைக்கிறீர்கள் என்றால், YouTube பேனர் ரீசைசர் பாதுகாப்பான பகுதியைக் கருத்தில் கொண்டு படைப்பை 2560 × 1440-க்குப் பொருத்தும்.
அடிக்கடி கேட்கப்படும் கேள்விகள்
- CSS-இன் "green" ஏன் RGB பிக்கரில் உள்ள பச்சையை விட அடர்த்தியாக உள்ளது?
- green என்ற keyword #008000, பழைய 16-நிற HTML தட்டிலிருந்து வந்த நடுத்தரப் பச்சை. முழு அடர்த்தியான #00FF00 lime எனப்படும். முழு CSS பட்டியலில் இதுபோன்ற ஆச்சரியங்கள் உண்டு: gray (#808080) என்பது darkgray (#A9A9A9)-ஐ விட அடர்ந்தது.
- பேலட் பிரித்தெடுக்கும்போது என் படம் பதிவேற்றப்படுமா?
- இல்லை. கோப்பு உங்கள் உலாவியிலேயே திறக்கப்பட்டு, நினைவகத்தில் canvas-இல் வரையப்பட்டு அங்கேயே பகுப்பாய்வு செய்யப்படுகிறது. படத்துடன் எந்த கோரிக்கையும் அனுப்பப்படாது, தாவலை மூடியதும் அது நீக்கப்படும்.
- பத்தி உரைக்கு எவ்வளவு கான்ட்ராஸ்ட் விகிதம் தேவை?
- WCAG 2.1 AA நிலைக்குக் குறைந்தது 4.5:1, AAA நிலைக்கு 7:1. 18 புள்ளி அல்லது பெரிய, அல்லது 14 புள்ளி தடித்த தலைப்புகள் AA-க்கு 3:1 பயன்படுத்தலாம். மங்கலான திரைகளிலும் வெயிலிலும் உரை படிக்கக்கூடியதாக இருக்க, பல வடிவமைப்பு அமைப்புகள் எல்லா இடத்திலும் 4.5:1 இலக்கு வைக்கின்றன.
- வெளிப்படைத்தன்மையுடன் 8 இலக்க HEX குறியீட்டைப் பயன்படுத்தலாமா?
- ஆம், CSS-இல். கடைசி இரண்டு இலக்கங்கள் alpha சேனல், எனவே #2F6FED80 என்பது அதே நீலம் சுமார் 50% ஒளிபுகாத்தன்மையில். இந்த picker ஒளிபுகும் நிறங்களுடன் செயல்படுவதால் ஆறு இலக்கங்களைக் காட்டுகிறது; தேவைப்படும்போது alpha ஜோடியை நீங்களே சேர்த்துக்கொள்ளுங்கள்.
- CSS-இல் எத்தனை பெயரிடப்பட்ட நிறங்கள் உள்ளன?
- CSS Color Module Level 4 148 நிறச் சொற்களை வரையறுக்கிறது; gray, grey போன்ற இரட்டை எழுத்துப்பிழைகளும் இதில் அடங்கும். புதியது rebeccapurple (#663399); CSS எழுத்தாளர் Eric Meyer-இன் மகள் Rebecca Meyer-இன் நினைவாக 2014-இல் சேர்க்கப்பட்டது.