RGB திரைக்கு எவ்வளவு ஒளியை வெளியிட வேண்டும் என்பதை தெரிவிக்கிறது; HSL அது உண்மையில் எப்படி தோன்றுகின்றது என்பதை சொல்கிறது. மூன்று சேனல்களை hue, saturation மற்றும் lightness ஆக மாற்றுவது ஒரு நிறத்தை கைமுறை அமைக்க எளிதாக்கும்.
RGB ஐ HSL ஆக மாற்றுவது எப்படி
- R, G மற்றும் B-ஐ 255-ஆக வகுக்கவும் যাতে ஒவ்வொரு மதிப்பும் 0 மற்றும் 1 இடையே இருக்கும்.
- மூன்றிலிருந்தும் மிகப்பெரியதும் மிகச்சிறியதுமானதை எடுத்துக்கொள்ளவும் — அவற்றின் சராசரி தான் வெளிச்சம் L.
- மிகப்பெரியும் மிகச்சிறியதும் சமமானிருந்தால், நிறம் பிந்தியதாகும்: hue மற்றும் saturation இரண்டுமே 0.
- இல்லையெனில் S-ஐ மிகப்பெரியும் மிகச்சிறியதும் இடையிலான வேறுபாட்டிலிருந்து பெறவும், மற்றும் H-ஐ எந்த சேனல் மிகப்பெரியது என்பதைப் பார்த்து வாசிக்கவும்.
உதாரணம்
இயற்கையில் துல்லியமானது. H, S மற்றும் L பொதுவாக முழு எண்களாக சுற்றிப் பிரదర్శிக்கப்படுவதால், மீண்டும் மாற்றும்போது ஒரு சேனலில் ஒரோ இரண்டு படிகள் மாறக்கூடும்.
RGB மற்றும் HSL விளக்கம்
RGB என்ன?
RGB ஒரு நிறத்தை மூன்று ஒளிச்சேனல்களாக வர்ணிக்கிறது — சிவப்பு, பச்சை மற்றும் நீலம் — ஒவ்வொன்றும் 0 முதல் 255 வரை. இது திரைகள் எப்படி செயல்படுகிறது என்பதைக் பிரதிபலிக்கிறது: மூன்றும் 255ல் இருந்தால் வெள்ளை, அனைத்தும் 0இல் இருந்தால் கருப்பு. நிறத்துடன் கணக்கீடு செய்ய வேண்டியபொழுது RGB சரியான தேர்வு, மேலும் rgba() மூலம் पारபரதுவைப்பையும் சேர்க்கலாம்.
- வினியமைப்பு:
- rgb(R, G, B)
- வரம்பு:
- சேனலுக்கு 0–255
- சிறந்தது:
- கோட், கான்வாஸ், rgba() உடன் பாதரசு
HSL என்ன?
HSL ஒரு நிறத்தை மூன்று பகுதிகளாக பிரிக்கிறது: hue (நிற சக்கரத்தில் 0–360°), saturation (எவ்வளவு நிறமுள்ளதே, 0–100%) மற்றும் lightness (பொளி அளவு, 0–100%). ஒவ்வொரு பகுதியும் மனிதர்கள் நிறத்தை விவரிக்கும் முறை match ஆக இருப்பதால், HSL கையேடு அல்லது கோடில் திணி, ஷேடுகள் மற்றும் சீரான பேலெட்டுகளை உருவாக்க எளிதாக இருக்கும்.
- வினியமைப்பு:
- hsl(H, S%, L%)
- வரம்பு:
- 0–360°, 0–100%, 0–100%
- சிறந்தது:
- பேலெட்டுகள், டிண்டுகள் மற்றும் ஷேடுகள், தீமை வேண்டும் வேலை
RGB -> HSL குறிப்பு அட்டவணை
அதிகப் பயன்படும் CSS நிறங்கள், RGB இலிருந்து HSL ஆக மாற்றப்பட்டவை.
| நிறம் | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |