HTML HSL and HSLA Colors

HSL என்பது hue (நிறம்), saturation (செறிவு), மற்றும் lightness (ஒளிர்வு) ஆகியவற்றைக் குறிக்கிறது.

HSLA வண்ண மதிப்புகள் ஆல்பா சேனலுடன் (வெளிப்படைத்தன்மை) HSL இன் நீட்டிப்பாகும்.

HUE
நிறம்

வண்ணச் சக்கரத்தில் 0-360 டிகிரி

SATURATION
செறிவு

0% (சாம்பல்) முதல் 100% (முழு வண்ணம்)

LIGHTNESS
ஒளிர்வு

0% (கருப்பு) முதல் 100% (வெள்ளை)

HSL Color Values

HTML இல், ஒரு வண்ணத்தை hue, saturation, மற்றும் lightness (HSL) பயன்படுத்தி பின்வரும் வடிவத்தில் குறிப்பிடலாம்:

hsl(hue, saturation, lightness)

HSL அளவுருக்கள்:

HUE (நிறம்)

வண்ணச் சக்கரத்தில் 0 முதல் 360 வரையிலான டிகிரி.

0 = சிவப்பு
120 = பச்சை
240 = நீலம்
360 = சிவப்பு (மீண்டும்)

SATURATION (செறிவு)

சதவீத மதிப்பு.

0% = சாம்பல் நிறத்தின் நிழல்
100% = முழு வண்ணம்

LIGHTNESS (ஒளிர்வு)

சதவீத மதிப்பு.

0% = கருப்பு
50% = இயல்பான ஒளிர்வு
100% = வெள்ளை

வண்ணச் சக்கரம் (Color Wheel)

0°
சிவப்பு

90°
மஞ்சள்

180°
cyan

270°
மெஜந்தா

HUE மதிப்பு வண்ணச் சக்கரத்தில் உள்ள நிலையை குறிக்கிறது

முக்கிய HSL மதிப்புகள்:

hsl(0, 100%, 50%)
சிவப்பு

hsl(120, 100%, 50%)
பச்சை

hsl(240, 100%, 50%)
நீலம்

hsl(0, 0%, 0%)
கருப்பு

hsl(0, 0%, 100%)
வெள்ளை

hsl(0, 0%, 50%)
சாம்பல்

HSL கலவை சோதனை

கீழே உள்ள HSL மதிப்புகளை கலந்து சோதனை செய்யுங்கள்:

hsl(0, 100%, 50%)

HUE 0°

SATURATION 100%

LIGHTNESS 50%

Jassif Team சோதனை:

சிலிண்டர்களை நகர்த்துவதன் மூலம் வெவ்வேறு HSL வண்ணங்களை உருவாக்க முயற்சிக்கவும்:
• HUE: வண்ணத்தை மாற்றுகிறது (0-360°)
• SATURATION: வண்ணத்தின் செறிவை மாற்றுகிறது (0-100%)
• LIGHTNESS: வண்ணத்தின் பிரகாசத்தை மாற்றுகிறது (0-100%)

HSL எடுத்துக்காட்டுகள்

பொதுவான HSL வண்ணங்களின் எடுத்துக்காட்டுகள்:

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

SATURATION (செறிவு)

செறிவு ஒரு வண்ணத்தின் தீவிரமாக விவரிக்கப்படலாம்.

Jassif Team விளக்கம்:

100% என்பது தூய வண்ணம், சாம்பல் நிறத்தின் நிழல்கள் இல்லை.
50% என்பது 50% சாம்பல், ஆனால் நீங்கள் இன்னும் வண்ணத்தைக் காணலாம்.
0% என்பது முற்றிலும் சாம்பல்; நீங்கள் இனி வண்ணத்தைக் காண முடியாது.

செறிவு எடுத்துக்காட்டுகள் (சிவப்பு நிறம்):

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

LIGHTNESS (ஒளிர்வு)

ஒரு வண்ணத்தின் ஒளிர்வு, 0% என்பது ஒளி இல்லை (கருப்பு), 50% என்பது 50% ஒளி (இருண்டதும் இல்லை, ஒளிர்வதும் இல்லை), மற்றும் 100% என்பது முழு ஒளிர்வு (வெள்ளை) என எவ்வளவு ஒளியை வழங்க வேண்டும் என விவரிக்கப்படலாம்.

ஒளிர்வு எடுத்துக்காட்டுகள் (சிவப்பு நிறம்):

hsl(0, 100%, 0%)
கருப்பு

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)
இயல்பான சிவப்பு

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)
வெள்ளை

HSL இல் சாம்பல் நிறத்தின் நிழல்கள்

சாம்பல் நிறத்தின் நிழல்கள் பெரும்பாலும் நிறம் மற்றும் செறிவை 0 ஆக அமைத்து, ஒளிர்வை 0% முதல் 100% வரை சரிசெய்வதன் மூலம் கருப்பு/வெள்ளை நிழல்களைப் பெற வரையறுக்கப்படுகின்றன:

hsl(0, 0%, 20%)

hsl(0, 0%, 30%)

hsl(0, 0%, 40%)

hsl(0, 0%, 60%)

hsl(0, 0%, 70%)

hsl(0, 0%, 90%)

Jassif Team விதி:

HSL சாம்பல் நிறங்களுக்கு HUE மற்றும் SATURATION இரண்டும் 0 ஆக இருக்க வேண்டும். LIGHTNESS மதிப்பு 0% க்கு அருகில் இருந்தால் கருப்பு நிறத்திற்கு அருகில், 100% க்கு அருகில் இருந்தால் வெள்ளை நிறத்திற்கு அருகில்.

HSLA Color Values

HSLA வண்ண மதிப்புகள் ஆல்பா சேனலுடன் HSL வண்ண மதிப்புகளின் நீட்டிப்பாகும் - இது ஒரு வண்ணத்திற்கான வெளிப்படைத்தன்மையை குறிப்பிடுகிறது.

ஒரு HSLA வண்ண மதிப்பு இவ்வாறு குறிப்பிடப்படுகிறது:

hsla(hue, saturation, lightness, alpha)

ஆல்பா அளவுரு 0.0 (முழுமையாக வெளிப்படையானது) மற்றும் 1.0 (வெளிப்படையானது அல்ல) க்கு இடையே உள்ள ஒரு எண்ணாகும்:

hsla(9, 100%, 64%, 0)
முழு வெளிப்படைத்தன்மை

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)
வெளிப்படைத்தன்மை இல்லை

HSLA கலவை சோதனை

கீழே உள்ள HSLA மதிப்புகளை கலந்து சோதனை செய்யுங்கள்:

hsla(0, 100%, 50%, 0.5)

HUE 0°

SATURATION 100%

LIGHTNESS 50%

ALPHA 0.5

Jassif Team வெளிப்படைத்தன்மை:

ஆல்பா மதிப்பு 0.0 என்பது முழுமையாக வெளிப்படையானது (கண்ணுக்குப் புலப்படாதது), 0.5 என்பது 50% வெளிப்படைத்தன்மை, 1.0 என்பது வெளிப்படைத்தன்மை இல்லை (முழுமையானது).

பயிற்சி

🎨 பின்வரும் வண்ண மதிப்புகளில் எது கருப்பு நிறத்தை உருவாக்கும்?

hsl(0, 100%, 0%)

0% ஒளிர்வு = கருப்பு

hsl(0, 0, 100%)

செறிவு குறிப்பிடப்படவில்லை

hsl(0, 100%, 100%)

100% ஒளிர்வு = வெள்ளை

hsl(0, 100%, 0%)

✓ சரி! 0% ஒளிர்வு என்பது கருப்பு நிறம்

hsl(0, 0, 100%)

✗ தவறு! இது செல்லுபடியாகாத தொடரியல் (செறிவு சதவீத குறி இல்லை)

hsl(0, 100%, 100%)

✗ தவறு! 100% ஒளிர்வு என்பது வெள்ளை நிறம்

hsl(0, 0%, 50%)

✗ தவறு! இது சாம்பல் நிறம், கருப்பு அல்ல

Jassif Team HSL குறிப்பு:

hsl(hue, saturation, lightness) இல்:
• Lightness = 0% → கருப்பு (எந்த நிறமும் இல்லை)
• Lightness = 50% → இயல்பான வண்ணம்
• Lightness = 100% → வெள்ளை (எந்த நிறமும் இல்லை)
• Saturation = 0% → சாம்பல் நிற நிழல்
• Saturation = 100% → முழு வண்ண செறிவு

HSL vs RGB ஒப்பீடு

அம்சம்	HSL	RGB
முழுப் பெயர்	Hue Saturation Lightness	Red Green Blue
சூத்திரம்	hsl(h, s%, l%)	rgb(r, g, b)
மதிப்பு வரம்பு	0-360°, 0-100%, 0-100%	0-255, 0-255, 0-255
மனிதர்களுக்கு	உள்ளுணர்வு	தொழில்நுட்பம்
பயன்பாடு	வடிவமைப்பு, கலர் பிக்கர்	பொது நோக்கம்
கருப்பு	hsl(0, 0%, 0%)	rgb(0, 0, 0)
வெள்ளை	hsl(0, 0%, 100%)	rgb(255, 255, 255)
சிவப்பு	hsl(0, 100%, 50%)	rgb(255, 0, 0)

Jassif Team மாற்று சூத்திரம்:

HSL மனிதர்களுக்கு உள்ளுணர்வு உள்ளது - நிறம் மாற்ற, HUE ஐ மாற்றவும்; செறிவு மாற்ற, SATURATION ஐ மாற்றவும்; பிரகாசம் மாற்ற, LIGHTNESS ஐ மாற்றவும்.