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