205 स्पेस

कलर स्पेस

वेब से छपाई तक, कलर पिकर से शोध तक, 1860 से 2026 तक। CSS, शेडर, WASM और LUT के लिए तैयार।

इस्तेमाल

एक JavaScript पैकेज। वही रूपांतरण पूरी इमेज पर WASM से और GLSL व WGSL शेडर में चलते हैं, और LUT तथा ICC प्रोफ़ाइल के रूप में एक्सपोर्ट होते हैं।

संदर्भ मानों से जाँचहर कलर स्पेस की जाँच की गई है
दोनों दिशाओं मेंकिसी भी स्पेस से किसी भी स्पेस में
छोटाप्रति स्पेस 0.4–1.5 kB
पब्लिक डोमेनCC0

import space from 'color-space'

space.rgb.oklch(255, 128, 0)      // → [0.732, 0.186, 53]
space.oklch.rgb(0.65, 0.25, 180)  // any of 205 × 204 pairs

space.oklch.name    // 'oklch'
space.oklch.range   // [[0,1], [0,0.4], [0,360]]

// one space only – tree-shaken, 0.4-1.5 kB
import oklch from 'color-space/oklch.js'
oklch.rgb(0.65, 0.25, 180)

// values in the notations CSS already speaks – straight from the library
color: oklch(0.732 0.186 53);            // space.rgb.oklch(255, 128, 0)
color: color(display-p3 0.936 0.529 0.199);  // space.rgb.p3(255, 128, 0)
color: color(xyz-d65 0.49 0.367 0.045);      // space.rgb.xyz(…) / 100 – exact interchange

// spaces CSS lacks ship as ICC profiles or LUTs – see those tabs;
// every dossier's css tab writes the current color in copyable forms

// per-space metadata – sourced, ships as data.json
import data from 'color-space/data.json' with { type: 'json' }

const m = data.spaces.oklch
m.channels   // [{symbol, min, max, name}, …]
m.refs       // defining spec / paper links
m.year, m.by // 2020, 'Björn Ottosson'

// scalar or whole-buffer, zero-copy – a true WASM kernel
import space, { alloc } from 'color-space/wasm'

space.oklch.rgb(0.72, 0.16, 41)   // → [246, 125, 79]

const buf = alloc(n)              // n×3 Float64Array
space.rgb.oklch(buf)              // in place – 27 spaces

// every pair as a GLSL shader chunk
import { glsl } from 'color-space/gl'
import oklch from 'color-space/gl/oklch'

const src = glsl(oklch, 'rgb')
// → self-contained: vec3 oklch_rgb(vec3 c)
//   paste into any fragment shader, no uniforms

// an MCP server – convert · gamut · css · space · spaces · cube –
// so an agent calls verified conversions instead of guessing them
npx -y color-space mcp

// Claude Code
claude mcp add color-space -- npx -y color-space mcp
// VS Code
code --add-mcp '{"name":"color-space","command":"npx","args":["-y","color-space","mcp"]}'
// Claude Desktop · Cursor · .mcp.json
{ "mcpServers": { "color-space": { "command": "npx", "args": ["-y", "color-space", "mcp"] } } }

// एक Figma प्लगइन: चयन के फ़िल और स्ट्रोक, 205 में से किसी भी स्पेस में –
// हर चैनल के लिए एक तल और एक बार, फ़ाइल के गैमट तक कटे हुए; रंग को CSS के रूप में कॉपी करें
figma.com/community/plugin/1691970922817908383/color-space

git clone https://github.com/colorjs/color-space

// Figma डेस्कटॉप: राइट-क्लिक › Plugins › Development › Import plugin from manifest…
color-space/plugins/figma/manifest.json

// यह क्या पढ़ता, लिखता और रखता है – plugins/figma

कलर स्पेस क्या है?

रंग के लिए एक निर्देशांक प्रणाली: अक्ष, रेंज, और संख्याओं को मापने योग्य प्रकाश से जोड़ने वाला नियम। एक ही नारंगी rgb(255 128 0), oklch(0.732 0.186 53) और XYZ [49, 36.7, 4.5] है। पैलेट कुछ चुने हुए रंग है; स्पेस कोई भी रंग लिखने का तरीक़ा है।

कलर मॉडल या कलर स्पेस – फ़र्क़ क्या है?

कलर मॉडल तय करता है कि रंग को किन घटकों से व्यक्त करें: RGB में तीन प्राइमरी रंग, HSL में ह्यू, संतृप्ति और लाइटनेस, CMYK में चार स्याहियाँ। कलर स्पेस इन प्राइमरी रंगों, सफ़ेद बिंदु और एन्कोडिंग वक्र को निश्चित करता है, ताकि मानों का हर समूह एक मापने योग्य रंग बताए। इसलिए rgb(255 0 0), sRGB, Display P3 और Adobe RGB में अलग-अलग लाल रंग देता है: मॉडल एक है, स्पेस तीन हैं।

आम तौर पर दोनों को कलर स्पेस कहा जाता है। CSS के color-mix(in hsl, …) और इस कैटलॉग में भी यही नाम इस्तेमाल होता है। जिस मॉडल का अपना संदर्भ नहीं होता, उसे किसी मौजूदा स्पेस के आधार पर परिभाषित किया जा सकता है: यहाँ HSL और HSV, CSS की तरह sRGB पर आधारित हैं।

असल में कौन-सा स्पेस इस्तेमाल करूँ?

यह काम पर निर्भर है:

इमेज सहेजना और साझा करना – sRGB, वेब का डिफ़ॉल्ट;
पैलेट और ग्रेडिएंट डिज़ाइन करना – OKLCH, जहाँ बराबर कदम बराबर दिखते हैं;
प्रकाश पर गणित (ब्लेंडिंग, ब्लर, 3D) – लीनियर-लाइट RGB;
वीडियो शूट और ग्रेड करना – आपके कैमरे का लॉग स्पेस, डिलीवरी Rec. 709 या Rec. 2100 में;
दो रंग कितने अलग दिखते हैं, यह मापना – CIELAB या DIN99o।

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

HSL की जगह क्या इस्तेमाल करें?

OKLCH। इसमें वही तीन नियंत्रण हैं – ह्यू, क्रोमा, लाइटनेस – पर इसकी लाइटनेस भरोसेमंद है: HSL में L=50 पर पीला, L=50 पर नीले से लगभग 13 गुना प्रकाश देता है, यानी बराबर L का मतलब बराबर चमक नहीं। OKLCH में यही मतलब होता है। CSS oklch() को सीधे सपोर्ट करता है।

hex को OKLCH में कैसे कन्वर्ट करें?

hex मान ऊपर के कलर फ़ील्ड में टाइप या पेस्ट करें, जैसे #ff8000। पेज का हर स्पेस वह रंग एक साथ दिखाता है; OKLCH में वह 0.732, 0.186, 53 है, जिसे CSS oklch(0.732 0.186 53) लिखता है। हर विवरण के css टैब में कॉपी करने लायक़ रूप मिलता है, और कोड में यह space.rgb.oklch(255, 128, 0) है।

मेरे ग्रेडिएंट बीच में मटमैले क्यों हो जाते हैं?

क्योंकि वे गामा-एन्कोडेड sRGB में गणना किए जाते हैं, जहाँ दो रंगों की संख्याओं का औसत उनके प्रकाश को सचमुच मिलाने से ज़्यादा गहरा और फीका प्रकाश देता है। OKLab में इंटरपोलेट करने से यह नहीं होता; CSS में इसे linear-gradient(in oklab, red, blue) लिखते हैं। हर विवरण की interpolate पंक्ति वही मिश्रण दो स्पेस में अगल-बगल बनाती है, ताकि चुनने से पहले फ़र्क़ दिख जाए।

S-Log3 या किसी दूसरे कैमरा लॉग को Rec. 709 में कैसे कन्वर्ट करें?

अपने कैमरे का लॉग स्पेस खोलें, जैसे S-Log3, LogC4 या Apple Log। उसके कन्वर्शन LUT ब्लॉक में Rec. 709 और अपना एडिटर चुनें: DaVinci Resolve, Premiere Pro, Final Cut Pro, OBS, ffmpeg और अन्य। .cube फ़ाइल आपका ब्राउज़र ही बनाता है। यह टोन मैपिंग के बिना एक तकनीकी कन्वर्शन है: डिफ़्यूज़ व्हाइट से ऊपर की हाइलाइट्स क्लिप हो जाती हैं, और लुक आपको ख़ुद जोड़ना होगा।

“गैमट से बाहर” का क्या मतलब है?

ऐसा रंग जिसे एक स्पेस बता सकता है पर दूसरा – या आपकी स्क्रीन – दिखा नहीं सकती। Display P3 का चटक हरा sRGB में नहीं होता: उसे कन्वर्ट करें, तो संख्याएँ मान्य रेंज से बाहर चली जाती हैं। एटलस इसे दिखाई देता रखता है: मौजूदा रंग के पास वाली पिल उस सबसे छोटे मानक गैमट का नाम बताती है जिसमें वह समाता है, और रेंज से बाहर के हिस्से चेकरबोर्ड पर धुंधले दिखते हैं।

छपाई स्क्रीन से फीकी क्यों दिखती है?

स्क्रीन प्रकाश छोड़ती है; काग़ज़ वह लौटाता है जो उसकी स्याहियाँ नहीं सोखतीं। काग़ज़ पर स्याही कम चटक रंगों तक पहुँचती है – संतृप्त RGB नीले, हरे और लाल उसके बाहर रह जाते हैं – इसलिए वे फीके छपते हैं। प्रीप्रेस प्रेस और काग़ज़ के लिए बने ICC प्रोफ़ाइल से कन्वर्ट करता है, जैसे यूरोपीय कोटेड काग़ज़ के लिए FOGRA39 या अमेरिका में GRACoL। इस कैटलॉग का CMYK वही सादा सूत्र है जिसे CSS बिना प्रोफ़ाइल के device-cmyk() के लिए इस्तेमाल करता है – संख्याओं के लिए सही, छपाई का प्रूफ़ नहीं।

फ़ोटो किस कलर स्पेस में एक्सपोर्ट करें?

वेब और शेयर करने के लिए sRGB: जब फ़ाइल में कोई प्रोफ़ाइल न हो, तो ब्राउज़र और फ़ोन यही मानकर चलते हैं। Display P3 Apple और कई Android स्क्रीन पर चटक दृश्य का ज़्यादा हिस्सा बचाए रखता है, बशर्ते प्रोफ़ाइल फ़ाइल में एम्बेड रहे। प्रिंट लैब माँगे, तो Adobe RGB भेजें। ProPhoto RGB को 16-बिट एडिटिंग के लिए रखें: उसका गैमट इतना चौड़ा है कि 8-बिट फ़ाइलों में बैंडिंग आ जाती है।

क्या कन्वर्शन सटीक हैं? क्या राउंड ट्रिप में डेटा खोता है?

कन्वर्शन बंद सूत्र हैं, लुकअप वाले अनुमान नहीं, और राउंड ट्रिप फ़्लोटिंग-पॉइंट शोर के भीतर लौट आते हैं। गिने-चुने अपवाद वहीं दर्ज हैं जहाँ वे आते हैं: OSA-UCS का कोई बंद व्युत्क्रम नहीं है, Munsell जैसे एटलस सिस्टम प्रकाशित ग्रेड के बीच इंटरपोलेट करते हैं, और rgb आउटपुट sRGB गैमट में क्लैम्प होता है – उसके बाहर के मान चाहिए हों तो XYZ या लीनियर RGB से होकर जाएँ।

इनकी जाँच भी हुई है: हर स्पेस उस पेपर या स्पेसिफ़िकेशन से जुड़ा है जिसे वह लागू करता है, जहाँ भी दोनों मिलते हैं वहाँ मान colorjs.io से परखे गए हैं, और कैमरा लॉग Academy के आधिकारिक ACES ट्रांसफ़ॉर्म से। formula-verification.md में दर्ज है कि किसे किससे जाँचा गया – उन कुछ जगहों समेत जहाँ ख़ुद प्रकाशित पेपरों में त्रुटियाँ थीं।

अगर संख्याएँ किसी दूसरी लाइब्रेरी से अलग आएँ, तो रेंज मिलाएँ: यह लाइब्रेरी हर स्पेस की पारंपरिक रेंज रखती है – RGB 0–255, Lab लाइटनेस 0–100, ह्यू 0–360 – जबकि कई लाइब्रेरी सब कुछ 0–1 में समेट देती हैं। हर कार्ड अपनी रेंज दिखाता है; कोड में वे space.oklch.range हैं।

इनमें से कौन-से CSS में लिखे जा सकते हैं?

सीधे rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), और साथ में Display P3, Adobe RGB, ProPhoto, लीनियर sRGB और XYZ (D65 और D50) के लिए color()। CSS का rec2020 शुद्ध 2.4 गामा है, इस कैटलॉग के Rec. 2020 वाला BT.2020 कर्व नहीं – वही संख्याएँ अलग रंग बताएँगी। हर विवरण का css टैब मौजूदा रंग को कॉपी करने लायक़ रूप में लिखता है; जो स्पेस CSS में नहीं हैं, वे ICC प्रोफ़ाइल या LUT के रूप में मिलते हैं।

कलर ब्लाइंड लोगों को रंग कैसे दिखते हैं?

दृश्य खोलें और दृष्टि में से एक चुनें: लाल रंग का अंधापन (प्रोटैनोपिया), हरे रंग का अंधापन (ड्यूटेरैनोपिया) या नीले रंग का अंधापन (ट्राइटैनोपिया)। कैटलॉग वैसा दोबारा बनता है जैसा वह आँख देखती है, ताकि आप जाँच सकें कि पैलेट के रंग एक-दूसरे से अलग पहचाने जाते हैं। NEI के आँकड़ों के मुताबिक़, लगभग 12 में से 1 पुरुष में रंग दृष्टि की कमी होती है।

Pantone, NCS, RAL कहाँ हैं?

ये लाइसेंस वाले उत्पाद हैं: इनके रंग उस डेटा से तय होते हैं जिसे मालिक बेचते हैं, प्रकाशित सूत्रों से नहीं – इसलिए लागू करने को कोई खुला गणित नहीं है, और उनकी तालिकाएँ दोबारा बाँटना क़ानूनी नहीं होगा। जिन क़रीबी सिस्टमों का गणित सार्वजनिक है, वे यहाँ हैं: Munsell (इसका 1943 का रीनोटेशन सार्वजनिक रिकॉर्ड है) और RAL Design (सीधे CIELAB में परिभाषित)। जिस भी सिस्टम का गणित कभी प्रकाशित हुआ, वह यहाँ आता है; कोई छूटा हो तो सुझाएँ।