HSL முதல் RGB மாற்றம்: இந்தப் பக்கம் என்ன செய்கிறது
HSL (Hue, Saturation, Lightness) வடிவில் உங்களுக்குத் தெரிந்த ஒரு வண்ணத்தை RGB (Red, Green, Blue) மதிப்புகளாக மாற்றுவதற்கான உடனடி கருவி இந்தப் பக்கம். நீங்கள் Hue-ஐ 0 முதல் 360 டிகிரி வரையிலும், Saturation மற்றும் Lightness-ஐ சதவீதங்களிலும் உள்ளிடவும், அதற்கு நிகரான RGB மதிப்புகள் (ஒவ்வொன்றும் 0 முதல் 255 வரையிலான முழு எண்கள்) தானாகக் காட்டப்படும். உதாரணமாக, 243, 75%, 59% எனும் HSL மதிப்பு 79, 70, 229 என்ற RGB மும்மதிப்பைத் தருகிறது. இது வண்ணத்தைப் பற்றி மனித சிந்தனைக்கு ஏற்ற மாதிரியில் (HSL) இருந்து, திரை ஒளியை வெளியிடும் துல்லியமான எண்களுக்கு (RGB) நகர்வதைச் சாத்தியமாக்குகிறது.
மாற்றம் முழுமையாக உங்கள் உலாவியிலேயே நடைபெறுகிறது; நீங்கள் உள்ளிடும் எந்த தரவும் எங்கும் பதிவேற்றப்படுவதில்லை. எனவே வண்ண மாற்றங்கள் மிக வேகமாகவும், பாதுகாப்பாகவும் இருக்கும். இது ஒரு தனிப்பட்ட, பயனர் கட்டுப்பாட்டில் உள்ள கருவியாகச் செயல்படுகிறது.
இந்தப் பக்கத்தைத் தனித்துவமாக்குவது என்ன
HSL என்பது மனித புரிதலுக்காக வடிவமைக்கப்பட்ட ஒரு வண்ண மாதிரி. நீங்கள் Lightness-ஐ மாற்றும்போது Hue மாறாமல் இருக்கும், இதனால் வண்ணத் திட்டங்கள் மற்றும் தீம்களை உருவாக்க HSL பரவலாகப் பயன்படுத்தப்படுகிறது. RGB, மறுபுறம், திரையில் வண்ணக் கணிதத்தின் செயல்பாட்டு இடம்; ஒவ்வொரு பிக்சலும் அதன் சிவப்பு, பச்சை, நீல ஒளி அளவுகளைக் கொண்டு வண்ணத்தை உருவாக்குகிறது.
இந்த மாற்றம் இழப்பற்றது (lossless) – ஒவ்வொரு செல்லுபடியான HSL மதிப்பும் திரையில் காட்டக்கூடிய வரம்புக்குள் (0-255) ஒரு ஒற்றை RGB மும்மதிப்புக்கு மட்டுமே பொருந்தும். வேறு சில மாற்றங்களில் நடப்பதுபோல், இங்கு வண்ணம் மாறுபடுவதும் இல்லை. உதாரணமாக, LAB அல்லது CMYK இலிருந்து RGB க்கு மாற்றும்போது "out-of-gamut" clipping ஏற்படலாம் – அதாவது, சில வண்ணங்கள் திரையில் காட்ட முடியாத அளவுக்கு வெளியே இருப்பதால், அவை அருகிலுள்ள காட்டக்கூடிய வண்ணமாக மாற்றப்படும், இது நிற மாற்றத்தை ஏற்படுத்தும். ஆனால் HSL -> RGB மாற்றத்தில் அத்தகைய out-of-gamut clipping இல்லை, ஏனெனில் HSL வரம்பே RGB வரம்பிற்குள் முழுமையாக பொருந்துகிறது. நீங்கள் HSL இல் மாற்றிய வண்ணம், திரையில் மாற்றமில்லாமல் தோன்றும்.
இந்தப் பக்கம் உடனடி, தானியக்க பதிலீட்டை வழங்குகிறது; ஒவ்வொரு உள்ளீட்டு மாற்றத்துக்கும் அனைத்து வெளியீட்டு புலங்களும் (HEX, RGB, HSL, HSV, CMYK, LAB) ஒரே நேரத்தில் புதுப்பிக்கப்படும்.
உள்ளீடுகள் மற்றும் வெளியீடுகள்
உள்ளீடு – ஒரு HSL மதிப்பு:
- Hue: 0 முதல் 360 வரையிலான எண் (டிகிரி)
- Saturation: சதவீதம் (0% முதல் 100%)
- Lightness: சதவீதம் (0% முதல் 100%)
- எடுத்துக்காட்டு:
243, 75%, 59%
வெளியீடுகள் – அனைத்தும் தானாகப் புதுப்பிக்கப்படும்:
| வண்ண மாதிரி | விளக்கம் | எடுத்துக்காட்டு மதிப்பு |
|---|---|---|
| HEX | #RRGGBB வடிவம் | #4F46E5 |
| RGB | சிவப்பு, பச்சை, நீலம் (0-255) | 79, 70, 229 |
| HSL | மீண்டும் காட்டப்படும் (உள்ளீட்டு மதிப்பு) | 243°, 75%, 59% |
| HSV | Hue, Saturation, Value | 243°, 69%, 90% |
| CMYK | சியான், மெஜந்தா, மஞ்சள், கருப்பு (சதவீதங்கள்) | 65%, 69%, 0%, 10% |
| LAB | L, a, b (சீரான வண்ண இடம்) | 30, 60, -80 |
விதிகள் மற்றும் விளிம்பு நிலைகள் (Edge Cases)
தவறான உள்ளீடு: HSL புலத்தில் செல்லுபடியாகாத மதிப்பை உள்ளிட்டால், கீழ்க்கண்ட பிழைச் செய்தி காட்டப்படும்:
"Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
இதன் பொருள், Hue 0–360 வரம்பில் ஒரு முழு எண்ணாகவும், Saturation மற்றும் Lightness சதவீதக் குறியுடன் (எ.கா., 75%) இருக்க வேண்டும். கமாவால் (,) பிரிக்கப்பட்டு இவை ஒரே வரியில் உள்ளிடப்பட வேண்டும்.
CMYK வெளியீடு ஒரு திரை மதிப்பீடு: இந்தப் பக்கத்தில் காட்டப்படும் CMYK மதிப்புகள் (சியான், மெஜந்தா, மஞ்சள், கருப்பு) திரையில் மட்டுமே கணக்கிடப்படும் மதிப்பீடு ஆகும். இவை தொழில்முறை அச்சில் பயன்படுத்தப்படும் மதிப்புகளைவிட மாறுபடலாம், ஏனெனில் அச்சு மெஷின், காகிதம், மை, மற்றும் ப்ரிண்டர் சுயவிவரங்களைப் பொறுத்து மாறுபடும். எனவே, இந்த CMYK மதிப்புகளை நேரடியாக அச்சுக்குப் பயன்படுத்தினால் வண்ணம் மாறக்கூடும்.
வேறு எந்த clipping இல்லை: முன்பே குறிப்பிட்டது போல், HSL -> RGB மாற்றத்தில் gamut clipping இல்லை. ஒரு HSL மதிப்பு, வெளியீட்டு RGB மதிப்புகளுக்குள் முழுமையாகப் பொருந்தும்.
இந்தக் கருவி யாருக்குத் தேவை
- வடிவமைப்பாளர்கள் (Designers): vColor palette மற்றும் themes உருவாக்கும்போது, HSL இல் அவர்கள் சிந்திக்கிறார்கள். ஆனால் முகப்பு (CSS, SVG) அல்லது மென்பொருள் குறியீட்டில் RGB மதிப்புகளே தேவைபடுகின்றன. இந்தக் கருவி மூலம் உடனே மாற்றி எடுத்துக்கொள்ளலாம்.
- முன்-இறுதி டெவலப்பர்கள் (Front-end developers): Figma, Sketch, Adobe XD போன்ற டிசைன் கருவிகள் HSL ஐ வழங்குகின்றன. ஆனால் CSS இல்
rgb()அல்லதுrgba()பதிலாக HSL பயன்படுத்தலாம், சில டெவலப்பர்கள் RGB ஐத்தான் விரும்புகிறார்கள். இந்தக் கருவி மூலம் மாற்றலாம். - வண்ணத்தை மனித மொழியில் புரிந்துகொள்ள விரும்புபவர்கள்: "நீலம், சற்று வெளிறிய, மிதமான ஒளிர்வு" என HSL சிந்திக்கிறீர்களா? அதன் திரை எண்களை உடனடியாக அறியலாம்.
வண்ண மாதிரிகள் பற்றிய கூடுதல் புரிதல்
HSL மற்றும் RGB – வித்தியாசம்: RGB ஒரு additive வண்ண மாதிரி; மூன்று நிற ஒளிகளைக் கூட்டினால் வெள்ளை ஒளி உண்டாகும். திரைகள் இந்த முறையில் செயல்படுகின்றன. HSL மனிதக் கண்ணுக்கும் மனதுக்கும் இயல்பாகப் பொருந்தும் – "இந்த நீலத்தை இருட்டாக்க" (lightness குறைக்க) எளிதானது. RGB இல் இதே மாற்றம் மூன்று மதிப்புகளையும் மாற்றுவதைக் கோரும்.
HEX மற்றும் RGB: HEX என்பது RGB மதிப்புகளை 16-அடிமான எண்களில் குறிக்கும் ஒரு முறை. #RRGGBB – இரண்டு இலக்கம் சிவப்பு, இரண்டு பச்சை, இரண்டு நீலம். 79 என்பது 4F ஆகும்.
HSV மற்றும் HSL: இரண்டும் "hue, saturation,..." ஆனால் HSV (Hue, Saturation, Value) Lightnessக்கு பதில் Value (max of RGB) ஐப் பயன்படுத்துகிறது. HSL இல் Lightness = (max+min)/2. இரு மாதிரிகளுக்கும் மாற்றம் வேறுபட்டது.
LAB: CIELAB வண்ண இடம், மனிதக் கண் பார்வையில் சீரான மாற்றங்களை வழங்க வடிவமைக்கப்பட்டது. L ஒளிர்வை, a சிவப்பு-பச்சை அச்சையும், b மஞ்சள்-நீல அச்சையும் குறிக்கிறது. இங்கு LAB காட்டப்படும், ஆனால் மாற்றம் மேலே விளக்கிய clipping இல்லாதது.
CMYK – subtractive model: காகிதத்தில் மை அடித்து வண்ணம் உருவாக்கப்படுகிறது; வெளிச்சம் உறிஞ்சப்படுகிறது. எனவே CMYK திரையில் காட்டப்படும் மதிப்புகள் அச்சு மாதிரியில் மாறுபடும். இந்தப் பக்கத்தில் காட்டப்படுவது ஒரு தோராயமான கணக்கீடு மட்டுமே.
Gamut பற்றி: ஒவ்வொரு வண்ண மாதிரிக்கும் அது காட்டக்கூடிய வண்ணங்களின் தொகுப்பு வேறு. sRGB (பொதுவான திரை வண்ண இடம்) HSL மூலம் முழுமையாக உள்ளடக்கப்படுகிறது. எனவே HSL -> RGB இல் clipping இல்லை. LAB அல்லது CMYK, sRGB-ஐ விட பெரியதாக இருக்கலாம், அதனால் clipping ஏற்படுகிறது. இந்தப் பக்கம் அந்தச் சிக்கலைத் தவிர்க்கிறது.
அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)
கே: HSL மதிப்புகளை எவ்வாறு உள்ளிட வேண்டும்?
ப: Hue 0–360 வரை ஒரு முழு எண், Saturation மற்றும் Lightness சதவீதக் குறியுடன் (75% போல), கமாவால் பிரிக்கப்பட்டு: 243, 75%, 59%. இடைவெளி வேண்டும் (optional).
கே: ஒவ்வொரு HSL மதிப்பிற்கும் ஒரே ஒரு RGB மதிப்பு மட்டும்தானா? ப: ஆம். மாற்றம் ஒன்றுக்கு-ஒன்று (bijective) – ஒவ்வொரு செல்லுபடியான HSL மதிப்பும் ஒரு தனித்த RGB மும்மதிப்புக்கு மட்டுமே பொருந்தும். எனவே நீங்கள் வண்ணத்தை இழக்கமாட்டீர்கள்.
கே: CMYK வெளியீட்டை அச்சுக்குப் பயன்படுத்தலாமா? ப: இது ஒரு திரை மதிப்பீடு மட்டுமே. உண்மையான அச்சு வண்ணங்கள் காகிதம், மை, மற்றும் அச்சுப்பொறி சார்ந்து மாறுபடும். தொழில்முறை மென்பொருளில் CMYK ICC profiles ஐப் பயன்படுத்தி மாற்றம் செய்ய பரிந்துரைக்கப்படுகிறது.
கே: மாற்றம் வேகமாக இல்லை – பிழை செய்தி தோன்றுகிறது.
ப: உங்கள் HSL உள்ளீடு விதிகளுக்குப் பொருந்துகிறதா என சரிபார்க்கவும்: Hue 0-360, Saturation மற்றும் Lightness சதவீதம். உதாரணத்தைப் பின்பற்றுங்கள்: 243, 75%, 59%. மேலும், கமாவும் இடைவெளியும் சரியாக உள்ளவா?
கே: இந்தக் கருவி மூலம் LAB முதல் RGB மாற்றம் செய்ய முடியுமா? ப: இல்லை. இந்தப் பக்கம் HSL ஐ மட்டுமே உள்ளீடாக ஏற்றுக் கொள்கிறது. LAB இல் உள்ள வண்ணங்களை முதலில் HSL க்கு மாற்றிய பின்னரே இங்கே பயன்படுத்த முடியும் (இது சரியான மாற்றம் அல்ல – LAB மற்றும் HSL வெவ்வேறு color spaces). இந்தக் கருவியின் நோக்கம் HSL -> RGB மட்டுமே.
கே: கருப்பு (0,0,0) HSL இல் எப்படி உள்ளிட வேண்டும்?
ப: கருப்பு நிறத்திற்கு, Hue எதுவாக வேண்டுமானாலும் இருக்கலாம் (0 ஐப் பரிந்துரைக்கிறோம்), Saturation 0%, Lightness 0%: 0, 0%, 0%. RGB வெளியீடு 0, 0, 0 ஆக இருக்கும். வெள்ளை நிறத்திற்கு: 0, 0%, 100%.
கே: தரவு உங்கள் சேவருக்கு அனுப்பப்படுமா? ப: இல்லை. அனைத்து மாற்றங்களும் உங்கள் உலாவியில் மட்டுமே நடைபெறுகின்றன. எந்த தகவலும் வெளியே அனுப்பப்படவில்லை.