सीधे कलर पिकर पर जाएँ

कलर गैमट क्या है: sRGB, Display P3 और गैमट से बाहर के रंग

गैमट उन रंगों का सेट है जिन्हें कोई स्क्रीन या कलर स्पेस दिखा सकता है। वेब sRGB पर बना था, लेकिन आज ज़्यादातर फ़ोन और कई लैपटॉप Display P3 दिखाते हैं, जिसमें लाल, हरे और नारंगी रंग साफ़ तौर पर ज़्यादा चटक होते हैं।

पढ़ने में 2 मिनट

गैमट क्या है

हर स्क्रीन लाल, हरी और नीली रोशनी मिलाकर रंग बनाती है। वह जो सबसे शुद्ध लाल, हरा और नीला बना सकती है, वे एक त्रिभुज के कोने तय करते हैं, और उस त्रिभुज के अंदर का हर रंग उसके गैमट में है। इसके बाहर के रंग उस स्क्रीन पर दिख ही नहीं सकते।

sRGB, Display P3 और Rec. 2020

sRGB वेब का डिफ़ॉल्ट है, और 2016 से पहले बिके ज़्यादातर मॉनिटर का भी। HEX, rgb() और hsl() सभी sRGB रंग बताते हैं।

Display P3 में sRGB से लगभग एक चौथाई ज़्यादा रंग आते हैं, ज़्यादातर चटक हरे, लाल और नारंगी। iPhone, iPad, Mac और कई Android फ़ोन और प्रीमियम लैपटॉप इसका इस्तेमाल करते हैं। CSS में इसे color(display-p3 r g b) के रूप में या ज़्यादा क्रोमा वाले OKLCH मान के रूप में लिखा जाता है।

Rec. 2020 इससे भी बड़ा है और HDR वीडियो में इस्तेमाल होता है। बहुत कम स्क्रीन इसे पूरा कवर करती हैं।

उदाहरण: #ff5733
फ़ॉर्मैटवैल्यू
HEX
Display P3
OKLCH
Rec. 2020

गैमट से बाहर के रंगों का क्या होता है

अगर कोई CSS रंग स्क्रीन के गैमट से बाहर है, तो ब्राउज़र को उसकी जगह कुछ और दिखाना पड़ता है। सीधी क्लिपिंग हर चैनल को सीमा पर काट देती है और इससे ह्यू बदल सकता है। CSS Color 4 इसके बजाय OKLCH में गैमट मैपिंग की सलाह देता है: लाइटनेस और ह्यू वैसे ही रखिए और क्रोमा तब तक घटाइए, जब तक रंग फ़िट न हो जाए।

PickShade, sRGB से बाहर जाने वाले हर रंग पर निशान लगाता है और मैप किया हुआ फ़ॉलबैक दिखाता है, ताकि आपको ठीक-ठीक पता हो कि पुरानी स्क्रीन वाले लोग क्या देखेंगे।

CSS में P3 रंग सुरक्षित तरीके से कैसे लिखें

पहले sRGB फ़ॉलबैक लिखिए और उसके बाद वाइड-गैमट मान, या चटक मान को color-gamut मीडिया क्वेरी के अंदर रखिए।

CSS

.button {
    background: #ff5733;
    background: oklch(68% 0.24 33.7);
}

@media (color-gamut: p3) {
    .hero {
        color: color(display-p3 1 0.3 0.15);
    }
}

सवाल और जवाब

कैसे पता करें कि कोई रंग sRGB के अंदर है या नहीं?

उसे PickShade में पेस्ट कीजिए। sRGB से बाहर के हर रंग पर गैमट की चेतावनी दिखती है, साथ में सबसे नज़दीकी फ़िट होने वाला रंग भी।

क्या P3 रंग Windows पर काम करते हैं?

हाँ, अगर मॉनिटर P3 कवर करता है और ब्राउज़र डिस्प्ले प्रोफ़ाइल जानता है। sRGB स्क्रीन पर ब्राउज़र रंग को sRGB में मैप कर देता है, इसलिए कुछ नहीं बिगड़ता।

क्या HEX सिर्फ़ sRGB तक सीमित है?

हाँ। HEX, rgb(), hsl() और hwb() हमेशा sRGB रंग बताते हैं। वाइड-गैमट रंगों के लिए oklch() या color(display-p3 ...) इस्तेमाल कीजिए।

PickShade में आज़माएँ

मिलते-जुलते गाइड