HEX முதல் HSL மாற்றி

HEX இலிருந்து HSL மாற்றம் – ஒரு தொழில்நுட்ப விளக்கம்

HEX நிறக் குறியீடு (hex colour code) என்பது ஆறு இலக்க எண்கள் (அல்லது மூன்று இலக்க சுருக்கெழுத்து) கொண்ட ஒரு பதினறும மதிப்பு. இது RGB வண்ண மாதிரியில் சிவப்பு, பச்சை, நீலம் ஆகிய மூன்று அடிப்படை வண்ணங்களின் தீவிரத்தை நேரடியாகக் குறிக்கிறது. உதாரணமாக, #1E90FF என்பதில் 1E சிவப்புக்கும், 90 பச்சைக்கும், FF நீலத்துக்கும் உரியது. இந்த முறை CSS மற்றும் வடிவமைப்புக் கருவிகளில் பரவலாகப் பயன்படுத்தப்படுகிறது.

இதற்கு மாறாக, HSL (Hue, Saturation, Lightness) வண்ண மாதிரி மனிதப் புரிதலுக்காகவே உருவாக்கப்பட்டது. வண்ண சக்கரத்தில் (colour wheel) ஒரு புள்ளியின் அளவாக ஹூ (hue) 0° முதல் 360° வரை அளவிடப்படுகிறது. சாச்சுரேஷன் (saturation) 0% முதல் 100% வரை வண்ணத்தின் தீவிரத்தைக் குறிக்கும். லைட்னஸ் (lightness) 0% கறுப்பு முதல் 100% வெள்ளை வரை பிரகாசத்தை அளவிடுகிறது. HSL இன் முக்கிய அம்சம் என்னவென்றால், லைட்னஸை மட்டும் மாற்றும்போது ஹூ மாறாமல் இருக்கும். இதனால்தான் வண்ணத் தட்டுகள் (colour palettes) மற்றும் தீம் அமைப்புகளை உருவாக்க HSL சிறந்த தேர்வாக உள்ளது.

HEX குறியீடும் HSL மாதிரியும் ஆல்பா சேனலை (alpha channel) கொண்டிருக்கவில்லை. ஆறு இலக்க HEX மற்றும் மூன்று இலக்க HEX இரண்டுமே முற்றிலும் ஒளிபுகாத (fully opaque) வண்ணங்களை மட்டுமே குறிக்கின்றன. HSL வடிவமைப்பிலும் ஆல்பா மதிப்பு இல்லை. ஆகவே, இந்த மாற்றம் எப்போதும் முழு ஒளிபுகாத நிறங்களை மட்டுமே கையாள்கிறது.

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

பக்கத்தில் HEX நிறக் குறியீட்டை உள்ளிடுவதற்கு இரு வழிகள் உள்ளன: ஆறு இலக்க முழு வடிவம் (எ.கா., #4f46e5) அல்லது மூன்று இலக்க சுருக்கெழுத்து (எ.கா., #abc). # குறியீட்டுடன் அல்லது இல்லாமலும் உள்ளிடலாம். உள்ளீடு செய்தவுடன், HSL மதிப்புகள் தானாகவே கணக்கிடப்பட்டு காட்டப்படும்.

வெளியீடு மூன்று முக்கிய பகுதிகளைக் கொண்டுள்ளது:

• HSL மதிப்பு: ஹூ 0–360°, சாச்சுரேஷன் 0–100%, லைட்னஸ் 0–100% வடிவத்தில்
• மற்ற மாற்றங்கள்: HEX, RGB, HSV, CMYK, LAB வடிவங்களில் அதே வண்ணம்
• வண்ணக் காட்சி: உள்ளிட்ட வண்ணத்தின் நேரடிக் காட்சி

இந்த மதிப்புகள் அனைத்தும் ஒரே நேரத்தில் புதுப்பிக்கப்படுகின்றன. நீங்கள் HEX மதிப்பை மாற்றினால், மற்ற எல்லா வடிவங்களும் உடனே மாறும். அதேபோல், மற்ற வடிவங்களில் ஒன்றில் மதிப்பை மாற்றினால், HEX மதிப்பும் தானாக மாறும்.

விதிகள் மற்றும் விளிம்பு நிலை வழக்குகள்

இந்த பக்கம் சில குறிப்பிட்ட விதிகளைப் பின்பற்றுகிறது. முதலில், செல்லுபடியாகும் HEX குறியீடுகள் மட்டுமே ஏற்றுக்கொள்ளப்படும். செல்லாத மதிப்பை உள்ளிட்டால், "Enter a hex color like #4f46e5 or #abc" என்ற பிழை செய்தி காட்டப்படும்.

மற்றொரு முக்கியமான விஷயம்: நீங்கள் LAB அல்லது CMYK வடிவத்தில் ஒரு மதிப்பை உள்ளிட்டு, அது காண்பிக்க முடியாத (out-of-gamut) வண்ணமாக இருந்தால், பக்கம் அதை அருகிலுள்ள காண்பிக்க முடியும் வண்ணத்திற்கு சரிசெய்யும். இதனால், அந்த வண்ணத்தை மீண்டும் HEX ஆக மாற்றும்போது சிறிய மாறுபாடு ஏற்படலாம். எடுத்துக்காட்டாக, CMYK வடிவத்தில் மிக அதிக சாச்சுரேஷன் கொண்ட ஒரு வண்ணம் திரையில் காண்பிக்க முடியாததாக இருக்கலாம். அப்போது பக்கம் அதை நெருங்கிய RGB வண்ணத்திற்கு சரிசெய்யும்.

CMYK மதிப்புகள் திரை மதிப்பீடு மட்டுமே என்பதை கவனத்தில் கொள்ள வேண்டும். இவை தொழில்முறை அச்சுக்குப் பயன்படுத்த முடியாது. துல்லியமான CMYK மதிப்புகளுக்கு அளவீடு செய்யப்பட்ட (calibrated) அச்சு சாதனம் தேவைப்படும்.

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

HEX–HSL மாற்றத்தின் அடிப்படைக் கணிதம்

HEX இலிருந்து HSL மாற்றம் மூன்று படிகளில் நடைபெறுகிறது.

முதல் படி: HEX மதிப்பை RGB மதிப்புகளாக மாற்றுதல். இது நேரடியான மாற்றம். ஒவ்வொரு இரண்டு இலக்க பதினறும மதிப்பும் 0 முதல் 255 வரையிலான ஒரு முழு எண்ணாக மாற்றப்படுகிறது. உதாரணமாக, #4f46e5 என்பதில்:

• சிவப்பு: 4F = 79
• பச்சை: 46 = 70
• நீலம்: E5 = 229

இரண்டாம் படி: RGB மதிப்புகளை 0 முதல் 1 வரையிலான விகிதங்களாக மாற்றுதல். இதற்கு ஒவ்வொரு மதிப்பையும் 255 ஆல் வகுக்க வேண்டும்:

• R = 79/255 = 0.3098
• G = 70/255 = 0.2745
• B = 229/255 = 0.8980

மூன்றாம் படி: HSL கணக்கீடு. இதற்கு மூன்று அளவுகள் தேவை: சிவப்பு (R), பச்சை (G), நீலம் (B) விகிதங்கள். முதலில் அதிகபட்ச மற்றும் குறைந்தபட்ச மதிப்புகளைக் கண்டறிய வேண்டும்.

உதாரணத்தில்:

• அதிகபட்சம் (Max) = 0.8980 (நீலம்)
• குறைந்தபட்சம் (Min) = 0.2745 (பச்சை)
• வித்தியாசம் (Delta) = 0.6235

லைட்னஸ் கணக்கீடு: L = (Max + Min) / 2 = (0.8980 + 0.2745) / 2 = 0.5863 → 58.63%

சாச்சுரேஷன் கணக்கீடு: Delta 0 ஆக இல்லாததால், S = Delta / (1 - |2L - 1|) |2(0.5863) - 1| = |0.1726| = 0.1726 S = 0.6235 / (1 - 0.1726) = 0.6235 / 0.8274 = 0.7533 → 75.33%

ஹூ கணக்கீடு: Max மதிப்பு நீலமாக இருப்பதால், H = 60° × ((R - G) / Delta + 4) (0.3098 - 0.2745) / 0.6235 = 0.0565 H = 60° × (0.0565 + 4) = 60° × 4.0565 = 243.39°

எனவே, #4f46e5 என்பதன் HSL மதிப்பு: 243°, 75%, 59%

இந்த கணக்கீடு ஒவ்வொரு முறையும் பக்கத்தில் தானாகவே நடைபெறுகிறது.

HSL மற்றும் HSV – முக்கிய வேறுபாடுகள்

HSL மற்றும் HSV (Hue, Saturation, Value) இரண்டுமே வண்ணத்தை மூன்று கூறுகளாகப் பிரித்தாலும், அவற்றின் வரையறைகள் வேறுபடுகின்றன. HSL இல் லைட்னஸ் கறுப்பு (0%) முதல் வெள்ளை (100%) வரை செல்கிறது. இதில் 50% என்பது தூய வண்ணத்தைக் குறிக்கிறது. HSV இல் வேல்யூ (Value) கறுப்பு (0%) முதல் தூய வண்ணம் (100%) வரை செல்கிறது. இதில் சாச்சுரேஷன் மற்றும் வேல்யூ இரண்டும் அதிகமாக இருந்தால் மட்டுமே தூய வண்ணம் கிடைக்கும்.

எடுத்துக்காட்டாக, ஒரு நிறத்தின் தூய சிவப்பு:

• HSL: 0°, 100%, 50%
• HSV: 0°, 100%, 100%

இங்கு HSL இன் லைட்னஸ் 50% ஆகவும், HSV இன் வேல்யூ 100% ஆகவும் உள்ளது. HSV மாதிரி கிராபிக்ஸ் மென்பொருள்களில் பரவலாகப் பயன்படுத்தப்பட்டாலும், மனித புரிதலுக்கு HSL பொருத்தமானதாகக் கருதப்படுகிறது. ஏனென்றால், HSL இல் லைட்னஸை மாற்றும்போது வண்ணம் இயற்கையாக இலகுவாகவோ அல்லது கனமாகவோ மாறுவது போல் தோன்றும். HSV இல் வேல்யூவை மாற்றும்போது வண்ணத்தின் தீவிரமும் மாற்றமடையும்.

வண்ண வரம்பு (Colour Gamut) மற்றும் வெளியேறும் வண்ணங்கள்

கணினித் திரைகள் sRGB வண்ண வரம்பைப் பயன்படுத்துகின்றன. இதில் HEX மற்றும் RGB வடிவங்கள் சில குறிப்பிட்ட வண்ணங்களை மட்டுமே காண்பிக்க முடியும். CMYK வண்ண வரம்பு இதிலிருந்து முற்றிலும் வேறுபட்டது. ஒரு CMYK வண்ணம் sRGB வரம்புக்கு வெளியே இருந்தால், அது திரையில் துல்லியமாகக் காட்டப்பட முடியாது.

இந்த பக்கம் அத்தகைய சந்தர்ப்பங்களில் தானாகவே வண்ணத்தைச் சரிசெய்கிறது. எடுத்துக்காட்டாக, CMYK வடிவத்தில் மிக அதிக சயான் (cyan) மதிப்பு கொண்ட ஒரு வண்ணம் sRGB வரம்புக்கு வெளியே இருக்கலாம். அப்போது பக்கம் அதை நெருங்கிய sRGB வண்ணத்திற்கு சரிசெய்து காண்பிக்கும். இதனால், HEX மதிப்பில் சிறிய மாறுபாடு ஏற்படலாம். இது முற்றிலும் இயல்பானது மற்றும் தவிர்க்க முடியாதது.

CSS மற்றும் தீம் அமைப்பில் HSL பயன்பாடு

முன்நிற மேம்பாட்டாளர்களுக்கு HSL மிகவும் பயனுள்ளதாக உள்ளது. CSS Custom Properties உடன் HSL ஐப் பயன்படுத்துவது எளிது. உதாரணமாக, ஒரு முதன்மை வண்ணத்தை HSL மாறியாக வரையறுத்து, அதிலிருந்து சிறிய மாறுபாடுகளை உருவாக்கலாம்.

நீங்கள் ஒரு வலைத்தளத்தில் இருண்ட தீம் (dark theme) உருவாக்க விரும்பினால், HSL லைட்னஸை மட்டும் மாற்றலாம். இது முதன்மை வண்ணத்தின் ஹூ மற்றும் சாச்சுரேஷனைப் பாதிக்காமல், முழு தீமின் இருளை மாற்ற உதவுகிறது. இதேபோல், வண்ணம் மாறுபாடுகளுக்கு (colour variations) HSL எளிதானது. ஹூ மதிப்பில் 60° சேர்த்தால், நிற நிழல் (complementary colour) கிடைக்கும். ஹூ மதிப்பில் 30° சேர்த்தால், ஒத்த வண்ணம் (analogous colour) கிடைக்கும்.

அணுகல்தன்மை மற்றும் WCAG

HSL இன் மற்றொரு முக்கிய பயன்பாடு அணுகல்தன்மை (accessibility) சரிபார்ப்பில் உள்ளது. WCAG (Web Content Accessibility Guidelines) தரநிலைகளின்படி, உரை மற்றும் பின்னணி வண்ணங்களுக்கு இடையே குறைந்தது 4.5:1 மாறுபாடு (contrast ratio) இருக்க வேண்டும். HSL மாதிரி இதை எளிதாகக் கணக்கிட உதவுகிறது.

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

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

கே: மூன்று இலக்க HEX குறியீடும் ஆறு இலக்க குறியீடும் எவ்வாறு வேறுபடுகின்றன?

ப: மூன்று இலக்க HEX (எ.கா., #abc) என்பது ஆறு இலக்க குறியீட்டின் சுருக்கமாகும் (#aabbcc). இதில் ஒவ்வொரு இலக்கமும் இரண்டு முறை எழுதப்படுகிறது. அதாவது, #abc என்பது 170 (சிவப்பு), 187 (பச்சை), 204 (நீலம்) ஆகிய RGB மதிப்புகளைக் குறிக்கிறது.

கே: HSL மற்றும் HSV இடையே உள்ள முக்கிய வேறுபாடு என்ன?

ப: HSL இல் லைட்னஸ் 50% என்பது தூய வண்ணத்தையும், 0% கறுப்பு, 100% வெள்ளையையும் குறிக்கிறது. HSV இல் வேல்யூ 0% கறுப்பு, 100% தூய வண்ணத்தையும் குறிக்கிறது. HSL இல் வண்ணம் மாறாது என்றாலும், HSV இல் சாச்சுரேஷன் மற்றும் வேல்யூவின் தாக்கம் வேறுபடுகிறது.

கே: CMYK வடிவத்தில் நிறத்தை மாற்றியபின், HEX மதிப்பு ஏன் சிறிது மாறுகிறது?

ப: CMYK வண்ண வரம்பு sRGB வரம்பிலிருந்து வேறுபட்டது. ஒரு CMYK வண்ணம் sRGB இல் காண்பிக்க முடியாததாக இருந்தால், பக்கம் அதை நெருங்கிய sRGB வண்ணத்திற்கு மாற்றுகிறது. இதனால் HEX மதிப்பு மாறும்.

கே: இந்த மாற்றம் உலாவியில் ஏன் நடைபெறுகிறது?

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

கே: HSL மாதிரி ஏன் மனிதர்களுக்கு எளிதானது?

ப: மனிதக் கண் நிறத்தை ஹூ, சாச்சுரேஷன், லைட்னஸ் ஆகிய மூன்று பண்புகளின் அடிப்படையில் உணர்கிறது. HSL இந்த மூன்றையும் தனித்தனியாக வழங்குகிறது. HEX மற்றும் RGB இல் நிறத்தை மாற்ற முயன்றால், மூன்று மதிப்புகளையும் ஒரே நேரத்தில் மாற்ற வேண்டும். HSL இல் ஒரே ஒரு மதிப்பை மாற்றினால் போதும்.

கே: ஆல்பா மதிப்பு (transparency) ஏன் HSL இல் இல்லை?

ப: HSL வடிவமைப்பு முதலில் ஆல்பா சேனல் இல்லாமலே உருவாக்கப்பட்டது. CSS இல் HSLA (Hue, Saturation, Lightness, Alpha) என்ற மாறுபாடு உள்ளது. இந்த பக்கம் தற்போது முழு ஒளிபுகாத நிறங்களை மட்டுமே மாற்றுகிறது.