RGB لا يكفي: تدوينات الألوان HSL وCMYK وOKLCH

في المنشور السابق، كيف تصنع الحاسوب الألوان: RGB وHEX والأعداد الثنائية، رأينا أن اللون ما هو إلا ثلاثة أرقام — أحمر وأخضر وأزرق، كل منها بين 0 و255. الشاشات تعمل بهذه الأرقام بكفاءة تامة. لكن حين يبدأ الإنسان في التعامل مع اللون، يصبح RGB محرجاً سريعاً.

RGB مريح لكنه غير حدسي

«أحمر أكثر إضاءةً بقليل.» كيف تصنع ذلك بـ RGB؟ عليك رفع القنوات الثلاث معاً بقدر صغير. «أريد تقليل الإشباع فقط» — بمجرد النظر في RGB لن تعرف أي قناة تُخفّض. «اطبع هذا اللون على الورق بدقة» — هذا مستحيل بـ RGB أصلاً.

ظهرت أنظمة الألوان الأخرى لحل هذه المشكلات.

HSL — طريقة تفكير الإنسان

يُقسّم HSL اللون إلى درجة اللون · الإشباع · الإضاءة. hsl(14, 100%, 60%) هو اللون ذاته تماماً كـ #FF5733، لكنه يُوضّح ما أتى من أين.

إذا كانت RGB لغة الحاسوب، فإن HSL لغة المصمم. يمكن التعامل مع اللون ذاته من منظور ماذا تريد تغييره.

Hue — درجة اللون دائرة 360°

درجة اللون تدور دورةً كاملة كالساعة. من 0° إلى 360°. و0° و360° لون أحمر واحد.

Saturation — الإشباع عمق اللون

حتى مع درجة اللون ذاتها، تخفيض الإشباع يجعل اللون يقترب تدريجياً من الرمادي.

Lightness — الإضاءة من الأسود إلى الأبيض

L عند 0% يعني أسود دائماً، وعند 100% أبيض دائماً. و50% هي الإضاءة «الطبيعية» للون.

الاستخدام الحقيقي لـ HSL — بناء لوحة الألوان

إبقاء درجة اللون (Hue) ثابتة وتغيير L فقط يُولّد مجموعة ألوان متناسقة طبيعياً. للقيام بالأمر ذاته بـ RGB عليك حساب 9 خانات يدوياً، أما HSL فيكفي تغيير L من 12% إلى 92% تدريجياً.

كلتا اللوحتين يمكن إنشاؤهما بسطر واحد.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... يكفي تغيير L بمقدار 10 في كل خطوة */
}

هذا هو المكان الذي يتألق فيه HSL عند بناء نظام التصميم.

CMYK — لغة الحبر

لتلوين الورق لا الشاشة، تحتاج نظاماً مختلفاً تماماً. CMYK هو نسب الأحبار الأربعة المستخدمة في الطباعة.

لماذا الأسود «K» لا «B»؟ لأن B ستُربك مع Blue. وجاء من مصطلح الطباعة «Key plate» — لوح الأساس الذي تُحاذى عليه الأحبار الأخرى.

الضوء يزداد سطوعاً بالإضافة، والحبر يزداد قتامةً بالإضافة

أبرز فرق بين RGB وCMYK هو طريقة الخلط.

حبر الأحمر يبدو أحمر لأنه يمتص الضوء الآخر ويعكس الأحمر فحسب. الحبر يعمل على طرح الضوء. لذلك كلما خلطتَ أحباراً أكثر ازداد اللون قتامةً. نظرياً خلط CMY الثلاثة يُنتج أسوداً، لكن عملياً يُنتج بنياً كدراً. لذلك يُحتفظ بحبر أسود حقيقي (K) منفصلاً.

أين يُستخدم CMYK

إذا كنتَ تعمل في تصميم الشاشات فلن تحتاج CMYK كثيراً. يظهر فقط عند الطباعة على الورق.

• عند تسليم ملف للمطبعة — بطاقات العمل، الملصقات، الكتب، العبوات. تُحوّل المطبعة ملفات RGB إلى CMYK.
• عند العمل للطباعة في Photoshop / Illustrator — تُعيّن وضع الألوان على CMYK من البداية.
• دليل العلامة التجارية — يتضمن قيمة HEX للشاشة وقيمة CMYK للطباعة معاً. لأن اللون ذاته يجب أن يبدو متقارباً في الوسيلتين.

لماذا يختلف لون الشاشة عن لون الطباعة — نطاق الألوان Gamut

نطاق الألوان الذي تستطيع الشاشة تمثيله (RGB gamut) يختلف عما يستطيع الحبر تمثيله (CMYK gamut). الوردي الفلوري الزاهي على الشاشة لن يظهر بنفس الشكل عند الطباعة — إذ يستحيل إنتاجه بالحبر.

لذلك يختار مصممو الطباعة قبل البدء ألواناً ضمن نطاق CMYK فقط. طباعة تصميم أُنجز بـ RGB مباشرةً كثيراً ما تُفضي إلى ألوان باهتة.

هكذا تُكتب قيم CMYK

تُحدد نسبة كل حبر بالمئة. 0% يعني بدون حبر، و100% يعني ملء كامل.

الأسود العميق باستخدام K 100% فقط يُعطي أسوداً كدراً يقترب من الرمادي. لذلك تُضيف المطابع CMY معاً لصنع أسود أعمق.

OKLCH — إحداثيات الإنسان

نموذج الألوان الذي برز بجدية في عشرينيات القرن الحادي والعشرين. الكلمة المفتاحية واحدة — «طبيعي لعين الإنسان».

إحداثياته الثلاثة تبدو مشابهة لـ HSL.

• L — Lightness (الإضاءة، 0~1)
• C — Chroma (الإشباع، 0~نحو 0.4)
• H — Hue (درجة اللون، 0~360°)

لكن ثمة مشكلة خفية في HSL: حتى مع L = 50% ذاتها، يختلف الإحساس الفعلي بالإضاءة اختلافاً كبيراً من لون إلى آخر. لنقارن مباشرة.

باختصار — RGB وHSL إحداثيات الآلة. OKLCH إحداثيات الإنسان.

L · C · H، دور كل منهم

لنرَ ما يحدث إذا غيّرنا إحداثياً واحداً فقط للون ذاته.

أين يُستخدم

• لوحات بإضاءة موحّدة — عندما تريد ضبط 8 ألوان فئات بإضاءة متساوية
• تحويل تلقائي بين الوضع الداكن والفاتح — قلب قيمة L يكفي للحصول على قالب داكن طبيعي
• إمكانية الوصول — يمكن التنبؤ بدقة بفارق الإضاءة بين النص والخلفية
• التدرجات — تدفق طبيعي بدون شريط رمادي في المنتصف

مُعتمَد رسمياً منذ CSS Color Level 4، ويمكن استخدامه مباشرةً في المتصفحات الحديثة.

.btn { background: oklch(67% 0.18 30); }       /* برتقالي */
.btn:hover { background: oklch(60% 0.18 30); } /* خفض L بمقدار 7 فقط ← يظلم بالقدر ذاته بالضبط */

ماذا تستخدم ومتى؟

RGB/HEX يكفيان لمعظم الأعمال الرقمية. HSL مفيد عند بناء لوحات الألوان، وOKLCH أداة قيّمة جداً في تصميم الوضع الداكن والفاتح.

التعامل مع الألوان في fns

بمجرد معرفة أن اللون مجرد رقم، الخطوة التالية هي وضع ألوانك المفضلة في متناول يدك. تجمع fns سير العمل — سحب اللون وحفظه واستخدامه — خلف مفتاح واحد.

Eyedropper لسحب اللون من أي مكان في الشاشة — ⌘+Shift+K

Eyedropper أداة تلتقط لون أي بكسل في الشاشة بدقة تامة. مثل إخراج منتقي الألوان المقيّد بـ Figma/Photoshop إلى نطاق النظام بأكمله.

اضغط ⌘+Shift+K فيظهر Eyedropper الخاص بـ fns من أي مكان في الشاشة. بكسل واحد في ملف التصميم، منطقة محددة في صورة، لون خلفية تطبيق آخر — حرّك الفأرة إليه وانقر فيلتقط اللون بدقة.

• يُحفظ تلقائياً في الحافظة عند كل نقرة. لا حاجة لـ«نسخ» منفصل.
• يمكن اختيار الصيغة التي ستُحفظ بها الحافظة: RGB / HEX / HSL / CMYK / OKLCH من واجهة Eyedropper.
• يُعرض معاينة بصرية للون الملتقط مع أقرب ألوان النظام.

Eyedropper ← حفظ تلقائي في الحافظة ← استرجاع من منتقي الحافظة — تدفق لا ينقطع. لا حاجة لفتح برنامج منفصل كـ Digital Color Meter في Mac، ولا لضغط اختصار النسخ في كل مرة.

الحافظة تتعرف على الألوان تلقائياً

سجل الحافظة في fns يكتشف تلقائياً إذا كان النص المنسوخ كوداً للون، بصرف النظر عن الصيغة.

عند استرجاع لون محفوظ من السجل، يصعب تذكر اللون من النص وحده. تعرض fns شريحة لون صغيرة بجانب كل عنصر لتعرف اللون بنظرة واحدة.

عرض الألوان وحدها

بضغطة مفتاح واحد يمكن تصفية سجل الحافظة وعرض أكواد الألوان فقط. أثناء العمل في التصميم حين تريد رؤية الألوان الأخيرة فحسب، دون البحث بين النصوص والروابط والكودات.

• في المنتقي ذاته، كلمة مفتاح كـ color: ← تظهر عناصر الألوان فقط
• البحث باسم اللون — كتابة «blue» أو «red» يُصفّي الألوان من تلك الفئة فحسب
• ترتيب بصري يجمع الألوان المتشابهة معاً

تحويل لون إلى صيغة أخرى

يمكن تحويل اللون ذاته إلى ترميز آخر واستخدامه. عند نسخ #FF5733 من Figma وإرادة لصقه في CSS بصيغة rgb(...), اختر العنصر في منتقي حافظة fns واضغط اختصاراً واحداً فيتحول تلقائياً.

لن تحتاج فتح محوّل في كل مرة تتنقل بين Figma (HSB) وCSS (HSL/HEX/OKLCH).

توسيع النص والتجميع

ألوان العلامة التجارية المستخدمة كثيراً تُسجَّل كاختصارات نصية.

يعمل الاختصار ذاته في CSS وحقل إدخال الألوان في Figma ورسائل Slack ومحرر الكود. يختفي الوقت الضائع في البحث عن ألوان دليل العلامة التجارية ونسخها في كل مرة.

جرّب تقليل الوقت الذي كنتَ تقضيه في فتح المحوّل ونقل كود اللون إلى صيغة أخرى — مع fns.

هل تساءلتَ من أين جاءت هذه الأرقام أصلاً — أسس القنوات الثلاث في RGB والثنائي وترميز HEX؟ ابدأ بـ كيف تصنع الحاسوب الألوان: RGB وHEX والأعداد الثنائية.