RGB أم HEX أم HSL أم CMYK: أي صيغة ألوان تستخدم؟

صيغ الألوان تسبب لبسا أكثر مما تستحق. المصمم يرسل #2563eb. المطور يكتب rgb(37, 99, 235). نظام التصميم يستخدم hsl(221 83% 53%). والمطبعة تطلب CMYK. الكل يتكلم عن لون واحد تقريبا، لكن كل شخص يستخدم لغة مختلفة.

RGB و HEX و HSL و CMYK ليست صيغ متنافسة بمعنى أن واحدة تلغي الأخرى. هي طرق مختلفة لوصف اللون حسب الوسط والعمل. RGB و HEX مناسبان للشاشات. HSL مريح لتعديل الألوان وبناء الثيمات. CMYK للطباعة. الاختيار الصحيح يعتمد على أين سيظهر اللون ومن سيعمل عليه.

لون واحد بأربع صيغ

خذ هذا الأزرق:

color: #2563eb;

يمكن كتابته RGB:

color: rgb(37, 99, 235);

أو HSL:

color: hsl(221 83% 53%);

وفي عالم الطباعة قد يتحول إلى CMYK تقريبي. اللون الظاهر قد يكون قريبا، لكن طريقة التفكير مختلفة. HEX مختصر. RGB يوضح قنوات الضوء. HSL يوضح hue و saturation و lightness. CMYK يصف الحبر.

RGB: لغة الشاشات

RGB يعني Red و Green و Blue. الشاشات تصنع اللون بمزج الضوء. في CSS تتراوح القيم غالبا من 0 إلى 255.

rgb(255, 0, 0)

هذا أحمر كامل. لا أخضر ولا أزرق.

استخدم RGB عندما تعمل مع الشاشة مباشرة: canvas، صور، pixels، JavaScript، توليد ألوان، أو قيم تحتاج قناة alpha واضحة. RGB سهل على الآلة، وكثير من APIs تعيده افتراضيا.

ميزة RGB أنه مباشر. الأسود rgb(0,0,0)، الأبيض rgb(255,255,255). القيم المتساوية تعطي درجات الرمادي. لكن تعديل اللون بالعين ليس ممتعا. إذا أردت نفس الأزرق لكن أفتح قليلا، أي قناة تغير؟ تحتاج تجربة أو أداة.

RGB مناسب للواجهات، الصور، canvas، الأدوات البرمجية، والتحويل بين الصيغ.

HEX: الاختصار الكلاسيكي للويب

HEX في الويب هو غالبا RGB مكتوب بالنظام الست عشري. اللون #2563eb ينقسم إلى:

25 63 eb

وهي تعني red و green و blue. بالdecimal تصبح:

37 99 235

إذن #2563eb و rgb(37, 99, 235) يصفان نفس اللون على الشاشة.

استخدم HEX عندما تريد قيمة مختصرة ومألوفة. ملفات CSS، design tokens، وثائق الهوية، لوحات الألوان، وتسليم المصمم للمطور كلها تستخدم HEX كثيرا.

مثال:

--blue-600: #2563eb;
--green-600: #16a34a;
--red-600: #dc2626;

العيب أن HEX ليس سهل التعديل بالعين. إذا أردت جعل اللون أقل تشبعا أو أفتح بدرجة، فلن تفعل ذلك ذهنيا بسهولة. ستستخدم color picker أو converter.

HEX مناسب للألوان الثابتة، العلامة التجارية، التوثيق، CSS variables، ولوحات الألوان التي لا تحتاج توليد مشتقات كثيرة.

HSL: الصيغة المريحة للتعديل

HSL يعني Hue و Saturation و Lightness. هذه الصيغة أقرب لطريقة تفكير الإنسان عند تعديل اللون. Hue هو موقع اللون على دائرة الألوان، saturation قوة اللون، و lightness درجة الفتح أو الغمق.

hsl(221 83% 53%)

إذا أردت نفس اللون لكن أغمق:

hsl(221 83% 45%)

إذا أردت خلفية خفيفة:

hsl(221 83% 96%)

نفس hue، لكن lightness مختلفة. هذا أسهل بكثير من تخمين قيم RGB.

استخدم HSL في أنظمة التصميم، الثيمات، hover states، dark mode، وتوليد درجات اللون. عندما تحتاج عائلة ألوان منظمة، HSL يجعل العلاقة واضحة.

لكن HSL ليس مثاليا. قيمة lightness نفسها لا تعني دائما نفس السطوع في عين الإنسان. الأصفر عند 50% قد يبدو أفتح بكثير من الأزرق عند 50%. هناك صيغ أحدث مثل OKLCH أفضل إدراكيا، لكن HSL يبقى مفهوما ومدعوما على نطاق واسع.

CMYK: عالم الطباعة

CMYK يعني Cyan و Magenta و Yellow و Key black. هذه صيغة حبر، لا صيغة شاشة. الشاشات تضيف الضوء، أما الطباعة فتستخدم الحبر الذي يمتص الضوء. لذلك RGB و CMYK ليسا مجرد طريقتين لكتابة نفس الشيء؛ هما نموذجان مختلفان.

استخدم CMYK عندما يكون الناتج مطبوعا: بروشور، بطاقة، تغليف، ملف PDF للطباعة، أو دليل علامة تجارية للطباعة. إذا طلبت المطبعة CMYK، فهي لا تحاول تعقيد حياتك. هي تحتاج قيما تناسب الحبر والورق وسير العمل الطباعي.

لا تستخدم CMYK كافتراض في CSS. المتصفح يعرض ألوان شاشة. إذا أعطاك شخص قيمة CMYK لموقع، حولها إلى RGB أو HEX أو HSL، واعرف أن التطابق قد لا يكون كاملا. بعض ألوان الشاشة الزاهية لا تطبع بنفس القوة، وبعض ألوان الطباعة لا تظهر على الشاشة كما في الورق.

لهذا تحتوي أدلة الهوية المحترفة على قيم متعددة: HEX/RGB للويب، CMYK للطباعة، وربما Pantone للألوان الخاصة.

مقارنة سريعة

إذا كان العمل رقميا، ستدور غالبا بين RGB و HEX و HSL. إذا كان العمل مطبوعا، يدخل CMYK.

ماذا أستخدم في CSS؟

للألوان الثابتة، HEX ممتاز:

:root {
  --brand-blue: #2563eb;
}

للشفافية، الصيغة الحديثة من RGB أو HSL واضحة:

.button {
  background: rgb(37 99 235 / 90%);
}

للثيمات، HSL مفيد:

:root {
  --primary: 221 83% 53%;
}

.button {
  background: hsl(var(--primary));
}

يمكنك أيضا تخزين قنوات RGB فقط:

:root {
  --primary-rgb: 37 99 235;
}

.shadow {
  box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.25);
}

هذا يجعل alpha سهلا. لا توجد صيغة واحدة مقدسة. اختر ما يجعل التغيير اليومي أسهل.

Dark Mode وأنظمة التصميم

في الوضع الداكن تظهر قيمة HSL أكثر. إذا كانت ألوانك مجرد HEX عشوائية، فكل درجة جديدة تحتاج تخمينا. أما إذا كانت الألوان منظمة حول hue و saturation و lightness، يصبح توليد الخلفيات والحدود والنصوص أسهل.

لكن لا تجعل أسماء الألوان مجرد blue-500 في كل مكان. الأفضل استخدام tokens تحمل وظيفة: color-primary-bg, color-danger-text, color-border-muted. اللون ليس قيمة فقط؛ هو دور في الواجهة. عندما تغير الثيم، يبقى الدور مفهوما حتى لو تغيرت القيمة.

إمكانية الوصول والتباين

صيغة اللون لا تضمن القراءة. لون HEX صحيح قد يفشل في التباين. تدرج HSL جميل قد يكون ضعيفا للنص. اللون الذي يبدو رائعا على شاشة المصمم قد يختلف على شاشة المستخدم.

اختبر التباين بين النص والخلفية. لا تعتمد على اللون وحده لإظهار الخطأ أو النجاح. افحص حالات hover و focus و disabled. انتبه للنص الرمادي الفاتح، والأزرار الملونة، والنص فوق خلفيات ملونة.

أدوات contrast أهم من نقاش HEX ضد RGB عندما يكون السؤال: هل يستطيع الناس قراءة هذا؟

تسليم المصمم للمطور

التسليم الجيد لا يعتمد على صيغة واحدة فقط. الأفضل أن يحتوي نظام التصميم على اسم token، وقيمة HEX، وربما RGB/HSL، وملاحظات الاستخدام. مثلا:

primary-600
HEX: #2563eb
RGB: 37, 99, 235
Usage: primary buttons, links, focus ring

للطباعة أضف CMYK. للويب لا تجبر المطور على CMYK. وللمطورين: لا تنثر الألوان الخام في كل ملف. استخدم variables أو tokens حتى لا يتحول المنتج إلى عشرين درجة أزرق بلا أسماء.

أخطاء شائعة

استخدام CMYK للويب خطأ شائع. المتصفح لا يعمل بهذه الطريقة. تحويل HEX إلى RGB لا يغير اللون، فقط يغير طريقة الكتابة. بناء درجات HSL بدون فحص contrast قد ينتج واجهة جميلة لكنها غير قابلة للقراءة. وتحويل ألوان الهوية للطباعة بدون color profile مناسب قد يعطي نتيجة مختلفة عن المتوقع.

أمثلة من العمل اليومي

إذا كنت تبني landing page بسيط، غالبا HEX يكفي. ستضع ألوان العلامة في CSS variables، وتستخدمها في الأزرار والروابط والخلفيات. لا تحتاج نظاما معقدا من البداية، لكنك تحتاج أسماء واضحة حتى لا تتكرر الألوان بلا ضبط.

إذا كنت تبني لوحة تحكم أو SaaS، فكر في tokens أكثر من الصيغ. تحتاج ألوانا للحالات: نجاح، تحذير، خطر، معلومات، حدود، خلفيات، نص ثانوي، نص معطل. هنا HSL أو RGB channel variables تجعل alpha والدرجات أسهل. الأهم أن تختبر كل حالة في light mode و dark mode.

إذا كنت تنقل تصميم Figma إلى كود، لا تعتمد على التقاط اللون من screenshot. خذ القيمة من style أو token. الصورة قد تتأثر بالضغط أو color profile أو طبقة شفافية. قيمة واحدة خاطئة قد تنتج زر بلون قريب لكنه ليس من النظام.

إذا كنت تعمل على شعار سيستخدم في الويب والطباعة، اطلب قيما منفصلة. HEX/RGB للموقع، CMYK للطباعة، وربما نسخة Pantone إن كانت الهوية دقيقة. لا تفترض أن التحويل التلقائي سيحافظ على نفس الإحساس على الورق.

تنظيم لوحة الألوان

لوحة جيدة ليست مجموعة ألوان جميلة فقط. هي نظام قرارات. ابدأ بالأدوار: primary، secondary، surface، border، text، danger، warning، success. ثم أنشئ درجات كافية لكل دور. لا تضف درجة جديدة لأن بطاقة واحدة "تحتاج شيئا ألطف" إلا إذا عرفت أين ستستخدم لاحقا.

اكتب ملاحظات استخدام قصيرة. مثلا: danger-600 للأزرار الخطيرة، danger-50 للخلفيات التحذيرية، و danger-700 للنص فوق خلفية فاتحة. هذه الملاحظات تمنع استخدام الأحمر القوي في مكان يحتاج تنبيها هادئا.

وعند التحويل بين الصيغ، اعتبرها عملية تقنية وليست قرارا جماليا. اللون نفسه يمكن أن يظهر كـ HEX في التوثيق، RGB في canvas، HSL في الثيم، وCMYK في ملف الطباعة. ما يهم هو أن كل قيمة مرتبطة بنفس token ونفس النية.

كيف تختار؟

إذا كان الناتج شاشة، استخدم RGB أو HEX أو HSL. إذا كان طباعة، استخدم CMYK مع إعدادات صحيحة. إذا كان اللون ثابتا للعلامة، HEX مناسب. إذا كنت تبني مشتقات وثيمات، HSL مريح. إذا كنت تتعامل مع pixels أو canvas، RGB طبيعي. وإذا كنت تختبر القراءة، الصيغة أقل أهمية من التباين الفعلي.

لا تنس البيئة الفعلية

اختبر الألوان في المكان الذي ستظهر فيه. لون يبدو ممتازا على شاشة مكتبك قد يبدو باهتا على هاتف رخيص أو حادا جدا على شاشة عالية التباين. لون مطبوع على ورق لامع ليس مثل الورق المطفي. وحتى داخل الويب، الخلفية المجاورة تغير الإحساس باللون. لذلك لا تجعل القرار كله داخل picker. ضع اللون في الزر، البطاقة، التنبيه، الرابط، والحالة المعطلة. الألوان تعيش داخل واجهة، وليس في مربعات منفصلة.

ومن المفيد اختبار الألوان مع النص الحقيقي، لا مع كلمات قصيرة مثالية. عنوان طويل، رسالة خطأ، رقم داخل جدول، وزر في شاشة ضيقة قد يكشفون مشاكل لا تظهر في لوحة الألوان. كذلك جرب حالات focus للوحة المفاتيح، لأن لون outline أو ring قد يكون جميلا لكنه غير واضح على بعض الخلفيات. الصيغة تساعدك تكتب اللون، أما الاختبار فيثبت أن اللون يعمل.

الخلاصة

RGB لغة الشاشات. HEX اختصار RGB للويب. HSL طريقة إنسانية لتعديل اللون. CMYK لغة الطباعة. استخدم كل صيغة في مكانها، ووثق ألوانك كجزء من نظام، لا كقيم مبعثرة. اللون الجيد ليس فقط ما يبدو جميلا، بل ما يمكن تكراره وقراءته وتسليمه بدون تخمين.