168 स्पेस

कलर स्पेस

से तक, से तक, से तक।
CSS, शेडर, WASM और LUT के लिए तैयार।

इस्तेमाल करें

रंग रूपांतरण के लिए JavaScript पैकेज। एक स्पेस का आकार 1.5 kB से कम है। एक स्पेस लें या सभी को इम्पोर्ट करके किसी भी दो स्पेस के बीच रूपांतरण करें। वही रूपांतरण पूरी इमेज पर WASM से और शेडर में GLSL या WGSL से चलते हैं। उन्हें LUT तालिकाओं या ICC प्रोफ़ाइल के रूप में भी सेव कर सकते हैं। एजेंट MCP सर्वर से इनका उपयोग कर सकते हैं।

संदर्भ मानों से जाँचहर कलर स्पेस की जाँच की गई है
दोनों दिशाओं मेंकिसी भी स्पेस से किसी भी स्पेस में
छोटाप्रति स्पेस 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 168 × 167 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"] } } }

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

रंग के लिए एक निर्देशांक प्रणाली: अक्ष, रेंज, और संख्याओं को मापने योग्य प्रकाश से जोड़ने वाला नियम। एक ही नारंगी 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() को सीधे सपोर्ट करता है।

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

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

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

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

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

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

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

कन्वर्शन बंद सूत्र हैं, लुकअप वाले अनुमान नहीं, और राउंड ट्रिप फ़्लोटिंग-पॉइंट शोर के भीतर लौट आते हैं। गिने-चुने अपवाद वहीं दर्ज हैं जहाँ वे आते हैं: 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 के रूप में मिलते हैं।

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

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