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

RGB இலிருந்து HSL மாற்றி – வண்ண அறிவியலை எளிமையாகப் புரிந்துகொள்ள

இந்தப் பக்கம் உங்கள் RGB வண்ணத்தை (சிவப்பு, பச்சை, நீலம் – ஒவ்வொன்றும் 0 முதல் 255 வரை) உடனடியாக HSL வடிவத்திற்கு (நிறமாலை 0–360°, நிறைவுத்தன்மை %, ஒளிர்த்தன்மை %) மாற்றுகிறது. நீங்கள் மூன்று எண்களை கமா அல்லது இடைவெளி பிரித்து உள்ளிட வேண்டும். உதாரணமாக 79, 70, 229 என்று உள்ளிட்டால், அதன் HSL மதிப்பு hsl(243°, 75%, 59%) ஆகவும், HEX மதிப்பு #4F46E5 ஆகவும், HSV, CMYK, LAB வடிவங்களிலும் முடிவுகளைக் காணலாம். எந்த ஒரு புலத்தையும் திருத்தினால், மற்ற அனைத்து புலங்களும் உடனே புதுப்பிக்கப்படும். இந்த மாற்றங்கள் அனைத்தும் உங்கள் உலாவியிலேயே நிகழ்கின்றன; உங்கள் உள்ளீடுகள் எங்கும் பதிவேற்றப்படுவதில்லை.

RGB மற்றும் HSL – இரண்டு வெவ்வேறு வண்ண மொழிகள்

RGB (சிவப்பு, பச்சை, நீலம்) என்பது திரைகளில் வண்ணம் காட்டப் பயன்படும் கூட்டல் மாதிரி (additive model). ஒவ்வொரு வண்ண சேனலும் 0 (இருட்டு) முதல் 255 (முழு ஒளி) வரை இருக்கும். மூன்று சேனல்களும் 255 என்றால் வெள்ளை, 0 என்றால் கருப்பு. இது திரைகளின் இயற்பியல் நடத்தையைப் பிரதிபலிக்கிறது, ஆனால் மனிதர்கள் வண்ணத்தைப் பற்றி நினைப்பது போல் இல்லை.

HSL (Hue – நிறமாலை, Saturation – நிறைவுத்தன்மை, Lightness – ஒளிர்த்தன்மை) என்பது மனித உணர்வுக்கு ஏற்ப வடிவமைக்கப்பட்ட மாதிரி. நிறமாலை என்பது ஒரு வட்டத்தில் 0° (சிவப்பு) முதல் 360° வரை சுழலும் கோணம். நிறைவுத்தன்மை 0% (சாம்பல்) முதல் 100% (முழு வண்ணம்) வரை இருக்கும். ஒளிர்த்தன்மை 0% (கருப்பு) முதல் 100% (வெள்ளை) வரை. HSL இன் பெரும் பலன்: ஒரு வண்ணத்தின் ஒளிர்த்தன்மையை மட்டும் மாற்றினால், அதன் நிறமாலை மாறாமல் இருக்கும். RGB இல், சிவப்பு மதிப்பை மாற்றினால் வண்ணம் முற்றிலும் மாறிவிடும். எனவே HSL வண்ணத் தொகுப்புகள், தீம்கள், மற்றும் அணுகத்தக்க மாறுபாடு வடிவமைப்புகளுக்கு மிகவும் பொருத்தமானது.

RGB இலிருந்து HSL மாற்றத்தின் கணிதம் – எப்படி இது செயல்படுகிறது

கணினி முதலில் RGB மதிப்புகளை 0–255 இலிருந்து 0–1 வரையிலான இயல்பாக்கப்பட்ட (normalized) வரம்புக்குக் கொண்டுவருகிறது. எடுத்துக்காட்டாக, RGB(79, 70, 229) ஐ எடுத்துக் கொள்வோம்:

• R' = 79/255 ≈ 0.310
• G' = 70/255 ≈ 0.275
• B' = 229/255 ≈ 0.898

இப்போது இவற்றின் அதிகபட்ச மதிப்பு (Cmax) = 0.898, குறைந்தபட்ச மதிப்பு (Cmin) = 0.275. இவற்றின் வித்தியாசம் Δ = Cmax - Cmin = 0.623.

ஒளிர்த்தன்மை (Lightness) கணக்கிட: L = (Cmax + Cmin) / 2 = (0.898 + 0.275) / 2 = 0.5865. சதவீதமாக 58.65%, அதாவது 59% (கிட்டத்தட்ட).

நிறைவுத்தன்மை (Saturation) L இன் மதிப்பைப் பொறுத்தது. L 0.5 க்கும் குறைவாக இருந்தால் S = Δ / (Cmax + Cmin). L 0.5 க்கு மேல் இருந்தால் S = Δ / (2 - Cmax - Cmin). இங்கே L = 0.5865 > 0.5, எனவே S = 0.623 / (2 - 0.898 - 0.275) = 0.623 / 0.827 = 0.753. சதவீதமாக 75.3% → 75%.

நிறமாலை (Hue) கணக்கிட: Cmax எந்த சேனல் என்று பார்க்க வேண்டும். இங்கே B (நீலம்) அதிகமாக உள்ளது (B' = 0.898). எனவே சூத்திரம்: H = 60° * ( ( (R' - G') / Δ ) + 4 ). மதிப்புகளைப் பொருத்தினால்: (0.310 - 0.275) / 0.623 = 0.035 / 0.623 ≈ 0.056. இதில் 4 ஐக் கூட்ட: 4.056. 60° ஆல் பெருக்க: 243.36° → சுமார் 243°. இதுவே HSL வெளியீடு: hsl(243°, 75%, 59%).

இதே மாற்றம் உங்கள் உலாவியில் மில்லி விநாடிகளில் நிகழ்கிறது. நீங்கள் HSL புலத்தில் நேரடியாக மதிப்புகளை உள்ளிட்டால், கருவி மீண்டும் RGB ஆக மாற்றுகிறது – அதே நேரத்தில் HEX, HSV போன்ற வடிவங்களையும் புதுப்பிக்கிறது.

இந்தக் கருவியின் சிறப்பு அம்சங்களும் எல்லை விதிகளும்

• துல்லியமான உள்ளீட்டு சரிபார்ப்பு: RGB மதிப்புகளை மூன்று முழு எண்களாக (0–255) மட்டுமே ஏற்கும். தவறான வடிவம் (எ.கா., 79 70 அல்லது 79,70,300) என்றால் பின்வரும் செய்தி தோன்றும்: “Enter RGB as three numbers 0–255, like 79, 70, 229.” HSL உள்ளீட்டிலும் இதேபோல்: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” சதவீதக் குறியீடு (%) இல்லாமல் உள்ளிட்டாலும் பிழை காட்டும்.

• LAB மற்றும் CMYK இல் இருந்து வரும் மாற்றங்கள்: LAB அல்லது CMYK மதிப்புகள் காட்சி RGB வரம்பிற்கு வெளியே இருந்தால், கருவி அதை அருகில் உள்ள காட்சிப்படுத்தக்கூடிய வண்ணத்திற்குச் சரிசெய்கிறது. அந்த வண்ணத்தை மீண்டும் மாற்றினால் அசல் மதிப்பிலிருந்து சிறிது வேறுபடும். இது வண்ண இடைவெளி (gamut) வேறுபாடுகளால் ஏற்படும் இயல்பான நிகழ்வு.

• CMYK வெளியீடு திரை மதிப்பீடு மட்டுமே: இது திரையில் காட்டப்படும் தோராயமான CMYK மதிப்பு. தொழில்முறை அச்சுக்குப் பயன்படுத்தினால் சரியான நிறப்பிரிவினை (color separation) கண்டிப்பாக தேவை.

• அனைத்து புலங்களும் ஒருங்கிணைந்து செயல்படுகின்றன: நீங்கள் HEX புலத்திலும் மாற்றலாம் – உதாரணமாக #FF5733 ஐ நகலெடுத்து ஒட்டினால், அது உடனே RGB, HSL, HSV, CMYK, LAB ஆக அனைத்தும் புதுப்பிக்கப்படும். இது வண்ணங்களை வெவ்வேறு வடிவங்களில் பார்த்துப் பழக உதவுகிறது.

யாருக்கு இந்தக் கருவி தேவைப்படும்?

• UI/UX வடிவமைப்பாளர்கள் – அணுகத்தக்க வண்ணத் தொகுப்புகளை உருவாக்கும் போது ஒளிர்த்தன்மையை மட்டும் சுதந்திரமாக மாற்ற HSL ஐப் பயன்படுத்துகின்றனர். WCAG மாறுபாடு விகிதங்களைச் சந்திக்க, நிறமாலை மாறாமல் ஒளிர்த்தன்மையை மட்டும் குறைத்து/அதிகரிக்கலாம்.

• முன்னணி டெவலப்பர்கள் – Figma போன்ற கருவிகளில் இருந்து RGB மதிப்புகளை எடுத்து, CSS இல் hsl() அல்லது hsla() செயல்பாடுகளில் பயன்படுத்த இந்த மாற்றம் தேவைப்படுகிறது. உதாரணமாக background-color: hsl(243°, 75%, 59%) – இதைப் புரிந்துகொள்வதும் எடிட் செய்வதும் RGB ஐ விட எளிது.

• தீம் உருவாக்குபவர்கள் – ஒரு பிராண்ட் வண்ணத்தின் ஒளி மற்றும் இருள் வகைகளை உருவாக்க HSL இன் ஒளிர்த்தன்மை அச்சைப் பயன்படுத்துகிறார்கள். ஒரே நிறமாலையில் 30%, 50%, 70% ஒளிர்த்தன்மை கொண்ட மூன்று சாயல்கள் – இவை hsl(243°, 75%, 30%), hsl(243°, 75%, 50%), hsl(243°, 75%, 70%) – ஒரு இணக்கமான தீமை உருவாக்குகின்றன.

• தரவு காட்சிப்படுத்தல் வடிவமைப்பாளர்கள் – வரிசைமுறை வண்ண அளவீடுகளில் (sequential scales) ஒளிர்த்தன்மை இயற்கையான மாறுபாட்டைத் தருகிறது. HSL இல் ஒளிர்த்தன்மையை மட்டும் மாற்றி பல படிநிலைகளை உருவாக்கலாம்.

HSL இன் நடைமுறைப் பயன்பாடும் வரம்புகளும்

CSS இல் hsl() மற்றும் hsla() (alpha வெளிப்படைத்தன்மை) பரவலாக ஆதரிக்கப்படுகின்றன. JavaScript இல் element.style.color = 'hsl(243, 75%, 59%)' என்று எழுதி இயக்கவியல் மாற்றங்களைச் செய்யலாம். HSL இன் ஒரு பெரிய நன்மை, அதனுடன் மாறுபாட்டைச் சரிபார்ப்பது எளிது. எடுத்துக்காட்டாக, WCAG AA க்கு (4.5:1 விகிதம்) உரை மற்றும் பின்னணி இடையே ஒளிர்த்தன்மை வேறுபாடு தேவை. HSL இல், இரண்டு வண்ணங்களின் L மதிப்புகளை ஒப்பிட்டு விரைவாக முடிவு செய்யலாம்.

இருப்பினும் HSL முழுமையான உணர்வு சீரான (perceptually uniform) மாதிரி அல்ல. ஒரே ஒளிர்த்தன்மை மதிப்பில் மஞ்சள் மற்றும் நீலம் வெவ்வேறு பிரகாசமாகத் தோன்றும். LAB மாதிரி இந்தச் சிக்கலைச் சரிசெய்கிறது, ஆனால் CSS இல் நேரடியாக LAB பயன்பாடு குறைவு. எனவே, வண்ணத் தொகுப்புகளை உருவாக்கும்போது, HSL மட்டுமே போதுமானதா என்பதைச் சரிபார்த்துக் கொள்வது நல்லது.

மற்றொரு வரம்பு: RGB மற்றும் HSL இரண்டும் sRGB நிற இடைவெளியில் (color space) செயல்படுகின்றன. LCD/OLED திரைகள் இந்த இடைவெளியைப் பயன்படுத்துகின்றன. ஆனால் P3 அல்லது Rec.2020 போன்ற பரந்த இடைவெளிகளில், HSV அல்லது HSL மதிப்புகள் திரையின் திறனை முழுமையாகப் பிரதிபலிக்காது. எனவே உயர் வரம்பு (HDR) வண்ணங்களுக்கு இந்தக் கருவி பொருந்தாது.

FAQ

1. RGB மதிப்புகளை உள்ளிடும் போது கமாவிற்குப் பதில் இடைவெளி பயன்படுத்தலாமா? ஆம், 79 70 229 போன்று இடைவெளியில் பிரித்தும் உள்ளிடலாம். கருவி இரண்டு வடிவங்களையும் ஏற்கும்.

2. HSL இல் hsl(243, 75, 59) என்று சதவீதக் குறியீடு இல்லாமல் உள்ளிட்டால் என்ன நடக்கும்? கருவி பிழை செய்தி காட்டும். HSL உள்ளீட்டில் hue (0–360) பிறகு saturation மற்றும் lightness-க்கு சதவீதக் குறியீடு (%) கட்டாயம். உதாரணம்: 243, 75%, 59%.

3. CMYK மதிப்பு அச்சுக்குத் துல்லியமாக இருக்குமா? இல்லை. இது திரையில் காண்பிக்கப்படும் மதிப்பீடு மட்டுமே. அச்சுக்கு உண்மையான CMYK மாற்றம் பிரிண்டர் சுயவிவரத்தைப் பொறுத்தது. தொழில்முறை அச்சுக்குப் பயன்படுத்தினால் நிறப்பிரிவினை (ICC profile) சரிபார்க்க வேண்டும்.

4. LAB மதிப்புகளை உள்ளிட்டால் RGB வரம்பிற்கு வெளியே உள்ள வண்ணம் என்னவாகும்? கருவி அதை அருகில் உள்ள காட்சிப்படுத்தக்கூடிய RGB வண்ணத்திற்கு மாற்றும். அந்த வண்ணத்தை மீண்டும் LAB ஆக மாற்றினால் அசல் LAB மதிப்பிலிருந்து சிறிது வேறுபடும். இது gamut clipping எனப்படும் இயற்கையான செயல்முறை.

5. இந்த கருவியில் உள்ளீடு சேமிக்கப்படுகிறதா? இல்லை. எல்லா மாற்றங்களும் உங்கள் உலாவியின் JavaScript மூலம் நிகழ்கின்றன. எந்தத் தரவும் சேவையகத்திற்கு அனுப்பப்படவில்லை.

6. ஒரே RGB வண்ணத்திற்கு வெவ்வேறு கருவிகளில் HSL மதிப்பு சிறிது வேறுபடுவது ஏன்? சில கருவிகள் HSL மதிப்பை முழு எண்களாக வட்டமிடுகின்றன, சில தசம இடங்களுடன் காட்டுகின்றன. மேலும் RGB மாற்றத்தில் பயன்படுத்தப்படும் சீரமைப்பு முறை (rounding) மற்றும் sRGB காமா திருத்தம் ஆகியவற்றில் சிறிய வேறுபாடுகள் இருக்கலாம். எங்கள் கருவி நிலையான கணித முறைகளைப் பின்பற்றுகிறது.