← LEACB पर वापस
2026-01-15

कलर सिस्टम

कलर साइंसDigitalटूल्स

RGB: योगात्मक मॉडल

आप जिस भी स्क्रीन को देखते हैं, वह लाल, हरी और नीली रोशनी मिलाकर रंग बनाती है। यह योगात्मक रंग-मिश्रण है — तीनों को पूरी तीव्रता पर जोड़ने से सफ़ेद बनता है। RGB हार्डवेयर की अपनी भाषा है: यह सीधे हर डिस्प्ले पिक्सल के तीन सब-पिक्सल से मेल खाता है।

Every screen you look at produces color by mixing red, green, and blue light. This is additive color mixing — adding all three at full intensity produces white. RGB is hardware-native: it maps directly to the three sub-pixels in each display pixel.

लेकिन RGB इंसानों के लिए सहज नहीं है। किसी से “203, 47, 128” की कल्पना करने को कहने का कोई मतलब नहीं बनता। इसीलिए ऊँचे दर्जे के मॉडल मौजूद हैं।

But RGB is not intuitive for humans. Asking someone to imagine "203, 47, 128" means nothing. That's why higher-level models exist.

HSL और HSV

HSL (Hue, Saturation, Lightness) और HSV (Hue, Saturation, Value) RGB को एक बेलनाकार ज्यामिति में ढाल देते हैं, जो ज़्यादा सहज है। Hue रंग-चक्र का कोण है, saturation तीव्रता है, और lightness/value चमक तय करता है।

HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) remap RGB into a cylindrical geometry that's more intuitive. Hue is the color wheel angle, saturation is intensity, and lightness/value controls brightness.

ये मॉडल जल्दी रंग चुनने के लिए बढ़िया हैं, पर धारणा की सटीकता के लिए बहुत ख़राब। HSL में 100% saturation हर hue पर बराबर चटख नहीं दिखता।

These models are great for quick color picking but terrible for perceptual accuracy. A saturation of 100% in HSL doesn't always look equally vivid across different hues.

CIELAB और LCH

CIELAB (L*a*b*) धारणा में एकरूपता के लिए बनाया गया था: ΔE = 1 पूरे स्पेस में हर जगह बस-बस दिखने लायक़ अंतर होना चाहिए। L* चमक है, a* हरा-लाल है, b* नीला-पीला है। LCH CIELAB का बेलनाकार रूप है: Lightness, Chroma, Hue।

CIELAB (L*a*b*) was designed for perceptual uniformity: ΔE = 1 should be a just-noticeable difference everywhere in the space. L* is lightness, a* is green-red, b* is blue-yellow. LCH is CIELAB in cylindrical form: Lightness, Chroma, Hue.

डेवलपर के लिए पैलेट बनाने, एक्सेसिबल कलर स्केल गढ़ने, और आँखों को सहज लगने वाले ग्रेडिएंट बनाने के लिए LCH सबसे अच्छा स्पेस है।

For developers, LCH is the best space for generating palettes, creating accessible color scales, and interpolating gradients that look smooth to the human eye.

Oklab और OKLCH

ब्यौर्न ओटोसन का Oklab CIELAB से बेहतर hue रैखिकता और आसान गणित देता है। यह अब CSS में oklch() और oklab() के ज़रिए उपलब्ध है। अगर आप आधुनिक वेब इंटरफ़ेस बना रहे हैं, तो एक-से और धारणा में एकरूप नतीजों के लिए OKLCH ही सुझाया गया कलर मॉडल है।

Oklab by Björn Ottosson improves on CIELAB with better hue linearity and simpler math. It's now supported in CSS via oklch() and oklab(). If you're building modern web interfaces, OKLCH is the recommended color model for consistent, perceptually uniform results.

गैमट और एन्कोडिंग

गैमट रंगों की वह रेंज है जिसे कोई उपकरण या स्पेस दिखा सकता है। sRGB दिखने वाले रंगों का लगभग 35% समेटता है। Display P3 लगभग 45%। Rec. 2020 लगभग 75%। जब आप किसी उपकरण के गैमट से बाहर का रंग माँगते हैं, तो उसे गैमट-मैप करना पड़ता है — आम तौर पर chroma घटाकर, जब तक वह अंदर आ जाए।

A gamut is the range of colors a device or space can represent. sRGB covers ~35% of visible colors. Display P3 covers ~45%. Rec. 2020 covers ~75%. When you specify a color outside a device's gamut, it must be gamut-mapped — usually by reducing chroma until it fits.

ट्रांसफ़र फ़ंक्शन (गामा कर्व) तय करते हैं कि संख्याएँ रोशनी में कैसे बदलती हैं। sRGB लगभग 2.2 का गामा कर्व इस्तेमाल करता है। इसे ग़लत करना — गामा दो बार लगाना या बिल्कुल न लगाना — वेब पर फीकी या दबी हुई तस्वीरों की सबसे बड़ी वजह है।

Transfer functions (gamma curves) define how numerical values map to light output. sRGB uses a ~2.2 gamma curve. Getting this wrong — applying gamma twice or not at all — is the #1 source of washed-out or crushed images on the web.

काम की बातें

  • पैलेट बनाने और CSS में रंग तय करने के लिए OKLCH इस्तेमाल करें
  • ब्लेंडिंग, कंपोज़िटिंग और शेडर गणित के लिए लीनियर RGB इस्तेमाल करें
  • सिस्टम के बीच रंग भेजते समय अपने कलर स्पेस के बारे में हमेशा साफ़ रहें
  • अपने डिज़ाइन को चौड़े गैमट (P3) और मानक (sRGB) — दोनों डिस्प्ले पर जाँचें
  • ग्रेडिएंट कभी sRGB में इंटरपोलेट न करें — आधुनिक CSS में color-mix(in oklch, …) इस्तेमाल करें
  • Use OKLCH for palette generation and CSS color definitions
  • Use linear RGB for blending, compositing, and shader math
  • Always be explicit about your color space when passing colors between systems
  • Test your designs on both wide-gamut (P3) and standard (sRGB) displays
  • Never interpolate gradients in sRGB — use color-mix(in oklch, …) in modern CSS