कलर गैमट मैपिंग: रंग स्थानों के बीच परिवर्तन

जब आप एक पेशेवर कैमरे पर एक विशद सूर्यास्त की फोटो खींचते हैं और इसे एक वेब ब्राउज़र में खोलते हैं, तो कुछ खो जाता है। कैमरे के wide-gamut सेंसर ने जो गहरे, संतृप्त नारंगी और बैंगनी रंग रिकॉर्ड किए, वे हर डिस्प्ले पर ठीक से पुनः उत्पन्न नहीं किए जा सकते। एक रंग स्थान की सीमाओं के भीतर फिट होने के लिए दूसरे रंग स्थान में मौजूद रंगों को अनुकूलित करने की इस प्रक्रिया को गैमट मैपिंग कहा जाता है।

गैमट मैपिंग क्या है?

एक कलर गैमट रंगों की पूरी रेंज है जिसे एक विशेष डिवाइस, फ़ॉर्मेट, या रंग स्थान प्रस्तुत कर सकता है।

जब आप एक बड़े गैमट से एक छोटे में रंग स्थानांतरित करते हैं, तो कुछ रंग लक्ष्य गैमट के बाहर हो सकते हैं। इन्हें out-of-gamut रंग कहा जाता है।

out-of-gamut रंगों की समस्या

एक विशद cyan पर विचार करें: sRGB में #00FFFF (#00FFFF)। यह रंग sRGB gamut के किनारे के पास बैठता है। Display P3 में अधिक संतृप्त cyans उपलब्ध हैं।

अब imagine करें कि आप Display P3 में एक इंटरफेस डिज़ाइन करते हैं, एक विशद हरे का उपयोग करते हुए जो sRGB से बाहर है: लगभग color(display-p3 0.0 0.9 0.3)। जब एक उपयोगकर्ता इसे एक मानक sRGB monitor पर देखता है, तो ब्राउज़र को एक निर्णय लेना होता है: इस अप्रजनन योग्य हरे का प्रतिनिधित्व करने के लिए कौन सा sRGB रंग चाहिए?

Clipping बनाम Perceptual Compression

Clipping

Clipping सबसे सरल दृष्टिकोण है: gamut के बाहर के रंगों को gamut boundary पर निकटतम बिंदु पर snap किया जाता है।

Clipping की सबसे बड़ी समस्या hue shift है। कई out-of-gamut रंग ऐसे तरीके से clip करते हैं जो उनके hue को perceptibly बदल देता है। एक विशद हरा yellow-green में clip हो सकता है; एक गहरा बैंगनी नीले में clip हो सकता है।

Perceptual Rendering Intent (Compression)

Perceptual rendering एक अलग दृष्टिकोण लेता है। केवल out-of-gamut रंगों को adjust करने के बजाय, यह पूरे gamut को proportionally scale करता है।

Perceptual compression के फायदे: - Smooth gradients smooth रहते हैं (कोई banding नहीं) - रंगों के बीच सापेक्ष संबंध preserved रहते हैं - Photography और gradients के लिए आम तौर पर अधिक visually pleasant

Relative Colorimetric

एक तीसरा दृष्टिकोण — relative colorimetric — in-gamut रंगों को ठीक-ठीक map करता है और out-of-gamut रंगों को clip करता है, जबकि source और destination के बीच white point में अंतर के लिए adjust करता है।

CSS गैमट मैपिंग

CSS ने CSS Color Level 4 विनिर्देश के बाद से कई रंग स्थानों का समर्थन किया है।

CSS में Wide-Gamut रंग निर्दिष्ट करना

/* sRGB (पारंपरिक) */
color: #22C55E;
color: rgb(34, 197, 94);

/* Display P3 (wide gamut) */
color: color(display-p3 0.05 0.8 0.35);

/* Rec. 2020 (ultra-wide) */
color: color(rec2020 0.1 0.7 0.2);

/* OKLCH (perceptually uniform, wide-gamut colors address कर सकता है) */
color: oklch(0.75 0.25 150);

CSS गैमट Overflow को कैसे Handle करता है

जब एक CSS रंग मान एक ऐसे रंग को address करता है जो डिस्प्ले के gamut के बाहर है, तो ब्राउज़र CSS Color Level 4 में परिभाषित CSS gamut mapping algorithm लागू करता है। Algorithm OKLCH रंग स्थान में binary search का उपयोग करता है।

Algorithm प्राथमिकता देता है: 1. पहले lightness preserved करना 2. दूसरे hue preserved करना 3. Color gamut के भीतर फिट होने तक chroma (saturation) कम करना

color-gamut Media Query

/* Default: सभी डिस्प्ले के लिए sRGB रंग */
.brand-color {
  color: #22C55E;
}

/* Enhanced: सक्षम डिस्प्ले के लिए अधिक विशद P3 रंग */
@media (color-gamut: p3) {
  .brand-color {
    color: color(display-p3 0.05 0.8 0.35);
  }
}

/* Ultra-wide: Rec. 2020 डिस्प्ले के लिए अधिकतम vibrancy */
@media (color-gamut: rec2020) {
  .brand-color {
    color: color(rec2020 0.1 0.7 0.2);
  }
}

डिज़ाइनरों के लिए व्यावहारिक समाधान

1. Target Gamut में डिज़ाइन करें

यदि आपका उत्पाद मुख्य रूप से मिश्रित डिवाइस पर वेब उपयोगकर्ताओं को target करता है, तो sRGB में डिज़ाइन करें।

2. अपने विशद रंगों की Gamut Status जानें

Figma में ऐसे कई विशद रंग जो "काम करते हैं" (जो Apple hardware पर Display P3 का उपयोग करता है) वेब उपयोग के लिए sRGB में export होने पर अलग दिख सकते हैं।

3. Gradient Transitions को Gamuts में Test करें

Wide-gamut रंगों के बीच Gradients sRGB monitors पर प्रदर्शित होने पर banding उत्पन्न कर सकते हैं।

4. सही Export Format का उपयोग करें

Wide-gamut रंग वाली images के लिए: - JPEGs: रंग profile embed करें (Display P3 या Adobe RGB) - PNGs: Same — profile embed करें - WebP: ICC profiles का समर्थन करता है

रंगों को रंग स्थानों के बीच convert करने और उनकी gamut status समझने के लिए Color Converter का उपयोग करें।

मुख्य बातें

• एक रंग gamut एक डिवाइस या रंग स्थान द्वारा प्रस्तुत किए जा सकने वाले रंगों की रेंज है।
• Out-of-gamut रंग वे रंग हैं जो target gamut के बाहर हैं।
• Clipping out-of-gamut रंगों को gamut boundary पर snap करता है — तेज़ लेकिन hue shifts और banding का कारण बन सकता है।
• CSS Color Level 4 एक gamut mapping algorithm परिभाषित करता है जो OKLCH और deltaE 2000 का उपयोग करता है।
• color-gamut media query आपको सक्षम डिस्प्ले के लिए अधिक विशद color(display-p3) रंग serve करने देता है।
• किसी भी रंग का gamut status समझने के लिए Color Converter का उपयोग करें।