أداة اختيار الألوان

كلّ مصمّم ومطوّر يعرف صيغة #FF6B35. ستّ خانات سداسية، سهلة النسخ، تعمل في كلّ مكان. لكنّ التصميم الحديث في 2026 لم يعد يستطيع الاكتفاء بـ HEX، لأنّ HEX تخفي معلومات حيوية: كم اللون ساطع؟ كم هو مشبَع؟ هل يتباين كفايةً مع النصّ الأبيض لشاشة على iPhone في وضع الإضاءة الساطعة؟ HEX لا تقول.

الواقع: عند بناء نظام تصميم، أنت تحتاج صياغة اللون بطرق متعدّدة. HEX للتسليم النهائي للمطوّر، HSL لتعديل السطوع بدون تغيير الهوية، OKLCH لضمان التباين البصري الحقيقي بين تدرّجات لون. اختيار الصيغة الخاطئة في الموضع الخاطئ يُنتج ألواناً مُتنافرة تبدو «شبه صحيحة» لكنّها مُربكة.

HEX و RGB كلاهما يصفان اللون بنفس الطريقة: ثلاثة أرقام تمثّل شدّة الأحمر والأخضر والأزرق من 0 إلى 255. #FF6B35 هو نفسه rgb(255, 107, 53). الفارق فقط في التمثيل: HEX سداسي مضغوط، RGB عشري مقروء.

متى HEX: CSS الثابت، التصميم في Figma، نقل اللون بين المصمّم والمطوّر. مختصر، مألوف، يعمل في كلّ مكان.

متى RGB: عند الحاجة لشفّافية. rgba(255, 107, 53, 0.5) أوضح من #FF6B3580. أيضاً عند الحساب البرمجي (JavaScript canvas)، RGB أسهل في المعالجة.

القيد الكبير: HEX/RGB لا يخبرانك أيّ شيء عن «إحساس اللون». إن أردتَ تفتيح #FF6B35 بنسبة 20%، عليك تخمين الأرقام أو استخدام أداة. لا توجد عملية حسابية بديهية.

HSL (Hue, Saturation, Lightness) صيغة بُنيت للبشر، ليس للشاشات. hsl(16, 100%, 60%) تعني: درجة لون 16 (برتقالي)، تشبّع 100%، سطوع 60%. هذه الأرقام لها معنى مرئي مباشر.

القوّة الحقيقية: توليد نظام تدرّجات بسهولة. لو لونك الأساسي hsl(220, 80%, 50%)، تستطيع توليد سلّم كامل بتغيير قيمة السطوع فقط: 95% للخلفية الفاتحة، 80% لـ hover، 50% للأساسي، 30% للنصّ، 15% للحدود الداكنة. كلّها لها نفس «الهويّة».

المشكلة الخفية: HSL يكذب على عينك. اللون الأصفر بـ سطوع 50% يبدو أفتح بكثير من الأزرق بنفس السطوع. الأرقام متطابقة، الإحساس البصري مختلف تماماً. لذا عند بناء سلّم تدرّجات بـ HSL، تجد التدرّجات «غير منتظمة» — قفزة كبيرة بين 50% و 60% للأصفر، قفزة صغيرة بنفس الفرق للأزرق.

OKLCH هي صيغة الألوان التي أصبحت مدعومة في كلّ المتصفّحات الحديثة منذ 2023. تشبه HSL ظاهرياً: L = Lightness، C = Chroma (التشبّع)، H = Hue. الفارق الجوهري: OKLCH «مُدرَك بصرياً» (perceptually uniform). يعني: لون بسطوع 50% يبدو متساوي السطوع للعين سواء كان أصفر أم أزرق أم أحمر.

لماذا هذا مهمّ؟ عند بناء سلّم تدرّجات بـ OKLCH، التدرّجات تبدو منتظمة بصرياً. المسافة بين 50% و 60% تبدو نفسها للأصفر وللأزرق. هذا يعني أنّ نظام تصميمك سيكون أكثر اتّساقاً عبر كلّ الألوان.

الفائدة الثانية: OKLCH تستطيع التعبير عن ألوان خارج نطاق sRGB، أي الألوان المُشبَعة جدّاً المتاحة على شاشات P3 الحديثة (MacBook، iPhone، iPad Pro). HEX/RGB محصورة في sRGB.

المثال: oklch(70% 0.18 30) هو برتقالي حيوي. تفتيحه بـ 10% فقط هو تغيير الـ L: oklch(80% 0.18 30). بسيط، متوقّع.

CMYK (Cyan, Magenta, Yellow, Key/Black) صيغة للطباعة. هي تصف كم حبر سيُستخدم في الطباعة، ليس كم ضوء سيُعرَض على شاشة. لون CMYK على شاشة هو مجرّد تقريب — والمتصفّح يحوّله لـ RGB أوّلاً قبل العرض.

متى تحتاج CMYK: تسليم مواد للطباعة (بوسترات، بطاقات أعمال، تغليف منتجات). كلّ شيء غير ذلك → استخدم HEX أو OKLCH.

قواعد إمكانية الوصول WCAG 2.2 تتطلّب نسب تباين محدّدة بين النصّ وخلفيّته:

AA للنصّ العادي: 4.5:1 على الأقلّ. هذا الحدّ الأدنى لإطلاق منتج رقمي بثقة.

AA للنصّ الكبير: 3:1 (نصّ بحجم 18px غامق أو 24px عادي).

AAA: 7:1 للنصّ العادي. الحدّ الأعلى للوصول الممتاز. مطلوب في القطاع الحكومي وبعض المجالات الطبّية.

كثير من المصمّمين يختارون لوناً «يبدو جميلاً» ثمّ يكتشفون أنّه يفشل في WCAG عند الإطلاق. الحلّ: افحص التباين قبل اعتماد اللون. كلّ أداة اختيار ألوان حديثة تعرض نسبة التباين تلقائياً.

قاعدة بسيطة لنظام ألوان جيّد: لا تختر أكثر من 2-3 ألوان أساسية، وولِّد منها سلّماً كاملاً من 9-11 درجة. هذا ما يفعله Tailwind، shadcn/ui، Material Design، وكلّ نظام تصميم محترم.

التركيب القياسي: 50 (خلفية فاتحة جدّاً)، 100، 200، 300، 400، 500 (الأساسي)، 600، 700، 800، 900 (داكن جدّاً)، 950 (شبه أسود). كلّ درجة لها استخدام محدّد.

50-100: خلفيّات قسم، حالات hover خفيفة.

200-300: حدود، فواصل، خطوط شبكة.

400-500: أيقونات، أزرار ثانوية، روابط.

600-700: الأزرار الأساسية، النصوص المُلوّنة على خلفية فاتحة.

800-950: النصوص على خلفية فاتحة، الخلفيّات الداكنة في الوضع المظلم.

الوضع المظلم ليس قلب الألوان. هو نظام ألوان منفصل تماماً يحتاج تصميماً واعياً. الخطأ الشائع: تطبيق filter: invert() أو قلب آلي. النتيجة: صور مقلوبة، ألوان حدود قاسية، حسّ بصري سيّئ.

القاعدة: في الوضع المظلم، ابنِ سلّماً ألوان جديداً مرآة للأصلي. ما كان 50 يصبح 950، 100 يصبح 900... إلخ. لكن ليس قلباً رياضياً — قلباً «بصرياً». OKLCH تجعل هذا أسهل بكثير من HEX.

أيضاً: خفّض التشبّع في الوضع المظلم بنسبة 20-30%. اللون المُشبَع 100% على خلفية سوداء يُسبّب «اهتزاز» بصري للعين.

التوصية العملية لفِرَق المنتج الحديثة:

1. اختر الألوان الأساسية بـ OKLCH مباشرةً. ابدأ بـ L بين 50-65 و C بين 0.1-0.2.

2. ولِّد سلّم 11 درجة بتغيير L فقط (الانتقال من 95 إلى 10).

3. صدّر السلّم بصيغة HEX لـ Figma + بصيغة OKLCH لـ CSS.

4. افحص التباين لكلّ زوج (نصّ + خلفية) متوقّع. خصوصاً 700 على 50، 50 على 900، 600 على أبيض.

5. ابنِ نسخة وضع مظلم بنفس التشبّع تقريباً مع L مقلوب.

6. وثّق متى يُستخدم كلّ لون. ليس «الأخضر للنجاح» فقط، بل «green-500 للأيقونة، green-50 للخلفية، green-700 للنصّ على خلفية فاتحة».

HEX: النقل والتسليم. استخدمها في Figma و CSS.

RGB/RGBA: عند الشفّافية أو الحساب البرمجي.

HSL: تجنّبها للسلالم. صياغة تبدو منطقية لكنّها مُخادعة بصرياً.

OKLCH: المعيار للأنظمة الحديثة. لكلّ تصميم جديد في 2026، ابدأ من هنا.

CMYK: للطباعة فقط. لا تظهر على الويب.

التباين WCAG ليس خياراً تجميلياً، هو متطلّب قانوني في الاتحاد الأوروبي والولايات المتّحدة والسعودية (بحسب نظام الوصول الرقمي للأشخاص ذوي الإعاقة). افحصه قبل الإطلاق، ليس بعده.