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%) |