HTML HSL Colors

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:

Hue Wheel
Saturation से Vividness नियंत्रित करना
Lightness से Tone नियंत्रित करना
Tints और Shades बनाना
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

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

HTML HSL Colors

Hue Wheel

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

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

Tints और Shades बनाना

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

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code