படத்திலிருந்து HEX வண்ணம் பெறுதல்

படத்திலிருந்து ஹெக்ஸ் நிறம்: CSS மற்றும் வடிவமைப்பிற்கான நிற மதிப்பீடு

படத்திலிருந்து நிறத்தைப் பிரித்தெடுக்கும் இந்தக் கருவி, மற்றவற்றிலிருந்து வேறுபட்டது: இது முதன்மை வெளியீடாக ஹெக்ஸ் நிறக் குறியீட்டை வழங்குகிறது. CSS மற்றும் வடிவமைப்பு கருவிகளில் நிலையானதாக இருக்கும் இந்த ஆறு-இலக்க (அல்லது மூன்று-இலக்க சுருக்கெழுத்து) RGB குறியீடு, color, background-color போன்ற எந்த CSS பண்புக்கும் நேரடியாகப் பயன்படுத்தப்படலாம். மற்ற சக பக்கங்கள் RGB functional notation அல்லது HSL ஐ மையமாகக் கொண்டிருக்கும் போது, இந்தப் பக்கம் ஹெக்ஸ் பிரதிநிதித்துவத்தை வழங்குகிறது. ஆறு-இலக்க வடிவத்தில் ஆல்பா சேனல் இல்லை, எனவே வெளிப்படைத்தன்மை "Alpha ‹n›% – this pixel is partly transparent." என்று தனியாக அறிவிக்கப்படுகிறது.

நிற மாதிரிகள்: ஹெக்ஸ், RGB மற்றும் HSL

நிறங்களைப் பிரதிநிதித்துவப்படுத்தும் மூன்று முக்கிய முறைகளை இந்தக் கருவி ஒரே நேரத்தில் காட்டுகிறது: HEX, RGB மற்றும் HSL.

• ஹெக்ஸ் (Hex): இது # குறியீட்டுடன் தொடங்கும் ஆறு எழுத்துகள் (0-9 மற்றும் A-F). எடுத்துக்காட்டாக, #1E90FF என்பது நீல நிறத்தின் ஒரு நிழல். முதல் இரண்டு எழுத்துகள் சிவப்பு, அடுத்த இரண்டு பச்சை, கடைசி இரண்டு நீலம். CSS இல் நிறங்களைக் குறிப்பிட இதுவே மிகவும் சுருக்கமான மற்றும் பரவலான வழி. color: #1E90FF; அல்லது background-color: #1E90FF; என நேரடியாகப் பயன்படுத்தலாம்.

• RGB (Red, Green, Blue): ஒவ்வொரு வண்ண சேனலின் மதிப்பும் 0 முதல் 255 வரை இருக்கும். rgb(30, 144, 255) என்பது #1E90FF க்கு சமம். இது மனிதர்கள் படிக்க எளிதானது, ஆனால் CSS இல் parentheses மற்றும் commas தேவை.

• HSL (Hue, Saturation, Lightness): வண்ண சக்கரத்தில் (0-360 டிகிரி) Hue, நிறைவு (0-100%) மற்றும் ஒளிர்வு (0-100%) ஆகியவற்றை அடிப்படையாகக் கொண்டது. hsl(210, 100%, 56%) என்பது #1E90FF க்கு சமம். இது வண்ணங்களை உள்ளுணர்வுடன் சரிசெய்ய உதவுகிறது. ஒளிர்வை 50% ஆக அதிகரித்தால், வண்ணம் வெளிர் மஞ்சள் ஆக மாறும்.

வேலை செய்யும் உதாரணம்: ஒரு படத்தில் #FF5733 (சிவப்பு-ஆரஞ்சு) நிறத்தைப் பெற்றால், அதன் RGB மதிப்பு rgb(255, 87, 51) மற்றும் HSL மதிப்பு hsl(11, 100%, 60%) ஆகும். இந்த மூன்று மதிப்புகளும் ஒரே வண்ணத்தின் வெவ்வேறு கணித பிரதிநிதித்துவங்கள். ஹெக்ஸ் CSS இல் மிகவும் நடைமுறைக்குரியது.

படச் சுருக்கம் மற்றும் ஆண்டி-ஆலியாசிங் விளைவுகள்

JPEG அல்லது ஸ்கிரீன்ஷாட் போன்ற பட வடிவங்கள் சுருக்கத்தைப் பயன்படுத்துகின்றன. JPEG இழப்பு சுருக்கத்தைப் பயன்படுத்துகிறது – இது கோப்பு அளவைக் குறைக்க, அருகிலுள்ள பிக்சல்களின் வண்ண மதிப்புகளை சராசரிப்படுத்தி மாற்றுகிறது. இதேபோல், ஆண்டி-ஆலியாசிங் (Antialiasing) என்பது மென்மையான விளிம்புகளை உருவாக்க அருகிலுள்ள பிக்சல்களில் வெவ்வேறு வண்ணங்களைக் கலக்கும் ஒரு நுட்பமாகும். இதன் விளைவாக, ஒரு வண்ணம் சீரானதாகத் தோன்றும் பகுதியில் கூட, இரண்டு பிக்சல்கள் வெவ்வேறு ஹெக்ஸ் மதிப்புகளைக் கொண்டிருக்கலாம்.

கருவி படத்தில் உள்ள துல்லியமான பிக்சல் மதிப்பைப் படிக்கிறது. JPEG சுருக்கத்தின் காரணமாக, #FF0000 (தூய சிவப்பு) நிறமாகத் தோன்றும் பகுதியில் ஒரு பிக்சல் #FF0100 ஆகவும், அடுத்த பிக்சல் #FE0001 ஆகவும் இருக்கலாம். இது பிழை அல்ல, மாறாக சுருக்க வழிமுறையின் இயற்கையான விளைவு. இதைப் புரிந்துகொள்வது, நீங்கள் தேர்ந்தெடுக்கும் பிக்சலின் முக்கியத்துவத்தை உணர்த்துகிறது – பெரிதாக்கப்பட்ட காட்சி இங்குதான் உதவுகிறது.

வெளிப்படைத்தன்மை (ஆல்பா சேனல்) மற்றும் அதன் விளைவுகள்

PNG மற்றும் WebP போன்ற பட வடிவங்கள் ஆல்பா சேனலை (வெளிப்படைத்தன்மை) ஆதரிக்கின்றன. ஒரு பிக்சல் பகுதியளவு வெளிப்படைத்தன்மை கொண்டிருந்தால் (எ.கா., 50% ஆல்பா), கருவி "Alpha 50% – this pixel is partly transparent." என்று காட்டுகிறது.

ஆறு-இலக்க ஹெக்ஸ் குறியீடு (#RRGGBB) ஆல்பா சேனலை குறியாக்கம் செய்யாது. #RRGGBBAA (எட்டு-இலக்க ஹெக்ஸ்) இருந்தாலும், இந்தப் பக்கம் ஆறு-இலக்க வடிவத்தை மட்டுமே வெளியிடுகிறது. வெளிப்படைத்தன்மை ஒரு தனி சதவீதமாக அறிவிக்கப்படுகிறது. அதாவது, 50% வெளிப்படைத்தன்மையுடன் #FF0000 (சிவப்பு) ஐ தேர்ந்தெடுத்தால், ஹெக்ஸ் மதிப்பு #FF0000 ஆகவே இருக்கும், ஆனால் "Alpha 50%" காட்டப்படும். RGB மதிப்பு rgba(255, 0, 0, 0.5) என்று இருக்கும். நீங்கள் உண்மையான பிக்சல் மதிப்பைப் பெறுகிறீர்கள், அதன் பின்னால் என்ன இருக்கிறது என்பதை கருவி கருத்தில் கொள்ளாது. இது CSS இல் rgba() அல்லது hsla() செயல்பாடுகளைப் பயன்படுத்த வேண்டிய இடத்தில், ஹெக்ஸ் மட்டும் போதுமானதாக இருக்காது என்பதை நினைவூட்டுகிறது.

பெரிதாக்கி மற்றும் குறுக்குக் குறி மூலம் துல்லியமான பிக்சல் தேர்வு

கருவியின் மிக முக்கியமான அம்சங்களில் ஒன்று பெரிதாக்கப்பட்ட காட்சி (Magnified view) ஆகும். நீங்கள் சுட்டியைப் படத்தின் மேல் நகர்த்தும்போது, அந்த பிக்சலைச் சுற்றியுள்ள பகுதி பெரிதாகக் காட்டப்பட்டு, நீங்கள் தேர்ந்தெடுக்கும் பிக்சலை துல்லியமாகப் பார்க்க உதவுகிறது. ஆண்டி-ஆலியாசிங் மற்றும் சுருக்கத்தால் ஏற்படும் நுட்பமான வண்ண மாறுபாடுகளைக் கையாளும்போது இது மிகவும் பயனுள்ளதாக இருக்கும்.

விசைப்பலகை வழிசெலுத்தல் (Keyboard Navigation) மூலம், உங்களால் சுட்டியைப் பயன்படுத்த முடியாவிட்டால் (அணுகல்தன்மை காரணங்களுக்காக), நீங்கள் அம்பு விசைகளைப் பயன்படுத்தி குறுக்குக் குறியை (Crosshair) நகர்த்தலாம். Shift விசையை அழுத்திப் பிடித்து அம்பு விசையை அழுத்தினால், 10 பிக்சல்கள் தூரத்திற்கு நகரும். Enter அல்லது Space விசையை அழுத்தினால், தற்போதைய நிறம் சேமிக்கப்படும். ஒரு பிக்சலைக் கிளிக் செய்வதற்கு இது மாற்று வழி. நீங்கள் கிளிக் செய்யும் போது, "Saved #1E90FF to your picks." போன்ற செய்தி தோன்றும்.

நிற வரலாறு மேலாண்மை: 12 உருப்படிகள் வரை சேமிப்பு

நீங்கள் கிளிக் செய்யும் ஒவ்வொரு நிறமும் நிற வரலாற்றில் (Color History) சேமிக்கப்படும். இந்த வரலாறு அதிகபட்சம் 12 உருப்படிகளை மட்டுமே வைத்திருக்கும். நீங்கள் 12வதைச் சேமித்த பிறகு, 13வதைச் சேமிக்கும்போது மிகவும் பழையது நீக்கப்படும்.

ஒரே RGB மதிப்பைக் கொண்டாலும், வெவ்வேறு ஆல்பா மதிப்புகள் கொண்ட நிறங்கள் தனி உள்ளீடுகளாக சேமிக்கப்படும். எடுத்துக்காட்டாக, #FF0000 (ஆல்பா 100%) மற்றும் #FF0000 (ஆல்பா 50%) இரண்டும் வரலாற்றில் வெவ்வேறு இடங்களைப் பிடிக்கும். ஏனெனில் அவை வெவ்வேறு காட்சி விளைவுகளை உருவாக்குகின்றன.

வரலாற்றில் உள்ள ஒரு ஸ்வாட்ச் (swatch) மீது கிளிக் செய்தால், அந்த நிறம் மீண்டும் ஏற்றப்பட்டு, அதன் மதிப்புகள் (HEX, RGB, HSL) காட்டப்படும். நீங்கள் ஒரு முறை பயன்படுத்திய நிறத்தை மீண்டும் நகலெடுக்க இது உதவுகிறது.

உள்ளீடு மற்றும் வெளியீடு வரையறைகள்

ஆதரிக்கப்படும் பட வடிவங்கள்: PNG, JPG, WebP, GIF, AVIF, HEIC. MIME வகைகளின்படி:

• image/jpeg
• image/png
• image/webp
• image/gif
• image/avif
• image/heic, image/heif

ஆதரிக்கப்படாத வடிவத்தில் ஒரு கோப்பு இழக்கப்பட்டால், "That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image." என்று செய்தி தோன்றும். படத்தைத் திறக்க முடியாவிட்டால், "That image could not be opened. It may be corrupted or in an unsupported format." என்று தோன்றும்.

அளவு வரம்பு: படத்தின் மிக நீளமான பக்கம் (Longest side) 4096 பிக்சல்களை தாண்டினால், படம் தானாகவே அளவு குறைக்கப்படும் (scale down). இது உலாவியின் செயல்திறனைப் பாதுகாக்கிறது.

வெளியீடுகள்:

• "Image ready — move over it to sample, click to save a color." (படம் தயார்)
• படத்தின் பரிமாணங்கள் (அகலம் × உயரம்).
• தேர்ந்தெடுக்கப்பட்ட பிக்சலின் ஆயங்கள் (x, y).
• HEX: ஆறு-இலக்க ஹெக்ஸ் குறியீடு.
• RGB: சிவப்பு, பச்சை, நீல மதிப்புகள்.
• HSL: சாயல், நிறைவு, ஒளிர்வு மதிப்புகள்.
• வெளிப்படைத்தன்மை இருந்தால், "Alpha ‹n›% – this pixel is partly transparent."
• சேமிக்கப்பட்டதும், "Saved ‹hex› to your picks."

எந்த நிற மதிப்பையும் (HEX, RGB, HSL) கிளிக் செய்தால், அது உடனடியாக கிளிப்போர்டுக்கு நகலெடுக்கப்படும். கிளிப்போர்டு அணுகலை உலாவி தடுத்தால், "Could not copy — your browser blocked clipboard access." என்று தோன்றும்.

"Start over" பொத்தான் மற்றும் மீட்டமைப்பு

"Start over" பொத்தானைக் கிளிக் செய்தால், எல்லாம் மீட்டமைக்கப்படும்:

• படம் அகற்றப்படும்.
• நிற வரலாறு காலியாகும்.
• கருவி அதன் ஆரம்ப நிலைக்குத் திரும்பும்.

அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)

1. JPEG மற்றும் PNG படங்களுக்கு இடையே நிற மதிப்புகள் ஏன் வேறுபடுகின்றன?

JPEG இழப்பு சுருக்கத்தைப் பயன்படுத்துகிறது, இது தரவை நீக்குகிறது. PNG இழப்பற்றது, அசல் பிக்சல் மதிப்புகளைத் துல்லியமாகப் பாதுகாக்கிறது. JPEG இல், சுருக்கம் அருகிலுள்ள பிக்சல்களை சராசரிப்படுத்தி மாற்றலாம், எனவே ஒரு திட நிறமாகத் தோன்றும் பகுதி பல நெருக்கமான ஹெக்ஸ் மதிப்புகளைக் கொண்டிருக்கும். PNG இல், #FF0000 என்பது #FF0000 ஆகவே இருக்கும்.

2. நான் ஒரு ஆல்பா சேனல் கொண்ட PNG படத்தைப் பயன்படுத்தினால், ஹெக்ஸ் மதிப்பு வெளிப்படைத்தன்மையைக் காட்டுமா?

இல்லை. ஆறு-இலக்க ஹெக்ஸ் (#RRGGBB) ஆல்பா சேனலை குறியாக்கம் செய்யாது. வெளிப்படைத்தன்மை தனியாக "Alpha ‹n›%" என காட்டப்படும். உங்களுக்கு வெளிப்படைத்தன்மை தேவைப்பட்டால், CSS இல் rgba() அல்லது hsla() ஐப் பயன்படுத்தவும். எட்டு-இலக்க ஹெக்ஸ் (#RRGGBBAA) வழங்கப்படவில்லை.

3. நான் ஒரு பிக்சலைக் கிளிக் செய்தால், அது வரலாற்றில் எப்படி சேமிக்கப்படும்?

நீங்கள் கிளிக் செய்த 12 நிறங்கள் வரை வரலாற்றில் தோன்றும். ஒரே RGB மதிப்பு ஆனால் வெவ்வேறு ஆல்பா மதிப்புகள் கொண்ட நிறங்கள் தனித்தனியாக சேமிக்கப்படும். வரலாற்றில் உள்ள ஒரு ஸ்வாட்ச்சைக் கிளிக் செய்தால், அந்த நிறம் மீண்டும் காட்டப்படும்.

4. Shift விசை ஏன் 10 பிக்சல்களால் நகர்த்துகிறது?

வழிசெலுத்தலை விரைவுபடுத்த Shift உதவுகிறது. சிறிய இடைவெளிகளுக்கு அம்பு விசைகள் 1 பிக்சல் நகரும். Shift 10 மடங்கு வேகமாக நகர்த்துகிறது, இது பெரிய பகுதிகளை விரைவாக ஆய்வு செய்ய உதவுகிறது. இது பொதுவான அணுகல்தன்மை நடைமுறை.

5. 4096 பிக்சல் வரம்புக்கு மேல் உள்ள படங்கள் என்ன ஆகும்?

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

6. நிற மதிப்பை நகலெடுக்கும் போது, அது CSS இல் எப்படி பயன்படுத்தப்படுகிறது?

நீங்கள் ஹெக்ஸ் மதிப்பை நகலெடுத்தால், அதை நேரடியாக color: #1E90FF; அல்லது background-color: #1E90FF; என CSS இல் ஒட்டலாம். RGB மதிப்பை நகலெடுத்தால், rgb(30, 144, 255) என எழுதவும். HSL மதிப்பை நகலெடுத்தால், hsl(210, 100%, 56%) என எழுதவும். நகலெடுக்க தேர்ந்தெடுக்கப்பட்ட மதிப்பு உங்கள் தேவைக்கேற்ப மாறுபடும்.