Read in English

रेफ़रेंस · कलर स्पेस

कलर स्पेस एक नक्शा

हर स्पेस किसलिए है, उसमें कितना रंग है, और वे आपस में कैसे जुड़ते हैं, एक ही पेज पर। हर एक उस लर्न लेख से जुड़ा है जो उसे समझाता है, और उस कन्वर्टर से जो उसे दूसरे में बदलता है।

स्पेस
9
लर्न लेख
15
कन्वर्टर
18
  1. 01sRGB
  2. 02लीनियर sRGB
  3. 03HSL और HWB
  4. 04Display P3
  5. 05Rec. 2020
  6. 06Adobe RGB और ProPhoto RGB
  7. 07CIE XYZ
  8. 08CIELAB और LCH
  9. 09Oklab और OKLCH

एक नज़र में

हर स्पेस, साथ-साथ

व्हाइट पॉइंट और ट्रांसफ़र फ़ंक्शन सीएसएस Color 4 के पहले से तय स्पेस वाले हैं।

कलर स्पेस की तुलना (तालिका)
स्पेसप्रकारश्वेतगैमटट्रांसफरआँख के लिए एक-सासीएसएस में
sRGB RGB स्पेस D65 sRGB sRGB कर्व, लगभग गामा 2.2 नहीं #rrggbb · rgb() · color(srgb r g b)
लीनियर sRGB RGB स्पेस D65 sRGB कोई नहीं (लीनियर) नहीं color(srgb-linear r g b)
HSL और HWB sRGB, नए ढंग से D65 sRGB sRGB कर्व नहीं hsl() · hwb()
डिस्प्ले P3 वाइड RGB स्पेस D65 डिस्प्ले P3 sRGB कर्व नहीं color(display-p3 r g b)
Rec. 2020 वाइड RGB स्पेस D65 Rec. 2020 BT.2020 कर्व नहीं color(rec2020 r g b)
Adobe RGB और ProPhoto RGB वर्किंग RGB स्पेस D65 · D50 Adobe RGB · ProPhoto गामा 563/256 · गामा 1.8 नहीं color(a98-rgb r g b) · color(prophoto-rgb r g b)
CIE XYZ संदर्भ स्पेस D65 · D50 हर रंग कोई नहीं (लीनियर) नहीं color(xyz-d65 x y z) · color(xyz-d50 x y z)
CIELAB और LCH परसेप्चुअल स्पेस D50 हर रंग क्यूब रूट, अंदर ही लगभग; नीले रंगों में ह्यू खिसकता है lab() · lch()
Oklab और OKLCH परसेप्चुअल स्पेस D65 हर रंग क्यूब रूट, अंदर ही डिज़ाइन से, ज़्यादा क़रीब oklab() · oklch()

गैमट

साथ-साथ: हर एक में कितना रंग है

वही तीन प्राइमरी, हर स्पेस के किनारे पर, और हर गैमट कितना क्षेत्र घेरता है।

आपकी स्क्रीन लगभग sRGB दिखाती है, इसलिए हर पंक्ति के तीनों नमूने लगभग एक जैसे दिखते हैं। Display P3 स्क्रीन पर बीच वाले ज़्यादा चटख दिखते हैं। आपकी स्क्रीन Display P3 तक जाती है: बीच वाले नमूने sRGB वालों से ज़्यादा चटख हैं, और Rec. 2020 वाले उतने पास दिखाए गए हैं जितना हो सके। आपकी स्क्रीन Rec. 2020 तक जाती है: हर कॉलम पिछले से ज़्यादा चटख है।

हर स्पेस का सबसे तेज़ लाल, हरा और नीला (तालिका)
प्राइमरीsRGBDisplay P3Rec. 2020
लाल color(srgb 1 0 0)क्रोमा 0.258 color(display-p3 1 0 0)क्रोमा 0.299 color(rec2020 1 0 0)क्रोमा 0.365
हरा color(srgb 0 1 0)क्रोमा 0.295 color(display-p3 0 1 0)क्रोमा 0.369 color(rec2020 0 1 0)क्रोमा 0.468
नीला color(srgb 0 0 1)क्रोमा 0.313 color(display-p3 0 0 1)क्रोमा 0.323 color(rec2020 0 0 1)क्रोमा 0.383

क्रोमा OKLCH वाला है: कोई रंग ग्रे से कितना दूर है। हर नमूना अपने नीचे लिखे मान से रंगा गया है; वाइड-कलर सपोर्ट के बिना ब्राउज़र उसकी sRGB जगह वाला रंग दिखाता है।

46048052054056058060062070000.10.20.30.40.50.60.70.80.10.20.30.40.50.60.70.80.9
CIE 1931 क्रोमैटिसिटी आरेख: घोड़े की नाल के आकार में वे सब रंग हैं जो आँख देख सकती है, और हर त्रिकोण में वे रंग जो कोई RGB स्पेस बना सकता है, ह्यू और सैचुरेशन के हिसाब से। बिंदु D65 सफ़ेद है।
हर गैमट कितना घेरता है (तालिका)
गैमटxy में क्षेत्र, sRGB की तुलना मेंu′v′ में क्षेत्र, sRGB की तुलना मेंदिखने वाले रंगों का हिस्सा, u′v′ में
sRGB1.00×1.00×33.3%
Display P31.36×1.26×41.8%
Adobe RGB (1998)1.35×1.17×38.8%
Rec. 20201.89×1.72×57.4%

ये एक सपाट आरेख पर क्षेत्र हैं, लाइटनेस को छोड़कर। 1976 का u′v′ आरेख 1931 के xy से रंगों को ज़्यादा बराबर दूरी पर रखता है, इसलिए उसके आँकड़े ज़्यादा सही तुलना हैं। कोई गैमट तीन आयामों में कितना जोड़ता है, वह एक अलग संख्या है: गैमट वॉल्यूम: एक वाइड गैमट वास्तव में कितना रंग जोड़ता है

स्पेस

हर एक का एक कार्ड: यह क्या है, कहाँ पढ़ें, क्या बदलें

मान साइट का सुनहरा रंग, #D3AF37, हर स्पेस में हैं; इनमें से कोई भी कॉपी करें।

RGB स्पेस

sRGB

वेब का डिफ़ॉल्ट: हेक्स कोड, rgb() और बिना प्रोफ़ाइल वाली हर तस्वीर का मतलब यही है।

श्वेत
D65
गैमट
sRGB
ट्रांसफर
sRGB कर्व, लगभग गामा 2.2

साइट का सुनहरा रंग, इसमें लिखा हुआ

  • हेक्स#D3AF37
  • sRGB (0 से 1)color(srgb 0.8275 0.6863 0.2157)

पढ़ें

कन्वर्ट करें

RGB स्पेस

लीनियर sRGB

बिना कर्व वाला sRGB: संख्याएँ रोशनी के अनुपात में होती हैं, जैसा ब्लेंडिंग और लाइटिंग के गणित को चाहिए।

श्वेत
D65
गैमट
sRGB
ट्रांसफर
कोई नहीं (लीनियर)

साइट का सुनहरा रंग, इसमें लिखा हुआ

  • लीनियर sRGBcolor(srgb-linear 0.65141 0.42869 0.0382)

पढ़ें

कन्वर्ट करें

sRGB, नए ढंग से

HSL और HWB

sRGB को ह्यू के साथ सैचुरेशन और लाइटनेस, या व्हाइटनेस और ब्लैकनेस के रूप में लिखा गया: लिखना आसान, आँख के लिए एक-सा नहीं।

श्वेत
D65
गैमट
sRGB
ट्रांसफर
sRGB कर्व

साइट का सुनहरा रंग, इसमें लिखा हुआ

  • HSLhsl(46.2 63.9% 52.2%)
  • HWBhwb(46.2 21.6% 17.3%)

पढ़ें

कन्वर्ट करें

वाइड RGB स्पेस

डिस्प्ले P3

sRGB के कर्व और व्हाइट वाला एक चौड़ा RGB स्पेस: आज की कई फ़ोन और लैपटॉप स्क्रीन का गैमट।

श्वेत
D65
गैमट
डिस्प्ले P3
ट्रांसफर
sRGB कर्व

साइट का सुनहरा रंग, इसमें लिखा हुआ

  • Display P3color(display-p3 0.80472 0.69157 0.30739)

पढ़ें

कन्वर्ट करें

वाइड RGB स्पेस

Rec. 2020

अल्ट्रा-हाई-डेफ़िनिशन टीवी का RGB स्पेस, और भी चौड़ा: कुछ ही स्क्रीन इसे पूरा दिखा पाती हैं।

श्वेत
D65
गैमट
Rec. 2020
ट्रांसफर
BT.2020 कर्व

साइट का सुनहरा रंग, इसमें लिखा हुआ

  • Rec. 2020color(rec2020 0.74174 0.66017 0.25864)

पढ़ें

कन्वर्ट करें

वर्किंग RGB स्पेस

Adobe RGB और ProPhoto RGB

फ़ोटोग्राफ़ी और प्रिंट के वर्किंग स्पेस; ProPhoto इतना चौड़ा है कि उसमें वे रंग भी आते हैं जो कोई स्क्रीन नहीं दिखाती।

श्वेत
D65 · D50
गैमट
Adobe RGB · ProPhoto
ट्रांसफर
गामा 563/256 · गामा 1.8

साइट का सुनहरा रंग, इसमें लिखा हुआ

  • Adobe RGB (1998)color(a98-rgb 0.78545 0.68035 0.26584)
  • ProPhoto RGBcolor(prophoto-rgb 0.67408 0.63343 0.26964)

पढ़ें

कन्वर्ट करें

संदर्भ स्पेस

CIE XYZ

वह रेफ़रेंस जिससे हर दूसरा स्पेस परिभाषित होता है, CIE स्टैंडर्ड ऑब्ज़र्वर से: यहाँ हर कन्वर्ज़न इससे होकर जाता है।

श्वेत
D65 · D50
गैमट
हर रंग
ट्रांसफर
कोई नहीं (लीनियर)

साइट का सुनहरा रंग, इसमें लिखा हुआ

  • CIE XYZ (D65)color(xyz-d65 0.42882 0.44786 0.1)
  • CIE XYZ (D50)color(xyz-d50 0.45463 0.45457 0.07797)

पढ़ें

कन्वर्ट करें

परसेप्चुअल स्पेस

CIELAB और LCH

लाइटनेस और दो विरोधी अक्ष, या उनका ध्रुवीय रूप: आँख के लिए लगभग एक-सा, और ΔE रंग-अंतर का आधार।

श्वेत
D50
गैमट
हर रंग
ट्रांसफर
क्यूब रूट, अंदर ही

साइट का सुनहरा रंग, इसमें लिखा हुआ

  • CIELABlab(73.19 4.7 62.68)
  • CIE LCHlch(73.19 62.86 85.71)

पढ़ें

कन्वर्ट करें

परसेप्चुअल स्पेस

Oklab और OKLCH

एक नया परसेप्चुअल स्पेस, जिसे CIELAB से ज़्यादा एक-सा ह्यू और लाइटनेस रखने के लिए बनाया गया: रंग चुनने और बदलने के लिए यही।

श्वेत
D65
गैमट
हर रंग
ट्रांसफर
क्यूब रूट, अंदर ही

साइट का सुनहरा रंग, इसमें लिखा हुआ

  • OKLaboklab(76.55% -0.00375 0.13842)
  • OKLCHoklch(76.55% 0.13847 91.55)

पढ़ें

कन्वर्ट करें

कन्वर्ज़न

कोई रंग एक स्पेस से दूसरे में कैसे पहुँचता है

हर रास्ता लीनियर लाइट से होकर जाता है और, ज़्यादातर, CIE XYZ से। साइट के कन्वर्टर यही कदम उठाते हैं।

कन्वर्ज़न के रास्ते (तालिका)
कहाँ से कहाँरूटआज़माएँ
हेक्स OKLCHहेक्स अंक8-बिट चैनलsRGB चैनल, 0 से 1लीनियर लाइटOKLabOKLCHहेक्स और OKLCH
हेक्स Display P3हेक्स अंक8-बिट चैनलsRGB चैनल, 0 से 1लीनियर लाइटCIE XYZ, D65लीनियर Display P3डिस्प्ले P3हेक्स और Display P3
Display P3 OKLCHडिस्प्ले P3लीनियर Display P3CIE XYZ, D65लीनियर लाइटOKLabOKLCHकन्वर्टर में खोलें
हेक्स Labहेक्स अंक8-बिट चैनलsRGB चैनल, 0 से 1लीनियर लाइटCIE XYZ, D65CIE XYZ, D50सीआईईएलएबीहेक्स और Lab
Lab LCHसीआईईएलएबीएलसीएचLab और LCH
OKLab OKLCHOKLabOKLCHOKLab और OKLCH
Rec. 2020 Display P3Rec. 2020लीनियर Rec. 2020CIE XYZ, D65लीनियर Display P3डिस्प्ले P3कन्वर्टर में खोलें

चुनना

कौन-सा स्पेस किस काम के लिए

कौन-सा स्पेस किस काम के लिए (तालिका)
कामस्पेसक्योंऔर
रंग सहेजना और साझा करनाsRGB हेक्सहर टूल, फ़ाइल और ब्राउज़र इसे पढ़ता है।हेक्स और RGB
इंटरफ़ेस के रंग चुनना और बदलनाOKLCHलाइटनेस और क्रोमा वैसे ही बदलते हैं जैसे दिखते हैं, इसलिए स्केल और थीम एक-सी रहती हैं।हेक्स और OKLCH
जहाँ स्क्रीन दिखा सके, वहाँ ज़्यादा चटख रंग दिखानाDisplay P3, sRGB विकल्प के साथजो स्क्रीन P3 तक जाती हैं वे इसे दिखाती हैं; बाकी विकल्प दिखाती हैं।सीएसएस में वाइड कलर
मापना कि दो रंग कितने अलग दिखते हैंCIELAB, ΔE 2000 के साथमानक रंग-अंतर सूत्र इसी पर परिभाषित है।CIE76 से CIEDE2000 और ΔEITP तक ΔE मेट्रिक्स
रंग मिलाना और ग्रेडिएंट बनानाOklab, या रोशनी के लिए लीनियर sRGBमिश्रण बीच में भी चमकदार रहते हैं, ग्रे से होकर नहीं जाते।कलर ग्रेडिएंट और इंटरपोलेशन
एक स्पेस को दूसरे के रूप में परिभाषित करनाCIE XYZयहाँ हर स्पेस इसी के सापेक्ष परिभाषित है।CIE XYZ की व्याख्या
प्रिंटCMYK, एक ICC प्रोफ़ाइल से होकरस्याही प्रेस और कागज़ पर निर्भर करती है, इसलिए कोई एक सूत्र सही नहीं है।CMYK और फोर-कलर प्रिंटिंग प्रोसेस

सीएसएस में

वाइड कलर, विकल्प के साथ

sRGB से बाहर का रंग इस्तेमाल करने के दो तरीके। ब्राउज़र जो घोषणा पढ़ नहीं पाता उसे छोड़ देता है, इसलिए उससे पहले वाली पंक्ति बनी रहती है।

एक घोषणा, OKLCH में

/* A green that Display P3 screens can show and sRGB screens cannot. */
.accent {
  color: #00ba64;  /* older browsers: the nearest sRGB color */
  color: oklch(69.28% 0.23895 153.13);  /* the full color, fitted to the screen by the browser */
}

सिर्फ़ उन स्क्रीन पर जो P3 तक जाती हैं

.accent { color: #00ba64; }

@media (color-gamut: p3) {
  .accent { color: color(display-p3 0.1 0.75 0.35); }
}

विकल्प, फिर पूरा रंग: P3 स्क्रीन पर दूसरा ज़्यादा चटख है। सीएसएस में रंग: ब्राउज़र में आधुनिक कलर

और पढ़ें

इस नक्शे के पीछे के लर्न लेख

हर स्पेस को लर्न लाइब्रेरी में पूरा समझाया गया है; ये लेख हैं, विषय के हिसाब से।

रेफ़रेंस: CIE कलरिमेट्री

RGB स्पेस और स्क्रीन

मॉडल और परसेप्चुअल स्पेस

व्यवहार में

स्रोत

यह कहाँ से आया है

यहाँ का हर मान साइट के कलर कोड से निकाला गया है, जिसे सीएसएस Color 4 के उदाहरणों से परखा गया है।