205 فضاءً

الفضاءات اللونية

جديد: إضافة لـ Figmaجديد

من الويب إلى الطباعة، من منتقيات الألوان إلى البحث، 1860 إلى 2026. تدعم CSS وبرامج التظليل وWASM وجداول تحويل الألوان (LUT).

الاستخدام

حزمة JavaScript واحدة. تعمل التحويلات نفسها على الصور الكاملة باستخدام WASM، وفي برامج التظليل GLSL وWGSL، وتُصدَّر كجداول LUT وملفات تعريف ICC.

  • اختبارات مرجعيةاختبارات لكل فضاء لوني
  • في الاتجاهينمن أي فضاء إلى أي فضاء آخر
  • صغير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 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)
ما الفضاء اللوني؟

نظام إحداثيات للون: محاور ومجالات وقاعدة تربط الأرقام بضوء قابل للقياس. البرتقالي نفسه هو 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): تُقصّ الإضاءات العالية التي تتجاوز الأبيض المنتشر، أما المظهر اللوني فإضافته متروكة لك.

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

لون يستطيع فضاء ما وصفه ولا يستطيع فضاء آخر – أو شاشتك – عرضه. فالأخضر الزاهي في 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 كتابته؟

تدعم 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). وكل نظام نُشرت رياضياته يومًا فمكانه هنا؛ اقترح نظامًا لم يُدرَج بعد.

نُسخ