HSL-இலிருந்து HEX மாற்றி: வண்ண மாற்றத்தின் துல்லியமான கருவி
இந்தப் பக்கம் என்ன செய்கிறது?
நீங்கள் HSL வண்ண மதிப்புகளை உள்ளிடுகிறீர்கள் — Hue (சாயல்) 0 முதல் 360 டிகிரி வரை, Saturation (நிறைவுத்தன்மை) சதவீதமாக, Lightness (ஒளிர்வு) சதவீதமாக. உடனடியாக இந்த பக்கம் அதற்கு இணையான hexadecimal (HEX) வண்ணக் குறியீட்டைக் காட்டுகிறது. HEX குறியீடு என்பது ஆறு இலக்க (அல்லது மூன்று இலக்க சுருக்க வடிவ) குறியீடாகும், இது CSS மற்றும் வடிவமைப்பு கருவிகளில் பரவலாகப் பயன்படுத்தப்படுகிறது — உதாரணமாக #1E90FF. நீங்கள் மதிப்புகளைத் தட்டச்சு செய்யும்போதோ அல்லது ஒரு நிறத்தைத் தேர்வு செய்யும்போதோ HEX மதிப்பு உடனடியாகப் புதுப்பிக்கப்படும்.
இந்தப் பக்கம் HSL-இலிருந்து HEX மாற்றத்திற்காக மட்டுமே அர்ப்பணிக்கப்பட்டுள்ளது. அதுவே இதன் தனிச்சிறப்பு. HSL என்பது மனிதர்கள் நிறங்களைப் புரிந்துகொள்ள உதவும் ஒரு மாதிரி — ஒளிர்வை மட்டும் மாற்றினால் சாயல் அப்படியே இருக்கும்; இதனால்தான் HSL பாலெட் மற்றும் தீம் உருவாக்கத்தில் பயன்படுத்தப்படுகிறது. HEX என்பது ஆறு இலக்க (அல்லது மூன்று இலக்க சுருக்க) RGB குறியீடு; இது எட்டு இலக்க வடிவம் பயன்படுத்தப்படாவிட்டால் ஆல்பா (ஒளிபுகாநிலை) தகவலைக் கொண்டிருக்காது. HSL-இலிருந்து HEX மாற்றம் நேரடியானது, இழப்பற்றது — LAB அல்லது CMYK மாற்றங்களில் நிறம் வரம்பில் இல்லாதபோது சரிசெய்யப்படும்; இங்கு அந்த சிக்கல் இல்லை.
HSL மற்றும் HEX வண்ண மாதிரிகள்: அடிப்படை வேறுபாடுகள்
HSL (Hue, Saturation, Lightness) வண்ண மாதிரி மூன்று பரிமாணங்களைக் கொண்டது:
- Hue (சாயல்): 0° முதல் 360° வரை. 0° சிவப்பு, 120° பச்சை, 240° நீலம் — இது வண்ண வட்டத்தின் சுற்றளவைக் குறிக்கிறது.
- Saturation (நிறைவுத்தன்மை): 0% (சாம்பல்) முதல் 100% (முழு வண்ணம்) வரை. குறைந்த நிறைவு என்றால் நிறம் மங்கியதாக இருக்கும்; அதிக நிறைவு என்றால் அது தீவிரமானதாக இருக்கும்.
- Lightness (ஒளிர்வு): 0% (கருப்பு) முதல் 100% (வெள்ளை) வரை. 50% என்பது "சாதாரண" ஒளிர்வு — நிறம் முழுமையாகத் தெரியும். 25% இருண்டது, 75% வெளிச்சமானது.
HEX குறியீடு, மறுபுறம், RGB (சிவப்பு, பச்சை, நீலம்) மதிப்புகளை அடிப்படையாகக் கொண்டது. ஒவ்வொரு RGB சேனலும் 0 முதல் 255 வரையிலான மதிப்பைக் கொண்டுள்ளது. இது இரண்டு அறுகோண இலக்கங்களால் (hexadecimal) குறிக்கப்படுகிறது — 0-9 மற்றும் A-F. உதாரணமாக, RGB(79, 70, 229) என்பது #4F46E5 என்ற HEX குறியீடாகும். சில நேரங்களில் ஒவ்வொரு சேனலுக்கும் ஒரே இலக்க இணை (எ.கா., #44 → 4) இருந்தால், மூன்று இலக்க சுருக்க வடிவமும் பயன்படுத்தப்படலாம் (#4F46E5 க்கு மூன்று இலக்க வடிவம் இல்லை, ஆனால் #AABBCC → #ABC).
HSL மற்றும் HEX ஆகிய இரண்டும் sRGB வண்ண இடத்தின் ஒரு பகுதியாகும். எனவே HSL-இலிருந்து HEX மாற்றம் எப்போதும் புலப்படும் RGB வரம்பிற்குள் நிகழ்கிறது — எந்த நிறமும் இழக்கப்படாது அல்லது சரிசெய்யப்படாது. இது LAB அல்லது CMYK போன்ற மற்ற மாற்றங்களை விட எளிமையானது, ஏனெனில் அங்கு வண்ணம் வெளியேறினால் மாற்றம் தேவைப்படும்.
மாற்றம் எவ்வாறு செயல்படுகிறது? — பின்னணி அல்காரிதம்
மாற்றம் இரண்டு படிகளில் நிகழ்கிறது: முதலில் HSL-இலிருந்து RGB க்கு, பின்னர் RGB-இலிருந்து HEX க்கு.
HSL → RGB: இது ஒரு தரப்படுத்தப்பட்ட கணித மாற்றம். முதலில் Lightness மற்றும் Saturation இலிருந்து ஒரு இடைநிலை மதிப்பு கணக்கிடப்படுகிறது. பின்னர் Hue மதிப்பு 60° அலகுகளாகப் பிரிக்கப்பட்டு, RGB சேனல்களில் ஒன்று முதன்மையாகவும், மற்றொன்று இரண்டாம் நிலையாகவும் இருக்கும். உதாரணமாக, Hue 243° என்பது நீல-ஊதா பகுதியில் உள்ளது — சிவப்பு (79), பச்சை (70), நீலம் (229) என மாறுகிறது. HSL(243, 75%, 59%) க்கான RGB மதிப்பு (79, 70, 229) ஆகும்.
RGB → HEX: ஒவ்வொரு RGB சேனலும் 0-255 மதிப்பை எடுத்து, அதை இரண்டு அறுகோண இலக்கங்களாக மாற்றுகிறது. 79 → 4F (4×16+15=79), 70 → 46, 229 → E5. இவற்றைச் சேர்த்தால் #4F46E5 கிடைக்கும். மூன்று இலக்க சுருக்கம் சாத்தியமா என்பதைச் சரிபார்க்க, ஒவ்வொரு சேனலுக்கும் முதல் மற்றும் இரண்டாவது இலக்கம் சமமா என்று பார்க்கப்படும் — #4F46E5 இல் அவை சமமாக இல்லை, எனவே ஆறு இலக்க வடிவம் மட்டுமே காட்டப்படும்.
இந்த பக்கத்தில், நீங்கள் HSL மதிப்புகளை உள்ளிடும்போது அல்லது ஒரு வண்ணத் தேர்வியைப் பயன்படுத்தும்போது, இந்த மாற்றம் உடனடியாக நிகழ்கிறது. HEX குறியீடு மட்டுமல்ல, RGB, HSV, CMYK மற்றும் LAB மதிப்புகளும் ஒரே நேரத்தில் புதுப்பிக்கப்படுகின்றன. அனைத்து செயலாக்கமும் உங்கள் உலாவியில் மட்டுமே நடைபெறுகிறது — நீங்கள் உள்ளிடும் எந்த தகவலும் வெளியே அனுப்பப்படுவதில்லை.
பிழை கையாளுதல் மற்றும் விளிம்பு நிலைகள்
இந்தக் கருவி மிகவும் கண்டிப்பானது — உள்ளீடுகள் சரியான வடிவத்தில் இல்லாவிட்டால் உடனடியாகப் பிழை செய்தியைக் காட்டும். செல்லுபடியாகும் HSL வடிவம் இதுதான்: Hue 0–360, Saturation 0–100% மற்றும் Lightness 0–100%. உதாரணம்: 243, 75%, 59%. பின்வரும் சூழ்நிலைகளில் பிழை ஏற்படும்:
- Hue 360 ஐ விட அதிகமாகவோ அல்லது 0 க்கும் குறைவாகவோ இருந்தால்.
- Saturation அல்லது Lightness சதவீதக் குறியீடு (
%) இல்லாமல் உள்ளிடப்பட்டால் (எ.கா.,75என்பது தவறு;75%என்பது சரி). - Saturation அல்லது Lightness 0–100 வரம்பிற்கு வெளியே இருந்தால்.
- மதிப்புகள் முற்றிலும் தவறான வடிவத்தில் (எ.கா., உரை) உள்ளிடப்பட்டால்.
இந்த சந்தர்ப்பங்களில் காண்பிக்கப்படும் பிழை செய்தி: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” இது தமிழில் “HSL ஐ hue 0–360 ஆகவும் இரண்டு சதவீதங்களுடனும் உள்ளிடவும், உதாரணம்: 243, 75%, 59%” என்று பொருள்படும். பிழை செய்தி ஆங்கிலத்திலேயே இருக்கும் என்பதை நினைவில் கொள்ளவும் (குறிப்பு: இந்த கட்டுரையில் மேற்கோள் காட்டப்பட்டுள்ளது).
மற்றொரு முக்கியமான விளிம்பு நிலை: HSL-இலிருந்து HEX மாற்றம் எப்போதும் sRGB வரம்பிற்குள் இருக்கும் — எனவே வண்ணம் “வெளியேறுதல்” (out-of-gamut) என்பது இங்கு இல்லை. ஆனால் CMYK மற்றும் LAB மதிப்புகள் காட்டப்பட்டாலும், CMYK மதிப்பு திரையில் காண்பிக்கப்படும் ஒரு மதிப்பீடு மட்டுமே; தொழில்முறை அச்சு மதிப்புகளிலிருந்து இது மாறுபடலாம்.
பிற வண்ண இடங்கள் மற்றும் குறிப்புகள்
இந்த பக்கம் HSL-இலிருந்து HEX மாற்றத்திற்கு முக்கியத்துவம் அளித்தாலும், ஒரே நேரத்தில் பல வண்ண இடங்களில் மதிப்புகளைக் காட்டுகிறது:
- RGB (சிவப்பு, பச்சை, நீலம்): ஒவ்வொரு சேனலும் 0-255 முழு எண்.
- HSV (Hue, Saturation, Value): HSL போன்றது, ஆனால் Value (மதிப்பு) என்பது அதிகபட்ச RGB சேனலை அடிப்படையாகக் கொண்டது.
- CMYK (Cyan, Magenta, Yellow, Key/Black): RGB இலிருந்து மாற்றப்பட்டது; இது அச்சுக்கான மதிப்பீடு.
- LAB (CIELAB): மனிதக் கண் உணர்வை அடிப்படையாகக் கொண்ட சீரான வண்ண இடம்.
இந்தப் பல்வேறு மதிப்புகளை ஒரே இடத்தில் பார்ப்பதால், வடிவமைப்பாளர்கள் தங்களுக்குத் தேவையான வடிவத்தில் நிறத்தைப் பயன்படுத்த முடியும். உதாரணமாக, நீங்கள் HSL இல் ஒரு நிறத்தைச் சரிசெய்து, பின்னர் அதன் HEX குறியீட்டை CSS இல் நகலெடுக்கலாம்.
யாருக்கு இது தேவை?
- வடிவமைப்பாளர்கள் (Designers): HSL இல் வண்ணப் பாலெட்டுகளை உருவாக்கி, பின்னர் HEX குறியீடுகளை குறியீட்டிலோ அல்லது வடிவமைப்பு கருவிகளிலோ (Figma, Sketch) பயன்படுத்த வேண்டியவர்கள்.
- முன்னணி மேம்பாட்டாளர்கள் (Front-end developers): வடிவமைப்பு கோப்புகளிலிருந்து HSL மதிப்புகளைப் பெற்று, அவற்றை CSS HEX பண்புகளாக மாற்ற வேண்டியவர்கள்.
- அணுகல்தன்மை (Accessibility) ஆர்வலர்கள்: WCAG மாறுபாடு விகிதங்களை கட்டுப்படுத்த Lightness ஐ மாற்றி, பின்னர் அதன் HEX மதிப்பை உற்பத்திக்குப் பயன்படுத்துபவர்கள்.
- தீம் உருவாக்குபவர்கள்: ஒரு சாயலை (hue) பராமரிக்கும் போது வெவ்வேறு ஒளிர்வு மற்றும் நிறைவு மதிப்புகளைச் சோதித்து, அவற்றை HEX ஆக மாற்றுபவர்கள்.
HSL இன் மிகப்பெரிய நன்மை என்னவென்றால், Lightness ஐ மாற்றும்போது Hue மாறாமல் இருக்கும். இது கருப்பொருட்களுக்கு ஒரே நிற குடும்பத்தில் பல்வேறு நிழல்களை உருவாக்க உதவுகிறது. ஆனால் HEX இல் அத்தகைய நேரடி “ஒளிர்வு” பரிமாணம் இல்லை — இதனால்தான் HSL-இலிருந்து HEX மாற்றி மிகவும் பயனுள்ளதாக உள்ளது.
அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)
கேள்வி 1: HSL மதிப்புகளை எப்படி உள்ளிட வேண்டும்?
பதில்: Hue 0 முதல் 360 வரை ஒரு எண்ணாக, Saturation மற்றும் Lightness சதவீதக் குறியீட்டுடன் (எ.கா., 75%, 59%). மூன்று மதிப்புகளையும் கமாவால் பிரிக்கவும். உதாரணம்: 243, 75%, 59%.
கேள்வி 2: மூன்று இலக்க HEX சுருக்கம் என்பது என்ன?
பதில்: ஒவ்வொரு RGB சேனலின் முதல் மற்றும் இரண்டாவது இலக்கம் சமமாக இருந்தால் (எ.கா., #AABBCC), அதை #ABC என சுருக்கலாம். இந்த பக்கம் அத்தகைய சந்தர்ப்பங்களில் சுருக்க வடிவத்தையும் காட்டக்கூடும்.
கேள்வி 3: HSL-இலிருந்து HEX மாற்றத்தில் வண்ணம் இழக்கப்படுமா? பதில்: இல்லை. HSL மற்றும் HEX இரண்டும் sRGB வண்ண இடத்தை அடிப்படையாகக் கொண்டவை. மாற்றம் முழுமையாக மீளக்கூடியது மற்றும் இழப்பற்றது — ஆனால் CMYK மாற்றத்தில் இது பொருந்தாது.
கேள்வி 4: காட்டப்படும் CMYK மதிப்பு ஏன் அச்சுக்குப் பொருந்தாமல் இருக்கலாம்? பதில்: திரையில் கணக்கிடப்படும் CMYK மதிப்பு ஒரு மதிப்பீடு மட்டுமே. உண்மையான அச்சு CMYK மதிப்புகள் அச்சுப்பொறி, காகிதம் மற்றும் மை சார்ந்திருக்கும். எனவே தொழில்முறை அச்சுக்கு தனி CMYK மாற்றி பயன்படுத்த பரிந்துரைக்கப்படுகிறது.
கேள்வி 5: நான் தவறான மதிப்புகளை உள்ளிட்டால் என்ன நடக்கும்? பதில்: கருவி உடனடியாகப் பிழை செய்தியைக் காண்பிக்கும்: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” அனைத்து மதிப்புகளும் சரியான வரம்பில் இல்லாத வரை HEX மதிப்பு புதுப்பிக்கப்படாது.
கேள்வி 6: இந்த கருவி எனது தரவுகளைச் சேமிக்கிறதா? பதில்: இல்லை. அனைத்து செயலாக்கமும் உங்கள் உலாவியில் மட்டுமே நடைபெறுகிறது. நீங்கள் உள்ளிடும் எந்த மதிப்பும் சேவையகத்திற்கு அனுப்பப்படுவதில்லை அல்லது சேமிக்கப்படுவதில்லை.
இந்த HSL-இலிருந்து HEX மாற்றி, வடிவமைப்பு மற்றும் மேம்பாட்டு பணிப்பாய்வில் ஒரு துல்லியமான இணைப்பாகச் செயல்படுகிறது. HSL இன் மனிதநேய வண்ணக் கட்டுப்பாட்டையும், HEX இன் உலகளாவிய CSS பயன்பாட்டையும் இணைக்கிறது. நீங்கள் ஒரு தீம் உருவாக்குகிறீர்களோ, அணுகல்தன்மை சோதனைகளைச் செய்கிறீர்களோ, அல்லது ஒரு வடிவமைப்பை குறியீட்டுக்கு மாற்றுகிறீர்களோ, இந்த கருவி உங்கள் தேவையை நிறைவேற்றுகிறது.