HSL ஒரு நிறத்தை மக்கள் பேசும் முறையில் விவரிக்கிறது: எந்த hue, எவ்வளவு நிறமையாக்கம் (saturation), எவ்வளவு பிரகாசம். HEX குறியீட்டை HSL ஆக மாற்றுவது, அந்த நிறத்தை உண்மையாக மாற்றி சீரமைக்க—ஒளிரச் செய்வது, ஏற்படுத்துவது, அல்லது முழு அளவீட்டுத் தொடர் அமைப்பது—முடிவதற்கான கூடிய விரைவான வழி.
HEX ஐ HSL ஆக மாற்றுவது எப்படி
- HEX குறியீட்டை RGB-க்கு மாற்றி ஒவ்வொரு சேனலையும் 255-ஆக வகுக்கவும், ஆகவே மூன்றுமே 0 மற்றும் 1 என்ற வரையினுள் அமைவதாக இருக்கும்.
- மூன்றின் மிகப்பெரியதும் மிகச்சிறியதும் கண்டறியவும். அவை இரண்டின் சராசரி தான் வெளிச்சம் L.
- அவற்றின் இடைவேலையான வித்தியாசம் தான் சாந்தி S-ஐ இயக்குகிறது: லைட் நிறங்களுக்கு (2 − max − min) ஆல் வகுக்கவும், அல்லது டார்க் நிறங்களுக்கு (max + min) ஆல் வகுக்கவும்.
- அதிலுள்ள மிகுமையான சேனல் தான் hue H-ஐ தீர்மானிக்கும் — சென்று 0°, பச்சை 120°, நீலம் 240° — மற்ற இரண்டு சேனல்கள் அந்த பிரிவுக்குள் hue-ஐ எங்கே இடம் பெறுவோ அதை அமைக்கின்றன.
உதாரணம்
கணக்குகள் துல்லியமானவை, ஆனால் HSL மதிப்புகள் பொதுவாக முழு கோணங்கள் மற்றும் சதவீதமாக உர ROUND செயப்படுகின்றன. அதனால் பின்னர் மாற்றும்போது ஒரோ இரண்டு RGB படிகளால் விலகிக்கொள்ளலாம் — நடைமுறையில் இறையாளானது, ஆனால் நிறங்களை பல முறை முனையும் போது இது கவனத்தில் வைத்துக் கொள்ள வேண்டும்.
HEX மற்றும் HSL விளக்கம்
HEX என்ன?
HEX கோடு ஒரு ஆறு- எழுத்து ஹெக்சாதெசிமல் எண், இது # என்ற முன்னோட்டத்துடன் ஒரு நிறத்தின் சிவப்பு, பச்சை மற்றும் நீலம் சேனலைக் கொள்கிறது. ஒவ்வொரு இரட்டைப் பதிவும் ஒரு சேனலை குறிப்பதாகும், 00 (இல்லை) முதல் FF (முழு) வரை, இது RGB இன் 16.7 மில்லியன் நிறங்களைத் தருகிறது ஆனால் குறைந்த இடத்தில். HEX என்பது CSS, டிசைன் கருவிகள் மற்றும் பிராண்ட் வழிகாட்டுதல்களில் இயல்பானதாகும்.
- வினியமைப்பு:
- #RRGGBB
- வரம்பு:
- சேனலுக்கு 00–FF
- சிறந்தது:
- CSS, டிசைன் ஹான்ட்ஓஃப், பிராண்ட் வழிகாட்டுதல்கள்
HSL என்ன?
HSL ஒரு நிறத்தை மூன்று பகுதிகளாக பிரிக்கிறது: hue (நிற சக்கரத்தில் 0–360°), saturation (எவ்வளவு நிறமுள்ளதே, 0–100%) மற்றும் lightness (பொளி அளவு, 0–100%). ஒவ்வொரு பகுதியும் மனிதர்கள் நிறத்தை விவரிக்கும் முறை match ஆக இருப்பதால், HSL கையேடு அல்லது கோடில் திணி, ஷேடுகள் மற்றும் சீரான பேலெட்டுகளை உருவாக்க எளிதாக இருக்கும்.
- வினியமைப்பு:
- hsl(H, S%, L%)
- வரம்பு:
- 0–360°, 0–100%, 0–100%
- சிறந்தது:
- பேலெட்டுகள், டிண்டுகள் மற்றும் ஷேடுகள், தீமை வேண்டும் வேலை
HEX -> HSL குறிப்பு அட்டவணை
அதிகப் பயன்படும் CSS நிறங்கள், HEX இலிருந்து HSL ஆக மாற்றப்பட்டவை.
| நிறம் | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |