RGB இலிருந்து Hex க்கு மாற்றும் இலவச கருவி
இந்தப் பக்கம் RGB மதிப்புகளை (0 முதல் 255 வரையிலான மூன்று எண்கள்) உடனடியாக hexadecimal colour code ஆக மாற்றுகிறது. நீங்கள் சிவப்பு, பச்சை, நீலம் ஆகிய மூன்று மதிப்புகளை உள்ளிட்டவுடன், அதற்கான hex குறியீடு (எடுத்துக்காட்டு: #1E90FF) தானாகக் காட்டப்படும். மேலும், அந்த வண்ணம் காட்சி முன்னோட்டமாகவும் தோன்றும். CSS, design software, அல்லது hex வடிவத்தை எதிர்பார்க்கும் வேறு எந்தப் பணிப்பாய்விலும் இந்த மதிப்பை நேரடியாகப் பயன்படுத்தலாம்.
இந்தப் பக்கத்தின் தனித்துவம் என்ன?
மற்ற RGB-மாற்று கருவிகளில் இருந்து இது மூன்று விஷயங்களில் வேறுபடுகிறது. முதலாவது, RGB (தசம, மூன்று சேனல்கள் 0-255) இலிருந்து hex (hexadecimal, ஆறு-இலக்கம் அல்லது மூன்று-இலக்கம் சுருக்கெழுத்து) க்கு மாற்றுகிறது. இரண்டாவது, இரண்டு வடிவங்களும் ஒரே வண்ணச் சரகத்தை (sRGB) பிரதிநிதித்துவப்படுத்துவதால், எந்த gamut clipping அல்லது தோராயமும் இல்லை. மூன்றாவது, hex வெளியீடு எப்போதும் # உடன் தொடங்குகிறது. எட்டு-இலக்க வடிவத்தை நீங்கள் பயன்படுத்தாவிட்டால், அதில் alpha channel (வெளிப்படைத்தன்மை) இல்லை.
கருவியின் RGB உள்ளீடு மூன்று எண்களை கமா அல்லது இடைவெளி மூலம் பிரித்து எதிர்பார்க்கிறது. உதாரணமாக, 79, 70, 229. இதன் விளைவாக வரும் hex குறியீடு எப்போதும் ஆறு இலக்கங்களாக இருக்கும் (#4F46E5). ஏனென்றால், ஒவ்வொரு 0-255 மதிப்பும் இரண்டு-இலக்க hex ஜோடியாக மாற்றப்படுகிறது.
உள்ளீடுகள் மற்றும் வெளியீடுகள்
RGB உள்ளீட்டை இரண்டு வழிகளில் தரலாம்:
- கமா பிரிப்பு:
79, 70, 229(மிகவும் பொதுவானது) - இடைவெளி பிரிப்பு:
79 70 229
ஒவ்வொரு 0-255 மதிப்பும் ஒரு இரண்டு-இலக்க hex எண்ணுக்கு நேரடியாக மாறுகிறது. உதாரணமாக:
- 0 →
00 - 128 →
80 - 255 →
FF
எனவே, RGB மதிப்புகள் 79, 70, 229 என்றால்:
- 79 (சிவப்பு) →
4F - 70 (பச்சை) →
46 - 229 (நீலம்) →
E5
இணைத்தால், hex குறியீடு #4F46E5 ஆகிறது.
கருவி வண்ண சுவாட்ச் காட்டுகிறது மற்றும் மற்ற வடிவங்களையும் (HSL, HSV, CMYK, LAB, மற்றும் வண்ண பிக்கர்) தானாக மாற்றுகிறது. உங்களுக்கு தேவையான எந்த வடிவத்தையும் எடுத்துக் கொள்ளலாம்.
விதிகள் மற்றும் முனைகள்
இந்த கருவியில் ஒரு முக்கிய விதி உள்ளது: நீங்கள் ஒரு வடிவத்தில் மாற்றம் செய்தால், மற்ற அனைத்து வடிவங்களும் உடனடியாக மாறும். "Convert" பொத்தான் இல்லை. இது நிஜ நேர மாற்றம்.
எல்லைக்கு வெளியே உள்ள மதிப்புகள்
நீங்கள் RGB மதிப்புகளை 0-255 வரம்புக்கு வெளியே அல்லது தவறான வடிவத்தில் உள்ளிட்டால், கருவி பின்வரும் பிழை செய்தியைக் காட்டுகிறது:
"Enter RGB as three numbers 0–255, like 79, 70, 229."
மூன்று எண்கள் இருக்க வேண்டும். ஒன்று அல்லது இரண்டு எண்கள் மட்டும் இருந்தால், அது தவறான உள்ளீடு. மேலும், எண்களுக்கு இடையில் கமா அல்லது இடைவெளி தான் அனுமதிக்கப்படுகிறது; சிறப்பு எழுத்துகள் அல்லது எழுத்துக்கள் இருந்தால் பிழை காட்டப்படும்.
sRGB வண்ண இடம் (Colour Space)
RGB மற்றும் hex ஒரே வண்ண இடத்தை (sRGB) பகிர்ந்து கொள்வதால், மாற்றம் துல்லியமானது மற்றும் மாற்றக்கூடியது. அதாவது, ஒரு RGB மதிப்பை hex க்கு மாற்றி, மீண்டும் RGB க்கு மாற்றினால், நீங்கள் அதே மதிப்பைப் பெறுவீர்கள். எந்த தகவல் இழப்பும் இல்லை.
Hex வெளியீட்டின் வடிவம்
hex வெளியீடு எப்போதும் ஆறு இலக்கங்களாக இருக்கும். கருவி தானாக மூன்று-இலக்க சுருக்கெழுத்தாக மாற்றாது. உதாரணமாக, #AABBCC என்பது #ABC ஆக மாறாது. இருப்பினும், hex உள்ளீட்டில் மூன்று-இலக்க சுருக்கெழுத்து (எ.கா., #abc) ஏற்றுக்கொள்ளப்படுகிறது. கருவி அதை தானாக ஆறு-இலக்க வடிவத்துக்கு விரிவாக்கும். உதாரணமாக, #abc என்பது #AABBCC ஆக மாறுகிறது.
ப்ரவுசரில் மட்டுமே செயலாக்கம்
இந்தப் பக்கம் JavaScript ஐப் பயன்படுத்துகிறது, ஆனால் மாற்றங்கள் அனைத்தும் உங்கள் ப்ரவுசரிலேயே நடைபெறுகின்றன. நீங்கள் உள்ளிடும் எந்த தகவலும் சேவையகத்திற்கு அனுப்பப்படுவதில்லை. தனியுரிமை கவலை இல்லாமல் பயன்படுத்தலாம்.
வண்ண கணிதம்: RGB லிருந்து Hex க்கு மாற்ற முறை
ஒரு 0-255 மதிப்பை hex ஆக மாற்ற, நாம் அதை 16 ஆல் வகுக்க வேண்டும். விடை இரண்டு பகுதிகளைத் தரும்: முழு எண் (quotient) மற்றும் மீதி (remainder). ஒவ்வொரு பகுதியும் ஒரு hex இலக்கத்துக்கு ஒத்திருக்கிறது.
வழிமுறை
- மதிப்பை 16 ஆல் வகுக்கவும்.
- முழு எண்ணை எடுக்கவும் (0 முதல் 15 வரை).
- மீதியை எடுக்கவும் (0 முதல் 15 வரை).
- ஒவ்வொரு பகுதியையும் hex எண்ணாக மாற்றவும் (0-9 மற்றும் A-F).
மாற்று அட்டவணை
| தசம மதிப்பு | Hex இலக்கம் |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F |
உதாரணம்: 229 (நீலம்) ஐ மாற்றுதல்
229 ÷ 16 = 14 (முழு எண்) மீதி 5.
14 → E
5 → 5
எனவே, 229 → E5.
முழு உதாரணம்: (79, 70, 229)
- சிவப்பு: 79 ÷ 16 = 4 மீதி 15. 4 → 4, 15 → F. → 4F
- பச்சை: 70 ÷ 16 = 4 மீதி 6. 4 → 4, 6 → 6. → 46
- நீலம்: 229 ÷ 16 = 14 மீதி 5. 14 → E, 5 → 5. → E5
hex குறியீடு: #4F46E5
யாருக்கு இந்த கருவி பயனுள்ளது?
1. முன்-இறுதி (Front-end) டெவலப்பர்கள்
CSS பண்புகளுக்கு (color, background-color) hex மதிப்புகள் தேவைப்படும். RGB இலிருந்து hex க்கு மாற்ற, இந்த கருவி வேகமான தீர்வு.
2. UI/UX டிசைனர்கள்
டிசைன் மென்பொருளில் (Figma, Sketch, Adobe XD) RGB மதிப்புகள் கிடைக்கலாம். அவற்றை hex ஆக மாற்றி, CSS handoff க்கு பயன்படுத்தலாம்.
3. கிராபிக் டிசைனர்கள்
வெப் சொத்துக்களுடன் பணிபுரியும் போது, RGB-மூல முன்மாதிரிகளை hex-ஒருங்கிணைந்த செயலாக்கங்களுடன் சீரமைக்க உதவுகிறது.
4. மாணவர்கள் மற்றும் ஆர்வலர்கள்
டிஜிட்டல் வண்ணம் எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்ள உதவுகிறது. தசம மற்றும் hexadecimal குறியீடுகளுக்கு இடையேயான உறவைக் கற்றுக்கொள்ளலாம்.
5. வண்ண பிக்கர் தரவு பயனர்கள்
Photoshop, GIMP, அல்லது browser dev tools இல் இருந்து RGB மதிப்புகள் கிடைக்கும் போது, hex குறியீட்டை எடுக்க இந்த கருவி உதவுகிறது.
CSS இல் Hex பயன்பாடு
hex குறியீடுகள் CSS இல் பரவலாகப் பயன்படுகின்றன. முக்கிய பண்புகள்:
color: உரை வண்ணம்background-color: பின்னணி வண்ணம்border-color: எல்லை வண்ணம்outline-color: வெளிப்புற எல்லை வண்ணம்
மூன்று-இலக்க சுருக்கெழுத்து (3-digit shorthand)
CSS இல், #AABBCC போன்ற ஆறு-இலக்க hex ஐ #ABC என்று சுருக்கலாம். மூன்று-இலக்க சுருக்கெழுத்து ஒவ்வொரு இலக்கத்தையும் இரட்டிப்பாக்குகிறது. உதாரணமாக:
#abc→#AABBCC#123→#112233#f00→#FF0000(சிவப்பு)
இந்த கருவி hex உள்ளீட்டில் மூன்று-இலக்க சுருக்கெழுத்தை ஏற்றுக்கொண்டு, அதை ஆறு-இலக்கமாக விரிவாக்குகிறது.
எட்டு-இலக்க Hex (Alpha channel)
CSS இல், #RRGGBBAA வடிவம் alpha channel ஐ சேர்க்கிறது. உதாரணமாக:
#FF000080→ 50% வெளிப்படைத்தன்மையுடன் சிவப்பு
இந்த கருவி மூல RGB மாற்றத்தில் alpha channel இல்லை. ஆனால், உள்ளீட்டில் alpha மதிப்புகள் இருந்தால், பிற கருவிகளைப் பயன்படுத்தலாம்.
வண்ண மாதிரிகள்: RGB vs CMYK
RGB (சிவப்பு, பச்சை, நீலம்) ஒரு கூட்டு (additive) வண்ண மாதிரி. டிஸ்ப்ளே மற்றும் ஸ்கிரீன்களில் பயன்படுத்தப்படுகிறது. ஒளியை வெளியிடும் மூன்று முதன்மை வண்ணங்கள் ஒன்றிணைந்து கிட்டத்தட்ட எல்லா வண்ணங்களையும் உருவாக்குகின்றன.
CMYK (சியான், மெஜந்தா, மஞ்சள், கருப்பு) ஒரு கழித்தல் (subtractive) வண்ண மாதிரி. அச்சுக்கு (print) பயன்படுத்தப்படுகிறது.
இரண்டு மாதிரிகள் வெவ்வேறு வண்ண சரகங்களைக் கொண்டுள்ளன. sRGB (RGB) மானிட்டர்களுக்கு வடிவமைக்கப்பட்டுள்ளது, அதேசமயம் CMYK அச்சு இயந்திரங்களுக்கு. எனவே, RGB இலிருந்து CMYK க்கு மாற்றும்போது வண்ண மாற்றம் ஏற்படலாம். ஆனால் RGB இலிருந்து hex க்கு மாற்றும்போது, இரண்டும் ஒரே sRGB இடத்தில் செயல்படுவதால் எந்த இழப்பும் இல்லை.
வண்ண உள்ளீடு வழிகாட்டு
RGB மதிப்புகளை உள்ளிடும்போது சில முக்கிய குறிப்புகள்:
- மதிப்புகள் 0-255 வரம்பில் இருக்க வேண்டும்: 0 மிகவும் இருண்டது, 255 மிகவும் பிரகாசமானது.
- மூன்று மதிப்புகள் கட்டாயம்: சிவப்பு, பச்சை, நீலம் ஆகிய மூன்றும் தேவை.
- மதிப்புகளுக்கு இடையில் கமா அல்லது இடைவெளி: கமா (,) அல்லது இடைவெளி ( ) பயன்படுத்தலாம். மற்ற பிரிப்பான்கள் (;-|) அனுமதிக்கப்படாது.
- முன்னணி பூஜ்ஜியங்கள் (leading zeros): 0 முதல் 255 வரையிலான எண்கள் முன்னணி பூஜ்ஜியங்களைக் கொண்டிருக்கலாம் (எ.கா., 079, 070, 229). கருவி இதைச் சரியாகப் புரிந்துகொள்ளும்.
FAQ (அடிக்கடி கேட்கப்படும் கேள்விகள்)
1. RGB மதிப்புகளை 0-255 க்கு பதிலாக 0-100 சதவீதமாக உள்ளிடலாமா?
இல்லை. இந்த கருவி 0-255 மதிப்புகளை மட்டுமே எதிர்பார்க்கிறது. நீங்கள் சதவீத மதிப்புகளை (0-100%) உள்ளிட்டால், பிழை செய்தி காட்டப்படும். உதாரணமாக, 50% சிவப்பு என்பது 127.5 க்கு சமமாக இருக்கும், இதை முழு எண்ணாக மாற்ற வேண்டும்.
2. Hex குறியீடு case-sensitive ஆ?
இல்லை. CSS மற்றும் HTML இல் hex குறியீடுகள் case-insensitive ஆகும். #4F46E5, #4f46e5, #4F46e5 ஆகிய அனைத்தும் சரியானவை. இருப்பினும், மேல் நிலை (uppercase) அல்லது கீழ் நிலை (lowercase) பயன்படுத்துவது உங்கள் விருப்பம். இந்த கருவி மேல் நிலை வடிவத்தை வெளியிடுகிறது.
3. 8-digit hex (alpha channel) பயன்படுத்தலாமா?
வெளியீட்டில் இல்லை. கருவி alpha channel இல்லாமல் 6-digit hex ஐ மட்டுமே வெளியிடுகிறது. ஆனால், CSS இல் 8-digit hex (எ.கா., #4F46E580) alpha channel ஐ ஆதரிக்கிறது. உங்களுக்கு alpha தேவைப்பட்டால், கூடுதல் எண்களை நீங்களே சேர்க்கலாம்.
4. RGB மதிப்புகள் 0-255 வரம்புக்கு வெளியே இருந்தால் என்ன நடக்கும்?
கருவி பிழை செய்தி காட்டுகிறது: "Enter RGB as three numbers 0–255, like 79, 70, 229." எந்த மாற்றமும் செய்யப்படாது. எடுத்துக்காட்டுகள்: 300 (அதிகம்), -10 (குறைவு), அல்லது எழுத்துகள் (abc) ஏற்றுக்கொள்ளப்படாது.
5. மூன்று-இலக்க hex சுருக்கெழுத்து எப்படி வேலை செய்கிறது?
உதாரணமாக, #abc உள்ளிட்டால், கருவி அதை #AABBCC ஆக விரிவாக்குகிறது. ஒவ்வொரு இலக்கமும் இரட்டிப்பாக்கப்படுகிறது. CSS இல் இது சரியான முறை.
6. இந்த கருவி மொபைல் சாதனங்களில் வேலை செய்கிறதா?
ஆம். இது எந்த நவீன ப்ரவுசரிலும் (Chrome, Firefox, Safari, Edge) வேலை செய்கிறது. JavaScript enabled இருந்தால் போதும். மொபைல் மற்றும் டெஸ்க்டாப் இரண்டிலும் சிறப்பாகச் செயல்படுகிறது.