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

في الاستعمال الشائع يُسمّى كلاهما فضاءً لونيًا، كما في 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() أصلًا.

لماذا تصبح تدرجاتي اللونية موحلة في منتصفها؟

لأنها تُحسب في sRGB المرمَّز بغاما، حيث ينتج حساب متوسط أرقام لونين ضوءًا أغمق وأبهت مما ينتجه مزج ضوئهما فعلًا. الاستيفاء في OKLab يتجنّب ذلك. ويرسم صف interpolate في كل ملف المزيج نفسه عبر فضاءين جنبًا إلى جنب، لترى الفرق قبل أن تختار.

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

لون يستطيع فضاء ما وصفه ولا يستطيع فضاء آخر – أو شاشتك – عرضه. فالأخضر الزاهي في Display P3 لا وجود له ببساطة في sRGB: حوّله تجد الأرقام خارج المجال الصالح. ويُبقي الأطلس هذا ظاهرًا: الشارة بجوار اللون الحالي تسمّي أضيق نطاق ألوان قياسي يحتويه، والامتدادات الخارجة عن المجال تظهر باهتة فوق رقعة شطرنج.

لماذا يبدو المطبوع أبهت من الشاشة؟

الشاشة تبعث الضوء؛ والورق يعكس ما لا تمتصه أحباره. الحبر على الورق يبلغ ألوانًا زاهية أقل – فالأزرق والأخضر والأحمر المشبعة في RGB تقع خارجه – لذا تُطبع أبهت. وتحوّل مرحلة ما قبل الطباعة الألوان عبر ملف تعريف ICC مُعَدّ للمطبعة والورق، مثل FOGRA39 للورق المطلي الأوروبي أو GRACoL في الولايات المتحدة. وCMYK في هذا الفهرس هو الصيغة البسيطة التي تستخدمها CSS لـ device-cmyk() دون ملف تعريف: صحيحة للأرقام، لا بروفة للمطبوع.

هل التحويلات دقيقة؟ وهل يضيع شيء من البيانات ذهابًا وإيابًا؟

التحويلات صيغ مغلقة لا تقريبات بجداول بحث، والتحويل ذهابًا وإيابًا يعود بالقيم ضمن هامش أخطاء الفاصلة العائمة. والاستثناءات القليلة موثّقة حيث تقع: ليس لـ 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 كتابته؟

تدعم 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.

أين Pantone وNCS وRAL؟

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