CSS HSL Colors

hsl() Function

hsl(hue, saturation, lightness) एक hue लेता है color wheel पर एक degree के रूप में (0-360, जहाँ 0 red है, 120 green है, 240 blue है), फिर saturation और lightness percentages के रूप में। hsl(0, 100%, 50%) pure red है, और सिर्फ hue value को rotate करना saturation या lightness को छुए बिना smoothly color wheel के चारों ओर move करता है।

उदाहरण: The hsl() Function

<style>
.red { background: hsl(0, 100%, 50%); }
.green { background: hsl(120, 100%, 50%); }
.blue { background: hsl(240, 100%, 50%); }
</style>
<div class="red">hue 0</div>
<div class="green">hue 120</div>
<div class="blue">hue 240</div>

Saturation को समझना

Saturation control करता है कि कोई color कितना vivid या muted है: 100% उस hue का पूरी तरह saturated, vibrant version है, जबकि 0% hue value चाहे जो भी हो एक ऐसा gray है जिसमें बिल्कुल color नहीं है। किसी brand color का muted, pastel, या desaturated variant बनाने का सबसे आसान तरीका saturation को कम करना है।

उदाहरण: Understanding Saturation

<style>
.vivid { background: hsl(210, 100%, 50%); }
.muted { background: hsl(210, 20%, 50%); }
.gray { background: hsl(210, 0%, 50%); }
</style>
<div class="vivid">100% saturation</div>
<div class="muted">20% saturation</div>
<div class="gray">0% saturation — gray</div>

Lightness को समझना

Lightness control करता है कि कोई color black या white के कितना करीब है: 0% हमेशा black होता है, 100% हमेशा white होता है, और 50% pure, undiluted hue है।

क्योंकि lightness इस तरह काम करती है, एक hue से पूरा tint-and-shade palette बनाना उतना ही आसान है जितना hue और saturation को constant रखते हुए lightness value को sweep करना।

उदाहरण: Understanding Lightness

<style>
.black { background: hsl(210, 100%, 0%); }
.pure { background: hsl(210, 100%, 50%); }
.white { background: hsl(210, 100%, 100%); }
</style>
<div class="black">0% lightness</div>
<div class="pure">50% lightness</div>
<div class="white">100% lightness</div>

HSL Adjust करना क्यों आसान है

क्योंकि hue, saturation, और lightness independent हैं, HSL उन common design tweaks को trivial बना देता है जो RGB या hex में awkward होते हैं -- किसी color को darken करने का मतलब है lightness को एक fixed amount से कम करना, और desaturate करने का मतलब है saturation कम करना, बिना हाथ से तीन अलग-अलग channel values recompute किए।

उदाहरण: Why HSL Is Easier to Adjust

<style>
.base { background: hsl(210, 80%, 50%); }
.darker { background: hsl(210, 80%, 30%); }
.desaturated { background: hsl(210, 30%, 50%); }
</style>
<div class="base">Base color</div>
<div class="darker">Darker: lightness lowered</div>
<div class="desaturated">Desaturated: saturation lowered</div>

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

hsla(hue, saturation, lightness, alpha) rgba() जैसा ही 0-से-1 alpha channel जोड़ता है, जिससे किसी color को semi-transparent बनाया जा सकता है जबकि HSL के intuitive hue/saturation/lightness controls बने रहते हैं। जब आपको एक ही declaration में color tweaking की आसानी और transparency दोनों चाहिए हों तो यह natural choice है।

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

<style>
.overlay {
  background: hsla(210, 100%, 50%, 0.4);
}
</style>
<div class="overlay">Semi-transparent HSL color</div>