CSS Color Functions: rgb(), hsl(), oklch() की तुलना

CSS में रंग लिखने के अधिक तरीके हैं जितने अधिकांश developers को एहसास है। सर्वव्यापी hex code से परे, कम से कम आठ अलग color functions हैं — और प्रत्येक का एक अलग model, अलग strengths और अलग कारण हैं जिनके लिए आप इसे पहुंच सकते हैं।

rgb() और rgba()

rgb() function RGB color model की direct CSS expression है: 0 से 255 तक तीन संख्याएं, Red, Green और Blue के लिए एक-एक।

color: rgb(59, 130, 246);     /* एक जीवंत नीला */
color: rgb(255, 87, 51);      /* एक गर्म coral red */
color: rgb(0, 0, 0);          /* Black */
color: rgb(255, 255, 255);    /* White */

Modern rgb() Syntax

CSS Color Level 4 में, rgb() को alpha channel directly accept करने के लिए update किया गया, जिससे rgba() redundant हो गया:

/* ये अब equivalent हैं */
color: rgba(59, 130, 246, 0.5);
color: rgb(59 130 246 / 0.5);

rgb() कब उपयोग करें

rgb() सबसे उपयोगी है जब: - आप एक hex color से काम कर रहे हैं और raw channel values दृश्यमान चाहते हैं - आप CSS custom properties के माध्यम से individual R, G, या B channels animate करना चाहते हैं

hsl() और hsla()

HSL Hue, Saturation, Lightness के लिए खड़ा है। यह colors को एक cube के बजाय एक cylinder से map करता है, जो designers के वास्तव में color के बारे में सोचने के तरीके के बहुत करीब है।

• Hue: 0 से 360 तक color wheel पर एक degree (0 = red, 120 = green, 240 = blue)
• Saturation: 0% (gray, कोई रंग नहीं) से 100% (fully vivid)
• Lightness: 0% (black) से 100% (white)

color: hsl(217, 91%, 60%);    /* एक जीवंत नीला */
color: hsl(9, 100%, 60%);     /* एक गर्म coral red */
color: hsl(80, 60%, 35%);     /* Olive green */
color: hsl(0, 0%, 50%);       /* Pure medium gray */

hsl() की समस्या

HSL की अपनी intuitive appeal के बावजूद, एक मूलभूत दोष है: यह perceptually uniform नहीं है। HSL में equal numerical steps वाले steps human eye को equally different नहीं दिखते।

lab() और lch()

CSS Color Level 4 ने lab() और lch() को CIE Lab color space के आधार पर पेश किया, जो perceptually uniform* होने के लिए design किया गया है।

color: lab(53 -5 -60);    /* एक जीवंत नीला */
color: lab(55 60 40);     /* एक गर्म red-orange */

ये functions oklch() द्वारा अधिकांश नए काम के लिए supersede किए जा चुके हैं।

oklch()

OKLCH CSS color specification के लिए current state of the art है। यह Björn Ottosson द्वारा 2020 में विकसित Oklab color space पर आधारित है।

Function तीन values plus optional alpha लेता है:

• L: Lightness 0 (black) से 1 (white)
• C: Chroma (color intensity), आमतौर पर 0 से 0.4
• H: Hue angle degrees में, 0 से 360

color: oklch(0.62 0.19 250);    /* जीवंत नीला */
color: oklch(0.65 0.22 25);     /* गर्म red-orange */
color: oklch(0.85 0.08 130);    /* नरम हरा */

oklch() क्यों महत्वपूर्ण है

Predictable lightness: OKLCH lightness perceptually uniform है, इसलिए एक ही L value वाले दो colors equally bright दिखते हैं।

Wide gamut access: OKLCH sRGB gamut से बाहर colors express कर सकता है।

बेहतर gradient interpolation: OKLCH में interpolate किए गए colors perceptually intermediate colors से गुजरते हैं।

नए design system के लिए oklch() recommended starting point है। किसी भी existing hex code को OKLCH में translate करने के लिए Color Converter का उपयोग करें।

color-mix()

color-mix() एक newer CSS function है जो दो colors को specified color space और proportion में blend करता है:

/* blue और red को oklch में mix करें */
color: color-mix(in oklch, #3B82F6 50%, #EF4444 50%);

/* white के साथ mix करके lighter tint बनाएं */
color: color-mix(in oklch, oklch(0.62 0.19 250) 60%, white);

2026 में Browser Support

Production काम के लिए जहाँ maximum compatibility matters हो, modern syntax से पहले hex या rgb() fallback प्रदान करें:

.element {
  /* पुराने browsers के लिए Fallback */
  color: #3B82F6;
  /* Progressive enhancement */
  color: oklch(0.62 0.19 250);
}

सही CSS Color Function चुनना

मुख्य निष्कर्ष

• rgb() और hsl() universal browser support के साथ established standards हैं।
• hsl() design काम के लिए rgb() से अधिक intuitive है, लेकिन यह perceptually uniform नहीं है।
• oklch() modern standard है: perceptually uniform, wide-gamut capable, और gradients के लिए excellent।
• color-mix() CSS में dynamic color generation enable करता है।
• किसी भी existing hex code को oklch() में translate करने के लिए Color Converter का उपयोग करें।