
من الويب إلى الطباعة، من منتقيات الألوان إلى البحث، 1860 إلى 2026. تدعم CSS وبرامج التظليل وWASM وجداول تحويل الألوان (LUT).
حزمة JavaScript واحدة. تعمل التحويلات نفسها على الصور الكاملة باستخدام WASM، وفي برامج التظليل GLSL وWGSL، وتُصدَّر كجداول LUT وملفات تعريف ICC.
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
أي زوج جدولَ LUT .cube – حمّله في Resolve أو Premiere أو Final Cut أو OBS أو ffmpeg. منحنيات log للكاميرات مُتحقَّق منها مقابل تحويلات ACES الرسمية من المصنّعين.
أي فضاء ملفَّ تعريف .icc بالإصدار 2 – مصفوفة ومنحنى درجات لفضاءات عمل RGB (Photoshop وإدارة الألوان في نظام التشغيل)، وشبكة CLUT لكل ما عداها (lcms وArgyllCMS وImageMagick).
// 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: نموذج واحد، وثلاثة فضاءات.
في الاستعمال الشائع يُسمّى كلاهما فضاءً لونيًا، كما في color-mix(in hsl, …) في CSS وفي هذا الفهرس. ويمكن ربط النموذج بفضاء لوني محدد ليكتسب مرجعًا: هنا يعتمد HSL وHSV على sRGB، كما في CSS.
يتوقف ذلك على المهمة:
لترى كل الفضاءات مرتّبة حسب المهمة، جمّع الفهرس حسب الغرض.
OKLCH. يحتفظ بأدوات التحكم الثلاث نفسها – تدرج اللون والكروما والإضاءة – لكن إضاءته جديرة بالثقة: في HSL يبعث الأصفر عند L=50 نحو 13 ضعف ضوء الأزرق عند L=50، فتساوي L لا يعني تساوي السطوع. أما في OKLCH فيعنيه. وتدعم CSS 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 في كل ملف المزيج نفسه عبر فضاءين جنبًا إلى جنب، لترى الفرق قبل أن تختار.
افتح فضاء log الخاص بكاميرتك، مثل S-Log3 أو LogC4 أو Apple Log. وفي قسم LUT التحويل منه اختر Rec. 709 وبرنامج التحرير الذي تستخدمه: DaVinci Resolve وPremiere Pro وFinal Cut Pro وOBS وffmpeg وغيرها. ويكتب متصفحك ملف .cube بنفسه. إنه تحويل تقني دون تعيين للنغمات (tone mapping): تُقصّ الإضاءات العالية التي تتجاوز الأبيض المنتشر، أما المظهر اللوني فإضافته متروكة لك.
لون يستطيع فضاء ما وصفه ولا يستطيع فضاء آخر – أو شاشتك – عرضه. فالأخضر الزاهي في 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 حيثما تداخل الاثنان، ومنحنيات log للكاميرات مقابل تحويلات 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()، إضافة إلى 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.
هذه منتجات مرخّصة: ألوانها معرّفة ببيانات يبيعها مالكوها، لا بصيغ منشورة، فلا رياضيات مفتوحة يمكن تنفيذها، وإعادة توزيع جداولها غير قانونية. أما الأقارب القريبون ذوو الرياضيات العامة فهنا: Munsell (إعادة ترقيمه عام 1943 سجلّ عام) وRAL Design (معرَّف مباشرة في CIELAB). وكل نظام نُشرت رياضياته يومًا فمكانه هنا؛ اقترح نظامًا لم يُدرَج بعد.
@software{Ivanov_color-space_2026,
author = {Ivanov, Dmitry},
license = {CC0-1.0},
month = oct,
title = {{color-space}},
url = {https://github.com/colorjs/color-space},
version = {3.3.0},
year = {2026}
}Ivanov, D. (2026). color-space (Version 3.3.0) [Computer software]. https://github.com/colorjs/color-space
إضاءة وزهاء لوني وتدرج لون على طريقة CAM16 من مسار قصير مبني على sUCS.
مؤشرات مظهر خفيفة (الإضاءة والزهاء اللوني وتدرج اللون) فوق sUCS؛ جديد وناشئ.
قطبيمنسوب إلى الشاشةSDRإدراكيD65
2024, Li & Luo
s تعني «simple» (بسيط): «Simple color appearance model (sCAM)»، عنوان ورقة Li وLuo عام 2024
// one space, tree-shaken (0.4-1.5 kB) — its own edge: import scam from 'color-space/scam.js' scam.sucs(51.7, 0, 320) // → [51.7237, 0.0059, -0.0049] // any-to-any, both ways — the wired hub: import space from 'color-space' space.scam.rgb(51.7, 0, 320) // → [128, 128, 128] space.rgb.scam(128, 128, 128) // → [51.7, 0, 320] // route: scam → sucs → xyz → rgb