فضاء لوني Rec. 709 display

اعرض لونًا أو لوحة ألوان أو تدرجًا لونيًا أو صورة في كل فضاء لوني. من الشاشات إلى الطباعة، ومن اختيار الألوان إلى البحث العلمي، من 1860 إلى 2026.

الاستخدام

JavaScript

المكتبة كاملة: الفضاءات الـ 221 كلها، 71 كيلوبايت بعد ضغط gzip – من أي فضاء إلى أي فضاء آخر، في الاتجاهين.

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، 53 كيلوبايت بعد ضغط gzip، وأسرع من معالجة JS الدفعية بـ 1.4–4.8× في التحويلات الـ 26 المقيسة.

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 – ومن Python وRust وGo عبر wasmtime أو wasmer.

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 يعيد 0–255 كما في JavaScript: اقسم على 255 للون الـ fragment.

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

لوكلاء الذكاء الاصطناعي: يستدعون تحويلات مُتحقَّقًا منها بدل تخمينها.

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: نموذج واحد، وثلاثة فضاءات.

في الاستعمال الشائع يُسمّى كلاهما فضاءً لونيًا، كما في color-mix(in hsl, …) في CSS وفي هذا الفهرس. والنموذج الذي لا يحدد ألوانًا أساسية ونقطة بيضاء خاصة به يُعرَّف عبر فضاء آخر: فـ HSL وHSV هنا صيغتان محوَّلتان من sRGB، كما في CSS.

أي فضاء ينبغي أن أستخدم فعلًا؟

يتوقف ذلك على المهمة:

تخزين الصور ومشاركتها – sRGB، الافتراضي في الويب؛
تصميم لوحات الألوان والتدرجات – OKLCH، لأن الفروق المتساوية في قيمه تبدو متساوية للعين؛
العمليات الحسابية على الضوء (المزج، التمويه، الرسوم ثلاثية الأبعاد) – RGB بالضوء الخطي؛
تصوير الفيديو ومعالجة ألوانه – فضاء log الخاص بكاميرتك، يُسلَّم في Rec. 709 أو Rec. 2100؛
قياس مدى اختلاف لونين في المظهر – CIELAB أو DIN99o.

لترى كل الفضاءات مرتّبة حسب المهمة، جمّع الفهرس حسب الغرض.

ماذا أستخدم بدلًا من HSL؟

OKLCH. يحتفظ بالمعاملات الثلاثة نفسها – تدرج اللون والكروما والإضاءة – لكن إضاءته تعبّر فعلًا عن السطوع المُدرَك: في HSL يبعث الأصفر عند L=50 نحو 13 ضعف ضوء الأزرق عند L=50، فتساوي L لا يعني تساوي السطوع. أما في OKLCH فيعني ذلك. وتدعم CSS oklch() أصلًا.

كيف أحوّل hex إلى OKLCH؟

اكتب القيمة أو الصقها في حقل اللون أعلى الصفحة، مثل #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 أو أي منحنى log آخر من الكاميرا إلى Rec. 709؟

افتح فضاء log الخاص بكاميرتك، مثل S-Log3 أو LogC4 أو Apple Log. وفي قسم LUT منه اختر Rec. 709 وبرنامج التحرير الذي تستخدمه: DaVinci Resolve وPremiere Pro وFinal Cut Pro وOBS وffmpeg وغيرها. ويُنشئ متصفحك ملف .cube بنفسه. إنه تحويل تقني دون مواءمة للدرجات (tone mapping): تُقصّ الإضاءات العالية التي تتجاوز الأبيض المنتشر، أما الطابع اللوني الإبداعي (look) فإضافته متروكة لك.

ما معنى «خارج نطاق الألوان»؟

لون يستطيع فضاء ما وصفه ولا يستطيع فضاء آخر – أو شاشتك – عرضه. فالأخضر الزاهي في 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 حيثما تداخل الاثنان، ومنحنيات log للكاميرات مقابل تحويلات ACES الرسمية من الأكاديمية. ويسجّل formula-verification.md ما فُحص ومقابل ماذا، بما في ذلك مواضع قليلة كانت فيها الأوراق المنشورة نفسها خاطئة.

إن اختلفت الأرقام عن أرقام مكتبة أخرى، فقارن المجالات: هذه المكتبة تحافظ على المجالات المتعارف عليها لكل فضاء – RGB من 0 إلى 255، وإضاءة Lab من 0 إلى 100، وتدرج اللون من 0 إلى 360 – بينما تختزل مكتبات كثيرة كل شيء إلى 0–1. تعرض كل بطاقة مجالاتها؛ وفي الشيفرة هي space.oklch.range.

أيّ هذه الفضاءات يمكن كتابتها في CSS؟

تدعم CSS أصلًا rgb() وhsl() وhwb() وlab() وlch() وoklab() وoklch()، إضافة إلى color() لفضاءات Display P3 وAdobe RGB وProPhoto وsRGB الخطي وXYZ ‏(D65 وD50). أما rec2020 في CSS فغاما 2.4 خالصة، لا منحنى BT.2020 الذي يعتمده هذا الفهرس في Rec. 2020، فالأرقام نفسها تسمّي لونًا مختلفًا. يعرض تبويب css في كل ملف اللون الحالي بصيغة قابلة للنسخ؛ أما الفضاءات التي لا تدعمها CSS فتتوفر بدلًا من ذلك على هيئة ملفات تعريف ICC أو جداول LUT.

كيف تبدو الألوان للمصابين بعمى الألوان؟

افتح العرض واختر في الرؤية أحد الخيارات: عمى الأحمر (البروتانوبيا) أو عمى الأخضر (الديوترانوبيا) أو عمى الأزرق (التريتانوبيا). يُعاد رسم الفهرس كما تراه تلك العين، فتتحقق من أن ألوان اللوحة تبقى متمايزة. ويعاني نحو 1 من كل 12 رجلًا قصورًا في رؤية الألوان، بحسب إحصاء NEI.

أين Pantone وNCS وRAL؟

هذه منتجات مرخّصة: ألوانها معرّفة ببيانات يبيعها مالكوها، لا بصيغ منشورة، فلا توجد معادلات مفتوحة يمكن برمجتها، وإعادة توزيع جداولها غير قانونية. أما الأنظمة القريبة منها التي نُشرت صيغها فموجودة هنا: Munsell (بيانات إعادة ترقيمه لعام 1943 منشورة للعموم) وRAL Design (معرَّف مباشرة في CIELAB). وكل نظام نُشرت صيغه الرياضية في أي وقت مكانه هنا؛ اقترح نظامًا لم يُدرَج بعد.

البدائل

مقارنة بين مكتبات تحويل الألوان.

الأداة	الفضاءات	منحنيات log للكاميرات	luma–chroma	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