HEX இலிருந்து RGB க்கு மாற்றம் என்றால் என்ன?
இந்தப் பக்கம் ஒரு நிறத்தின் அறுபதின்ம (hexadecimal) குறியீட்டை (எ.கா #4f46e5 அல்லது #abc) அதன் பதின்ம RGB மதிப்புகளாக (எ.கா 79, 70, 229) மாற்றுகிறது. முகப்பில் உள்ள உள்ளீட்டுப் பெட்டியில் நீங்கள் ஒரு HEX நிறக் குறியீட்டை தட்டச்சு செய்தவுடன், தொடர்புடைய மூன்று RGB எண்கள் (ஒவ்வொன்றும் 0 முதல் 255 வரையிலான முழு எண்கள்) உடனடியாகக் காட்டப்படும். மேலும் HSL, HSV, CMYK, LAB போன்ற பிற வண்ண வடிவங்களும் தானாகவே புதுப்பிக்கப்படும்.
இந்தப் பக்கத்தை தனித்துவமாக்குவது என்னவென்றால், இது HEX குறியீட்டை (அடிப்படை-16) RGB சேனல்களாக (அடிப்படை-10) மாற்றுகிறது, இது திரைகள் மற்றும் வண்ணக் கலவை கணிதங்களுக்குத் தேவையான வடிவமாகும். HEX குறியீடுகள் CSS இல் பரவலாகப் பயன்படுத்தப்பட்டாலும், அவை அடிப்படையில் மூன்று 8-பிட் சேனல்களின் ஒரு குறுக்குவடிவமே ஆகும். RGB எண்கள் அந்தச் சேனல்களை நேரடியாக வெளிப்படுத்துகின்றன. இங்கு மாற்றம் முற்றிலும் கணித ரீதியானது: ஒவ்வொரு ஜோடி அறுபதின்ம இலக்கங்களும் 16-ன் அடுக்குகளால் பெருக்கப்படுகின்றன, எனவே முடிவு துல்லியமானது மற்றும் மீளக்கூடியது (எந்த வட்டமிடுதலும் அல்லது வண்ண-வெளி சுருக்கமும் இல்லை).
இந்தப் பக்கம் ஆறு இலக்க HEX (#RRGGBB) மற்றும் மூன்று இலக்க சுருக்கக் குறியீடு (#RGB) ஆகிய இரண்டையும் ஏற்றுக்கொள்கிறது. # முன்னொட்டு விருப்பத்தேர்வு; நீங்கள் அதை சேர்க்கலாம் அல்லது தவிர்க்கலாம். எட்டு இலக்க HEX குறியீடுகள் (alpha சேனலை உள்ளடக்கியவை) இந்தப் பக்கத்தில் கையாளப்படுவதில்லை; பக்கம் ஆறு அல்லது மூன்று இலக்க HEX மட்டுமே எதிர்பார்க்கிறது.
மூன்று இலக்க HEX சுருக்கக்குறி – ஏன், எப்படி?
மூன்று இலக்க HEX குறியீடுகள் (எ.கா #abc அல்லது #fff) என்பது ஆறு இலக்க குறியீடுகளின் குறுகிய வடிவமாகும். ஒவ்வொரு சுருக்கப்பட்ட இலக்கமும் அதன் முழு வடிவத்தில் இரட்டிப்பாகும்:
#abc→#aabbcc#fff→#ffffff#4d2→#44dd22
இந்த விரிவாக்கம் பக்கத்தால் தானாகவே செய்யப்படுகிறது. நீங்கள் #abc என்று உள்ளிட்டால், அது முதலில் #aabbcc ஆக மாற்றப்பட்டு, பின்னர் RGB ஆக மாற்றப்படும். இதன் காரணம், HEX குறியீட்டின் அசல் வடிவமைப்பில் இருந்து வருகிறது: மூன்று இலக்க வடிவம் முதன்முதலில் HTML இன் ஆரம்ப காலங்களில் பயன்படுத்தப்பட்டது, அங்கு குறைந்த நிற ஆழம் (216 வண்ணங்கள்) இருந்தன. ஒவ்வொரு சேனலுக்கும் ஒரு ஹெக்ஸ் இலக்கம் (0-15) மட்டுமே இருந்தது, அதை இரட்டிப்பாக்கி 0-255 வரம்பை அடைந்தது. இன்று, மூன்று இலக்க HEX மிகவும் அரிதாகவே பயன்படுத்தப்படுகிறது, ஆனால் பல CSS பண்புகள் இன்னும் அதை ஆதரிக்கின்றன.
மாற்றும் முறை – ஒரு செய்முறை எடுத்துக்காட்டு
எடுத்துக்காட்டாக, #4f46e5 என்ற HEX குறியீட்டை எடுத்துக் கொள்வோம். இது மூன்று ஜோடி இலக்கங்களைக் கொண்டுள்ளது:
| ஜோடி | அறுபதின்ம மதிப்பு | பதின்ம மதிப்பு (கணக்கீடு) | RGB சேனல் |
|---|---|---|---|
| 4f | 4f | (4 × 16) + 15 = 79 | Red (சிவப்பு) |
| 46 | 46 | (4 × 16) + 6 = 70 | Green (பச்சை) |
| e5 | e5 | (14 × 16) + 5 = 229 | Blue (நீலம்) |
எனவே #4f46e5 → RGB (79, 70, 229).
இந்தக் கணக்கீட்டில், ஒவ்வொரு அறுபதின்ம இலக்கமும் 0-15 வரையிலான மதிப்பைக் குறிக்கிறது (A=10, B=11, C=12, D=13, E=14, F=15). முதல் இலக்கம் 16-ன் மடங்காகவும், இரண்டாவது இலக்கம் ஒன்றின் மடங்காகவும் பெருக்கப்படுகிறது. உதாரணமாக, 4f இல்:
4= 4 × 16 = 64f= 15- மொத்தம் = 64 + 15 = 79
இந்த முறை ஒவ்வொரு HEX குறியீட்டிற்கும் துல்லியமாக வேலை செய்கிறது. வட்டமிடுதல் இல்லை; முடிவு எப்போதும் 0 மற்றும் 255 க்கு இடையில் ஒரு முழு எண்.
பொதுவான HEX நிறங்களுக்கான RGB மதிப்புகள்
| HEX குறியீடு | RGB மதிப்புகள் |
|---|---|
| #000000 | 0, 0, 0 |
| #ffffff | 255, 255, 255 |
| #ff0000 | 255, 0, 0 |
| #00ff00 | 0, 255, 0 |
| #0000ff | 0, 0, 255 |
| #808080 | 128, 128, 128 |
| #ff6600 | 255, 102, 0 |
HEX மற்றும் RGB – CSS மற்றும் வலைப்பயன்பாட்டில் உள்ள வேறுபாடுகள்
CSS இல், ஒரு நிறத்தை வரையறுக்க இரண்டு வழிகள் உள்ளன: color: #ff6600; மற்றும் color: rgb(255, 102, 0);. இரண்டுமே உலாவியால் ஒரே மாதிரியாக விளக்கப்படுகின்றன. HEX குறியீடுகள் குறுகியவை மற்றும் எழுத எளிதானவை, குறிப்பாக நீங்கள் ஒரு வண்ணத் தட்டில் இருந்து நேரடியாக நகலெடுக்கும்போது. ஆனால் JavaScript இல், canvas API அல்லது p5.js போன்ற நூலகங்களில் வண்ணங்களைக் கையாளும்போது, RGB மதிப்புகள் (எண்களின் வரிசை அல்லது பொருள்) தேவைப்படுகின்றன.
இந்தப் பக்கம் இரண்டு வடிவங்களுக்கும் இடையே உள்ள இடைவெளியை நிரப்புகிறது. நீங்கள் ஒரு வடிவமைப்பு மாதிரியிலிருந்து HEX மதிப்பை (எ.கா #1E90FF) பெற்று, அதை canvas இல் fillStyle ஆகப் பயன்படுத்த விரும்பினால், முதலில் RGB ஆக மாற்ற வேண்டும். இங்கே தானியங்கு மாற்றம் நிகழ்கிறது. மேலும், பக்கத்தில் உள்ள மற்ற அனைத்து வண்ண வடிவங்களும் (HSL, HSV, CMYK, LAB) ஒரே நேரத்தில் புதுப்பிக்கப்படுகின்றன, எனவே நீங்கள் வெவ்வேறு வடிவங்களில் தேவைப்பட்டால், அவற்றை நகலெடுக்கலாம்.
CSS rgb() செயல்பாடு கமாவால் பிரிக்கப்பட்ட மூன்று முழு எண்களை எடுக்கிறது. இந்தப் பக்கத்தின் வெளியீடு அதற்கு ஏற்றதாக உள்ளது: 79, 70, 229 என்பதை நீங்கள் நேரடியாக rgb(79, 70, 229) ஆகப் பயன்படுத்தலாம்.
வழக்கமான தவறுகள் மற்றும் விளிம்பு நிலைகள்
இந்த மாற்றம் கணித ரீதியாக எளிமையானது என்றாலும், பல பொதுவான தவறுகள் உள்ளன:
-
# முன்னொட்டைத் தவிர்ப்பது: பக்கமானது
#இல்லாமல் HEX குறியீட்டை ஏற்றுக்கொள்ளும்.4f46e5போன்ற உள்ளீடும் சரியாக வேலை செய்யும். ஆனால்#ஐ மட்டும் உள்ளிட்டு, பின்னர் எதுவும் சேர்க்காமல் இருந்தால், பக்கமானது"Enter a hex color like #4f46e5 or #abc."என்ற பிழை செய்தியைக் காண்பிக்கும். -
எட்டு இலக்க HEX:
#4f46e5ff(alpha சேனலுடன்) போன்ற உள்ளீடுகள் ஏற்கப்படாது. இந்தப் பக்கம் ஆறு அல்லது மூன்று இலக்க HEX மட்டுமே எதிர்பார்க்கிறது. -
தவறான எழுத்துக்கள்:
#xyzஅல்லது#12gபோன்ற உள்ளீடுகள் சரியான அறுபதின்ம எழுத்துக்கள் அல்ல (g முதல் z வரை அனுமதிக்கப்படாது). இது மீண்டும் பிழை செய்தியைத் தூண்டும். -
மூன்று இலக்க மற்றும் ஆறு இலக்க கலப்பு:
#abcசரியானது, ஆனால்#abஅல்லது#abcdசரியல்ல. நீங்கள் சரியான வடிவத்தில் இருப்பதை உறுதிப்படுத்த வேண்டும். -
வட்டமிடுதல் இல்லை: HEX இலிருந்து RGB மாற்றம் முழு எண்களை மட்டுமே உருவாக்குகிறது.
#808080(128) போன்ற மதிப்புகள் வட்டமிடப்படவில்லை; அவை சரியான கணித பலன்கள். ஆனால் RGB மதிப்புகள் 0-255 வரம்பில் மட்டுமே இருக்கும்.
ந்தப் பக்கத்தின் அனைத்து மாற்றங்களும் உங்கள் உலாவியில் நேரடியாக நிகழ்கின்றன. எந்தத் தரவும் பதிவேற்றப்படவோ அல்லது சேமிக்கப்படவோ இல்லை.
RGB மதிப்புகளின் நடைமுறை பயன்கள்
RGB மதிப்புகள் பல பகுதிகளில் பயன்படுத்தப்படுகின்றன:
- JavaScript மற்றும் Canvas:
context.fillStyle = "rgb(79, 70, 229)";என எழுதுவது HEX ஐ விட தெளிவாக இருக்கும். - WCAG அணுகல் தேவைகள்: ஒரு நிறத்தின் ஒளிர்வுத்தன்மை (luminance) RGB மதிப்புகளிலிருந்து கணக்கிடப்படுகிறது. WCAG 2.1 தரநிலைப்படி, உரை மற்றும் பின்னணி நிறங்களுக்கு இடையே குறைந்தபட்ச மாறுபாடு விகிதம் 4.5:1 ஆக இருக்க வேண்டும். இந்த விகிதம் RGB சேனல்களின் எடையிடப்பட்ட கூட்டுத்தொகையிலிருந்து கணக்கிடப்படுகிறது.
- வண்ண கலவை கணிதம்:
mix-blend-modeஅல்லதுcanvasஇல் வண்ணங்களைக் கலக்கும்போது, RGB மதிப்புகள் நேரடியாகவும் துல்லியமாகவும் கையாளப்படுகின்றன. - வடிவமைப்பு கருவிகள்: Adobe Photoshop, Figma, Sketch போன்றவை RGB மதிப்புகளை ஏற்றுக்கொள்கின்றன. HEX குறியீடு வடிவமைப்பு கோப்புகளில் இருந்து நகலெடுக்கப்பட்டால், RGB ஆக மாற்றி உள்ளிட வேண்டும்.
அடிக்கடி கேட்கப்படும் கேள்விகள்
1. மூன்று இலக்க HEX (எ.கா #abc) ஏன் ஆறு இலக்கமாக மாறுகிறது?
மூன்று இலக்க HEX என்பது ஆறு இலக்க வடிவத்தின் குறுக்குவடிவமாகும். ஒவ்வொரு இலக்கமும் இரட்டிப்பாக்கப்பட்டு, முழு சேனல் மதிப்பை உருவாக்குகிறது. #abc → #aabbcc. இது HTML இன் ஆரம்ப தரங்களின் எச்சமாகும்.
2. # முன்னொட்டு இல்லாமல் HEX ஐ உள்ளிட முடியுமா?
ஆம். 4f46e5 அல்லது abc போன்ற உள்ளீடுகள் சரியாக வேலை செய்யும். பக்கமானது # ஐ விருப்பத்தேர்வாகக் கருதுகிறது.
3. எட்டு இலக்க HEX (எ.கா #4f46e5ff) உள்ளிட்டால் என்ன நடக்கும்?
இந்தப் பக்கம் எட்டு இலக்க HEX ஐ ஆதரிக்காது. நீங்கள் அதை உள்ளிட்டால், "Enter a hex color like #4f46e5 or #abc." என்ற பிழை செய்தியைக் காண்பிக்கும். Alpha சேனலைக் கையாள வேறு ஒரு கருவியைப் பயன்படுத்த வேண்டும்.
4. RGB வெளியீடு எப்போதும் முழு எண்களாக இருக்குமா?
ஆம். HEX இலிருந்து RGB க்கு மாற்றம் முழு எண்களை மட்டுமே உருவாக்குகிறது. எந்த வட்டமிடுதலும் இல்லை. ஒவ்வொரு சேனலும் 0 முதல் 255 வரையிலான ஒரு முழு எண்ணாக இருக்கும்.
5. இந்தப் பக்கம் ஆஃப்லைனில் வேலை செய்யுமா?
ஆம். அனைத்து மாற்றங்களும் உங்கள் உலாவியில் நேரடியாக நிகழ்கின்றன. இணைய இணைப்பு தேவையில்லை. எந்தத் தரவும் சேவையகத்திற்கு அனுப்பப்படுவதில்லை.
6. #f00 மற்றும் #ff0000 ஒரே மாதிரியான RGB மதிப்பைத் தருமா?
ஆம். #f00 (மூன்று இலக்க) → #ff0000 (ஆறு இலக்க) → RGB (255, 0, 0). இரண்டும் ஒரே நிறத்தைக் குறிக்கின்றன.