HSL நிறத்தை தேர்வு செய்ய நட்பான வழி; RGB தான் திரைகள், canvas APIs மற்றும் image கோடுகள் உண்மையில் பயன்படுத்துவது. இந்த மாற்றி எந்த hue, saturation மற்றும் lightness மூவுருவையும் சரியாக 0–255 சேனல்களாக மாற்றும்.
HSL ஐ RGB ஆக மாற்றுவது எப்படி
- S மற்றும் L ஐ பின்சேர்க்கைகள் (fractions) ஆக்கி chroma C = (1 − |2L − 1|) × S என்பதைக் கணக்கிடு.
- hue ஐ 60 க்கு வகுக்கி அது நிற சக்கரத்தில் எந்த பகுதி உள்ளது என்பதை கண்டுபிடித்து இடைநிலை மதிப்பு X = C × (1 − |(H/60 mod 2) − 1|) 를 கணக்கிடு.
- அந்த பகுதியின்படி C, X மற்றும் 0 ஐ R, G மற்றும் B இடங்களுக்குப் பொருத்து.
- lightness ஆராசியை L − C/2 மூன்று சேனல்களுக்கும் சேர்த்து 255 க்கு பெருக்கி பிறகு முடிந்த ஒற்றை முழு எண்களுக்கு கூட்டு.
உதாரணம்
முடிவான მთელი சேனல்களுக்கான நிலைமையைத் தவிர, முடிவு துல்லியமாக இருக்கும். விகிதாகி அமைந்த hue அல்லது saturation மதிப்புகள் ஆதரிக்கப்படுகின்றன மற்றும் அருகிலுள்ள RGB மூவுருவில் நிலை பெறும்.
HSL மற்றும் RGB விளக்கம்
HSL என்ன?
HSL ஒரு நிறத்தை மூன்று பகுதிகளாக பிரிக்கிறது: hue (நிற சக்கரத்தில் 0–360°), saturation (எவ்வளவு நிறமுள்ளதே, 0–100%) மற்றும் lightness (பொளி அளவு, 0–100%). ஒவ்வொரு பகுதியும் மனிதர்கள் நிறத்தை விவரிக்கும் முறை match ஆக இருப்பதால், HSL கையேடு அல்லது கோடில் திணி, ஷேடுகள் மற்றும் சீரான பேலெட்டுகளை உருவாக்க எளிதாக இருக்கும்.
- வினியமைப்பு:
- hsl(H, S%, L%)
- வரம்பு:
- 0–360°, 0–100%, 0–100%
- சிறந்தது:
- பேலெட்டுகள், டிண்டுகள் மற்றும் ஷேடுகள், தீமை வேண்டும் வேலை
RGB என்ன?
RGB ஒரு நிறத்தை மூன்று ஒளிச்சேனல்களாக வர்ணிக்கிறது — சிவப்பு, பச்சை மற்றும் நீலம் — ஒவ்வொன்றும் 0 முதல் 255 வரை. இது திரைகள் எப்படி செயல்படுகிறது என்பதைக் பிரதிபலிக்கிறது: மூன்றும் 255ல் இருந்தால் வெள்ளை, அனைத்தும் 0இல் இருந்தால் கருப்பு. நிறத்துடன் கணக்கீடு செய்ய வேண்டியபொழுது RGB சரியான தேர்வு, மேலும் rgba() மூலம் पारபரதுவைப்பையும் சேர்க்கலாம்.
- வினியமைப்பு:
- rgb(R, G, B)
- வரம்பு:
- சேனலுக்கு 0–255
- சிறந்தது:
- கோட், கான்வாஸ், rgba() உடன் பாதரசு
HSL -> RGB குறிப்பு அட்டவணை
அதிகப் பயன்படும் CSS நிறங்கள், HSL இலிருந்து RGB ஆக மாற்றப்பட்டவை.
| நிறம் | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |