CSS HSL Colors

HSL एक color model है जिसका मतलब होता है Hue, Saturation, Lightness.
CSS में HSL colors का उपयोग करके colors को human-friendly तरीके से control किया जा सकता है।

HSL Color Format

hsl(hue, saturation, lightness)

HSL के Components

1. Hue

Hue color का type बताता है।
Value degree (deg) में होती है और range होती है:

• 0deg → Red
• 120deg → Green
• 240deg → Blue

p {
  color: hsl(0, 100%, 50%);
}

2. Saturation

Saturation color की intensity बताता है।

• 0% → Gray
• 100% → Full color

p {
  color: hsl(120, 100%, 50%);
}

3. Lightness

Lightness color की brightness बताता है।

• 0% → Black
• 50% → Normal color
• 100% → White

p {
  color: hsl(240, 100%, 50%);
}

Basic HSL Examples

color: hsl(0, 100%, 50%);    /* Red */
color: hsl(120, 100%, 50%);  /* Green */
color: hsl(240, 100%, 50%);  /* Blue */

HSL Background Color Example

div {
  background-color: hsl(60, 100%, 90%);
}

HSL Light और Dark Shades

Lightness change करके same color के multiple shades बना सकते हैं।

p {
  color: hsl(200, 100%, 30%);
}

HSL Saturation Control

Saturation कम करके dull colors बनाए जा सकते हैं।

p {
  color: hsl(0, 20%, 50%);
}

HSL और RGB Difference

• HSL color human perspective से easier होता है
• RGB numeric और device-based होता है
• HSL में shades और variations बनाना आसान होता है

Common HSL Mistakes

Percentage भूल जाना

गलत:

color: hsl(120, 100, 50);

सही:

color: hsl(120, 100%, 50%);

Hue Range गलत देना

Hue value 0–360 के बीच होनी चाहिए।

Summary

• HSL का full form Hue, Saturation, Lightness है
• Hue color type बताता है
• Saturation intensity control करता है
• Lightness brightness control करता है
• HSL color tuning के लिए बहुत useful है