← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 13 of 26

HTML HSL रंग

RGB और HEX colors को light channels के mix के रूप में describe करते हैं, जो precise तो है लेकिन hand-tune करने के लिए बहुत intuitive नहीं है -- किसी RGB color को तीन अलग numbers दोबारा calculate किए बिना 'थोड़ा हल्का' बनाने का कोई साफ तरीका नहीं है। HSL इसे उस तरह हल करता है जैसे एक इंसान color describe करेगा: एक Hue (color wheel पर कौन सा color), एक Saturation (कितना vivid या washed-out), और एक Lightness (black या white के कितना करीब)।

In this page:

  1. Hue Wheel
  2. Saturation से Vividness नियंत्रित करना
  3. Lightness से Tone नियंत्रित करना
  4. Tints और Shades बनाना
  5. hsla() से Transparency जोड़ना
Syntax
markup 
<tagname style="color: hsl(hue, saturation%, lightness%);">content</tagname>

Hue Wheel

Hue 0 से 360 तक की एक value है जो color wheel पर एक position को represent करती है: 0 red है, 120 green है, 240 blue है, और 360 वापस घूमकर red पर आ जाता है। Hue अकेले, कितना vivid या light दिखता है इससे स्वतंत्र रहकर, यह तय करता है कि आप कौन सा color देख रहे हैं।

Note: किसी color का complementary विपरीत color wheel पर जल्दी ढूंढने के लिए hue value को एक fixed मात्रा (जैसे +180) से rotate करें।
Warning: 0-360 range से बाहर की hue value बस wheel के चारों ओर wrap हो जाती है बजाय error देने के, क्योंकि wheel का कोई true start या end नहीं होता।

उदाहरण: The Hue Wheel

markup 
<p style="color: hsl(0, 100%, 50%);">Hue 0 = red</p>
<p style="color: hsl(240, 100%, 50%);">Hue 240 = blue</p>

Saturation से Vividness नियंत्रित करना

Saturation 0% से 100% तक का एक percentage है जो नियंत्रित करता है कि कोई color कितना vivid या muted दिखता है -- 100% saturation एक शुद्ध, तीव्र hue देती है, जबकि 0% saturation सारा color हटा देती है, और hue value चाहे जो भी हो, सिर्फ gray का एक shade बचता है।

Note: secondary UI elements के लिए एक softer, ज़्यादा muted variant बनाने के लिए किसी bright accent color पर saturation कम करें।
Warning: 0% saturation पर, hue value पूरी तरह matter करना बंद कर देती है, क्योंकि हर hue एक ही neutral gray में collapse हो जाती है।

उदाहरण: Controlling Vividness with Saturation

markup 
<p style="color: hsl(200, 100%, 50%);">Fully saturated</p>
<p style="color: hsl(200, 0%, 50%);">Zero saturation = gray</p>

Lightness से Tone नियंत्रित करना

Lightness 0% से 100% तक का एक percentage है जो नियंत्रित करता है कि कोई color black या white के कितने पास बैठता है -- 0% हमेशा शुद्ध black होता है, 100% हमेशा शुद्ध white होता है, और 50% hue को उसके सबसे शुद्ध, सबसे saturated रूप में दिखाता है।

Note: UI color palette के लिए tints और shades का एक matching सेट generate करने हेतु hue और saturation को fixed रखते हुए सिर्फ lightness को ऊपर-नीचे करें।
Warning: 0% या 100% lightness पर, color चाहे जो भी hue या saturation value हो, pure black या white बन जाता है।

उदाहरण: Controlling Tone with Lightness

markup 
<p style="color: hsl(200, 100%, 0%);">0% lightness = black</p>
<p style="color: hsl(200, 100%, 50%);">50% lightness = pure hue</p>
<p style="color: hsl(200, 100%, 100%);">100% lightness = white</p>

Tints और Shades बनाना

क्योंकि HSL "कौन सा color" वाले सवाल (hue) को "कितना light" वाले सवाल (lightness) से अलग करता है, यह एक coordinated palette generate करने के लिए सबसे आसान notation है -- hue और saturation को lock रखें, फिर hover states, borders, और backgrounds के लिए shades की एक smooth ramp बनाने हेतु सिर्फ lightness बदलें, जो सभी स्पष्ट रूप से एक ही color family के हों।

Note: एक base hue और saturation एक बार define करें, फिर lightness value को 10% ऊपर या नीचे adjust करके hover और active states बनाएं।
Warning: shade बनाने की कोशिश करते समय सिर्फ lightness के बजाय hue को थोड़ा बदलना एक true tint के बजाय एक visibly अलग, mismatched color पैदा करेगा।

उदाहरण: Building Tints and Shades

markup 
<div style="background-color: hsl(210, 80%, 40%);">Dark</div>
<div style="background-color: hsl(210, 80%, 60%);">Medium</div>
<div style="background-color: hsl(210, 80%, 80%);">Light</div>

hsla() से Transparency जोड़ना

hsla(hue, saturation, lightness, alpha) वही चौथी alpha value जोड़ता है जो rgba() में उपयोग होती है, जो 0 (पूरी तरह transparent) से 1 (पूरी तरह opaque) तक होती है, जिससे कोई HSL color पीछे के content के साथ blend हो सके।

Note: जब भी किसी color overlay को background content को आंशिक रूप से दिखने देना हो, तो hsl() के बजाय hsla() का उपयोग करें।
Warning: alpha value को पूरी तरह भूलकर hsla() को सिर्फ तीन arguments के साथ उपयोग करने से color declaration invalid हो जाएगी।

उदाहरण: Adding Transparency with hsla()

markup 
<div style="background-color: hsla(210, 80%, 50%, 0.5);">Semi-transparent overlay</div>
Live Example
Related Topics

HTML HEX रंग · HTML लिंक रंग · HTML RGB रंग · HTML रंग

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. saturation और lightness को confuse करना, जबकि saturation color intensity/vividness control करता है और lightness यह control करता है कि color black या white के कितने पास है।
  2. यह भूल जाना कि hue को 360-degree color wheel के चारों ओर degrees में measure किया जाता है, तो 0 और 360 दोनों red की तरफ point करते हैं।
  3. lightness को 0% या 100% पर set करना और फिर भी hue देखने की उम्मीद करना, जबकि वे extremes hue या saturation चाहे जो भी हो हमेशा pure black या pure white ही produce करते हैं।
चैप्टर सारांश
  • HSL color को Hue (0-360 degrees), Saturation (0-100%), और Lightness (0-100%) के रूप में describe करता है।
  • hue और saturation को fixed रखते हुए सिर्फ lightness बदलना एक color के tints और shades का consistent set generate करने का सबसे आसान तरीका है।
  • hsla() rgba() में मिलने वाला वही alpha transparency channel जोड़ता है, 0 से 1 तक एक चौथी value के रूप में।
ब्राउज़र सपोर्ट

hsl() और hsla() color notation Chrome, Firefox, Safari, और Edge समेत सभी modern browsers में supported है।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML HEX Colors Next Lesson → HTML CSS

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.