HTML HSL and HSLA Colors

एचएसएल और एचएसएलए रंग - मनुष्यों के लिए सहज रंग मॉडल

HTML HSL and HSLA Colors

एचएसएल का मतलब रंग, संतृप्ति और हल्कापन है।

एचएसएलए रंग मान अल्फा चैनल (पारदर्शिता) के साथ एचएसएल का विस्तार हैं।

HUE
रंग

रंग चक्र पर 0-360 डिग्री

SATURATION
एकाग्रता

0% (ग्रे) से 100% (पूर्ण रंग)

LIGHTNESS
चमक

0% (काला) से 100% (सफ़ेद)

HSL Color Values

HTML में, एक रंग को निम्नलिखित प्रारूप में रंग, संतृप्ति और हल्कापन (HSL) का उपयोग करके निर्दिष्ट किया जा सकता है:

hsl(hue, saturation, lightness)

एचएसएल पैरामीटर:

रंग

रंग चक्र पर 0 से 360 डिग्री।

  • 0 = लाल
  • 120 = हरा
  • 240 = नीला
  • 360 = लाल (फिर से)

संतृप्ति

प्रतिशत मान.

  • 0% = भूरे रंग की छाया
  • 100% = पूर्ण रंग

लपट

प्रतिशत मान.

  • 0% = काला
  • 50% = सामान्य चमक
  • 100% = सफ़ेद

रंग पहिया

0°
लाल
90°
पीला
180°
cyan
270°
मैजेंटा

HUE मान रंग चक्र पर स्थिति को दर्शाता है

महत्वपूर्ण एचएसएल मान:

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(0, 100%, 50%)
HUE 0°
SATURATION 100%
LIGHTNESS 50%

जसिफ़ टीम टेस्ट:

सिलेंडरों को घुमाकर अलग-अलग एचएसएल रंग बनाने का प्रयास करें:
• रंग: रंग बदलता है (0-360°)
• संतृप्ति: रंग की संतृप्ति बदलती है (0-100%)
• चमकीलापन: रंग की चमक बदल जाती है (0-100%)

एचएसएल उदाहरण

सामान्य एचएसएल रंगों के उदाहरण:

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

संतृप्ति

संतृप्ति को किसी रंग की तीव्रता के रूप में वर्णित किया जा सकता है।

जस्सिफ टीम व्याख्या:

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

लपट

किसी रंग की चमक को इस प्रकार वर्णित किया जा सकता है कि कितनी रोशनी प्रदान की जाए, जिसमें 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%)
सफ़ेद

एचएसएल में भूरे रंग के शेड्स

भूरे रंग के रंगों को अक्सर रंग और घनत्व को 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%)

जुसिफ़ टीम नियम:

HSL ग्रे के लिए HUE और SATURATION दोनों 0 होने चाहिए। 0% के करीब चमक का मान काले के करीब है, 100% के करीब सफेद के करीब है।

HSLA Color Values

एचएसएलए रंग मान एक अल्फा चैनल के साथ एचएसएल रंग मानों का एक विस्तार है - एक रंग के लिए पारदर्शिता निर्दिष्ट करना।

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(0, 100%, 50%, 0.5)
HUE 0°
SATURATION 100%
LIGHTNESS 50%
ALPHA 0.5

जसिफ़ टीम पारदर्शिता:

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%)
✗ ग़लत! यह भूरा है, काला नहीं

जस्सिफ टीम HSL नोट:

एचएसएल में (रंग, संतृप्ति, हल्कापन):
• हल्कापन = 0% → काला (कोई रंग नहीं)
• हल्कापन = 50% → सामान्य रंग
• हल्कापन = 100% → सफ़ेद (कोई रंग नहीं)
• संतृप्ति = 0% → धूसर रंग
• संतृप्ति = 100% → पूर्ण रंग संतृप्ति

एचएसएल बनाम आरजीबी तुलना

विशेषता HSL RGB
पूरा नाम Hue Saturation Lightness Red Green Blue
FORMULA 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)

जूसिफ टीम रूपांतरण फॉर्मूला:

एचएसएल मनुष्यों में अंतर्ज्ञान होता है - रंग बदलें, रंग बदलें; संतृप्ति बदलने के लिए, SATURATION बदलें; चमक बदलने के लिए, चमक बदलें।