रंग स्थान CIECAM16

किसी रंग, पैलेट, ग्रेडिएंट या इमेज को हर रंग स्थान में देखें। स्क्रीन से छपाई तक, रंग चुनने से शोध तक, 1860 से 2026 तक।

इस्तेमाल

JavaScript

पूरी लाइब्रेरी: 221 रंग स्थान, gzip के बाद 71 kB – हर रंग स्थान से हर दूसरे रंग स्थान में, दोनों दिशाओं में।

npm install color-space

import space from 'color-space'

space.rgb.oklch(255, 128, 0)      // → [0.732, 0.186, 53]
space.oklch.rgb(0.65, 0.1, 180)   // → [56.14, 162.97, 145.41]
space.oklch.range                 // [[0,1], [0,0.4], [0,360]]

या सिर्फ़ एक रंग स्थान – बंडल में और कुछ नहीं जाता।

import oklch from 'color-space/oklch.js'

oklch.rgb(0.65, 0.1, 180)   // → [56.14, 162.97, 145.41]

टाइप्ड: TypeScript डिक्लेरेशन पैकेज के साथ आते हैं, पूरी लाइब्रेरी के लिए भी और हर रंग स्थान के लिए अलग से भी।

WebAssembly

पूरी इमेज और लंबे बफ़र के लिए: 54 रंग स्थान, gzip के बाद 53 kB, मापे गए 26 रूपांतरण पर JS बैच से 1.4–4.8× तेज़।

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

यह मॉड्यूल कुछ भी इम्पोर्ट नहीं करता, इसलिए जहाँ भी WebAssembly चलता है वहाँ चलता है: ब्राउज़र, Node, Deno, Bun – और wasmtime या wasmer के ज़रिए Python, Rust या Go।

import struct
from wasmtime import Store, Module, Instance   # pip install wasmtime

store = Store()   # color-space.wasm: the npm package's dist/
cs = Instance(store, Module.from_file(store.engine, 'color-space.wasm'), []).exports(store)

at = cs['alloc'](store, 1.0) & 0xFFFFFFFF   # the buffer: n×3 float64 in the kernel's memory
cs['memory'].write(store, struct.pack('3d', 255, 128, 0), at)
cs['rgb_lrgb_n'](store, 1.0)                # in place, edge by edge: rgb → linear rgb → oklab
cs['lrgb_oklab_n'](store, 1.0)
struct.unpack('3d', cs['memory'].read(store, at, at + 24))   # (0.732, 0.112, 0.148)

jz से कम्पाइल किया हुआ

रंग स्थान rgb, lrgb, xyz, xyz-d50, xyy, lms, p3, p3-linear, rec2020, rec2020-linear, a98rgb, a98rgb-linear, prophoto, prophoto-linear, rec709, hsl, hsv, hwb, oklab, oklrab, oklch, oklrch, lab, lchab, lab-d65, lch-d65, din99o-lab, din99o-lch, luv, lchuv, hsluv, hpluv, cam16, hct, ycbcr-bt709, ycbcr-bt2020, jzazbz, jzczhz, ictcp, ictcp-hlg, ipt, din99d, acescg, acescct, acescc, awg3, logc3, logc4, slog3, vlog, log3g10, clog2, ryb, munsell

शेडर

सभी 221 रंग स्थान शेडर फ़ंक्शन के रूप में। rgb में रूपांतरण JavaScript की तरह 0–255 लौटाता है: फ़्रैगमेंट रंग के लिए 255 से भाग दें।

WebGL और OpenGL: GLSL।

import { glsl } from 'color-space/gl'
import oklch from 'color-space/gl/oklch'

const frag = `#version 300 es
precision highp float;
${glsl(oklch, 'rgb')}
out vec4 color;
void main() { color = vec4(oklch_rgb(vec3(0.7, 0.15, gl_FragCoord.x)) / 255.0, 1.0); }`

WebGPU: WGSL।

import { wgsl } from 'color-space/gl'

const code = wgsl(oklch, 'rgb') + `
@fragment fn main(@builtin(position) p: vec4f) -> @location(0) vec4f {
  return vec4f(oklch_rgb(vec3f(0.7, 0.15, p.x)) / 255.0, 1.0);
}`

DirectX, Unity और Unreal: HLSL। Metal: MSL। दोनों को naga WGSL से लिखता है, जो एक वैकल्पिक डिपेंडेंसी है।

import { hlsl } from 'color-space/gl/hlsl'   // npm i naga-wasm
import { msl } from 'color-space/gl/msl'

await hlsl('oklch', 'rgb')   // float3 oklch_rgb(float3)
await msl('oklch', 'rgb')    // metal::float3 oklch_rgb(metal::float3)

MCP सर्वर

AI एजेंटों के लिए: वे अनुमान लगाने के बजाय सत्यापित रूपांतरण कॉल करते हैं।

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"] } } }

संदर्भ मानों से प्रमाणितहर रंग स्थान की जाँच की गई है
दोतरफ़ा रूपांतरणकिसी भी रंग स्थान से किसी भी रंग स्थान में
कॉम्पैक्टप्रति रंग स्थान लगभग 1 kB
पब्लिक डोमेनCC0

रंग स्थान क्या है?

रंग के लिए निर्देशांक प्रणाली: अक्ष, रेंज और संख्याओं को मापने योग्य प्रकाश से जोड़ने वाला नियम। मानव दृष्टि ट्राइक्रोमैटिक है: आँख में तीन प्रकार की कोन कोशिकाएँ (S, M, L) होती हैं, इसलिए आँख को दिखने वाले किसी भी रंग को बताने के लिए कम से कम तीन निर्देशांक चाहिए। वही नारंगी रंग 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 में बराबर L का मतलब बराबर चमक ही है। 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 में नहीं होता: उसे कन्वर्ट करें, तो संख्याएँ मान्य रेंज से बाहर चली जाती हैं। एटलस इसे छिपाता नहीं: मौजूदा रंग के पास ⚠ का निशान बताता है कि वह आपकी चुनी “सीमा” से बाहर है, किसी तल या पट्टी पर Alt दबाए रखने से पता चलता है कि वहाँ के रंग के लिए कौन-सा बड़ा गैमट चाहिए (P3, Rec. 2020), और रेंज से बाहर के हिस्से चेकरबोर्ड पर धुंधले दिखते हैं।

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

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

फ़ोटो किस रंग स्थान में एक्सपोर्ट करें?

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

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

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

इनकी जाँच भी हुई है: हर रंग स्थान के साथ उस पेपर या स्पेसिफ़िकेशन का लिंक है, जिसे वह लागू करता है; जहाँ भी दोनों लाइब्रेरी में एक ही रंग स्थान है, वहाँ मान 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 में परिभाषित)। जिस भी सिस्टम का गणित कभी प्रकाशित हुआ, वह यहाँ आता है; कोई छूटा हो तो सुझाएँ।

विकल्प

रंग-रूपांतरण लाइब्रेरियों की तुलना।

टूल	रंग स्थान	कैमरा लॉग	लूमा–क्रोमा	sRGB	टूलकिट	आकार	गति	टारगेट
color-space	205	31	16	0–255	`parse` `mix` `ΔE` `contrast` `CVD`	62 kB		JS, WASM, GL, LUT, ICC, OCIO, MCP, Figma, VS Code, CLI, web
culori	30	–	1	0–1	`parse` `mix` `gamut` `ΔE` `contrast` `CVD`	23 kB		JS
colorjs.io	51	–	–	0–1	`parse` `mix` `gamut` `ΔE` `contrast`	34 kB		JS, web
chroma-js	11	–	–	0–255	`parse` `mix` `ΔE` `contrast` `palettes`	17 kB		JS
@texel/color	16	–	–	0–1	`parse` `gamut` `ΔE`	9 kB		JS
colour-science	128	24	6	0–1	`ΔE` `CVD`	–	–	Python, LUT
ColorAide	77	–	–	0–1	`parse` `mix` `gamut` `ΔE` `contrast` `CVD` `palettes`	–	–	Python
colorspace (R)	9	–	–	0–1	`mix` `contrast` `CVD` `palettes`	–	–	R, web
OpenColorIO	57	11	–	0–1	`gamut`	–	–	C++, Python, GL, LUT, ICC
Bruce Lindbloom	22	–	–	0–1, 0–255	`ΔE`	–	–	web
oklch.com	9	–	–	0–255	`parse` `gamut`	–	–	web