التصميم الغرافيكي

نظرية الألوان

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

  • الدرس 3 من 12
  • مبتدئ
  • مجاني، دون تسجيل

دورة كاملة على العجلة، من اللون الأساس إلى متممه ثم العودة

كل محطة علاقة. وكلما ابتعدت عن الأساس زاد التوتر.

  • 1 اللون الأساس
  • 2 المتجاور
  • 3 الثلاثي
  • 4 المتمم
  • 5 الثلاثي من الجهة الأخرى
  • 6 المتجاور من الجهة الأخرى

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

آخر مراجعة: تُراجع الحقائق وأسماء الأدوات في هذا الدرس مقابل مصادرها في هذا التاريخ.

اللون ليس اسما بل ثلاثة أرقام

حين تقول «أزرق» فألف أزرق ممكن. ولكي تفكر في اللون وتقرر، عليك أن تترك الاسم وتصل إلى الأرقام. والنظام الذي يفكر به أكثر المصممين له ثلاثة أرقام واسمه HSL.

نظرية الألوان عمليا تعني العمل بهذه المحاور الثلاثة. الصبغة هي موضع اللون على العجلة، وتُقاس بالدرجات من صفر إلى ثلاثمئة وستين. والتشبع يقول كم هذه الصبغة نقية؛ والتشبع صفر يعني رماديا. والإضاءة تقول كم يقترب من الأبيض أو الأسود.

والفائدة أنك تستطيع تحريك محور واحد دون أن تمس البقية. فلصنع نسخة أفتح من لون العلامة تترك الصبغة والتشبع ولا ترفع سوى الإضاءة. أما رمز hex فلا يتيح ذلك، لأنه لا يقول سوى مقدار الأحمر والأخضر والأزرق ولا يعطيك مقبضا لـ«أفتح قليلا». وCSS يفهم hsl() أصلا، فلا حاجة إلى تحويل يدوي.

ونقطة تستحق أن تُقال هنا في البداية، لأنها تنفع لاحقا ونادرا ما تُكتب: الإضاءة في HSL ليست الإضاءة التي تراها عينك. فالأصفر hsl(60 100% 50%) والأزرق hsl(240 100% 50%) كلاهما بإضاءة خمسين بالمئة، ومع ذلك يعطي ذلك الأصفر نسبة تباين ١٩.٥٦ إلى ١ على الأسود ولا يعطي ذلك الأزرق سوى ٢.٤٤ إلى ١. رقم واحد متطابق، ولونان لا تراهما العين متساويين إطلاقا. والفضاءات اللونية الأحدث مثل oklch() التي جاءت في النسخة الرابعة من مواصفة ألوان CSS وُضعت لعلاج هذا الخلل بالذات.

الأرقام الثلاثة التي تصنع لونا واحدا

يمكن تحريك كل واحد دون مس الآخرين؛ وهذا ما يجعل HSL أنفع من hex.

الصبغة، الموضع على العجلةالتشبع، كم هو نقي
لون واحدثلاثة محاور مستقلةالإضاءة، كم يقترب من الأبيض

إضاءة HSL ليست الإضاءة التي تراها العين، والمثال في نص هذا القسم. والعمل الذي يحتاج إضاءة إدراكية مكانه فضاء لوني أحدث.

ماذا تقول عجلة الألوان وماذا لا تقول؟

ترتب عجلة الألوان الصبغات حول دائرة، وعملها أن تجعل العلاقات مرئية. وثلاث من هذه العلاقات تقوم بأكثر العمل: المتمم، لونان متقابلان؛ والمتجاور، صبغتان أو ثلاث متلاصقة؛ والثلاثي، ثلاث نقاط متساوية التباعد على الدائرة.

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

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

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

من كم لونا نبني اللوحة؟

الجواب القصير: أقل مما تظن. فاللوحات التي تصمد أمام العمل الحقيقي تحمل عادة صبغة أساسية واحدة، وصبغة مساندة، ولون تأكيد يُستعمل بحساب، ورماديين أو ثلاثة. هذه القائمة كلها. وأكثر ما تراه غير ذلك في اللوحة هو درجات إضاءة للصبغات نفسها، لا صبغات جديدة.

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

وقاعدة ٦٠ و٣٠ و١٠ المعروفة تقول الشيء نفسه بلغة المساحة: نحو ستين بالمئة من الشاشة باللون الغالب، وثلاثين بالمساند، وعشرة بالتأكيد. وكنقطة بداية لا بأس بها، لكنها تنكسر سريعا في موضعين. الأول أنها تتحدث عن المساحة لا عن الأهمية؛ فلون التأكيد يأخذ أصغر نصيب ويؤدي أهم عمل. والثاني أن هذه النسب لا تعني شيئا على لوحة قيادة مزدحمة بالبيانات أو في جدول، ويحل محلها قانون أشد: اللون حيث يحمل معنى فقط.

وموقفنا بعد سنوات من بناء واجهات فارسية هو هذا: أكثر لوحات العلامات فيها صبغات كثيرة ورماديات قليلة. فإن كنت ستزيد شيئا واحدا في لوحتك، فزد الرماديات.

الأدوار الخمسة التي تملؤها لوحة عملية

  • اللون الغالب

    أكبر نصيب من الشاشة. وإن كان للعلامة لون فهو هذا عادة.

  • اللون المساند

    للأقسام التي يجب أن تنفصل عن غيرها دون أن تصرخ.

  • لون التأكيد

    أصغر مساحة وأهم عمل. وإن وُضع في كل مكان لم يعد تأكيدا.

  • المحايدات الفاتحة

    الأسطح والحدود والمسافات. تُرى أكثر مما يُرى اللون الأساسي.

اللوحة

هذه أدوار لا عدد ألوان. وصبغة واحدة قد تملأ عدة أدوار بدرجات إضاءة مختلفة، وهذا عادة هو الصواب.

لماذا التباين عمل الإضاءة لا اللون

هذا الجزء هو الوحيد في نظرية الألوان الذي وراءه رقم صارم، وهو أيضا موضع أكثر الأخطاء. خذ الأحمر الخالص على الأخضر الخالص: لونان مختلفان تماما، ومتقابلان على العجلة بقدر ما يتخيل كثيرون، ونسبة تباينهما ٢.٩١ إلى ١ فقط. أي أن نصا أحمر على خلفية خضراء لا يُقرأ عمليا، مهما بدا اللونان متضادين.

والسبب بسيط: العين البشرية تقرأ فروق الإضاءة لا فروق الصبغة. ففرق الصبغة يصنع المزاج، وفرق الإضاءة يصنع القراءة. وإن خلطت بينهما بنيت لوحة رائعة في شريط العينات وغير مقروءة على شاشة حقيقية.

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

والأرقام المطلوبة يعطيها معيار WCAG: ٤.٥ إلى ١ على الأقل للنص العادي، و٣ إلى ١ للنص الكبير ولعناصر الواجهة. وقد فصّلناها في درس إتاحة الوصول على الويب بالأرقام الحقيقية للوحة هذا الموقع وبطريقة القياس، فلا نكررها هنا. والذي يضيفه هذا الدرس شيء واحد: التباين ليس خاصية لون بل خاصية زوج. فلون ممتاز كنص قد يسقط حين يصير هو الخلفية، وعندها تحتاج نسختين من صبغة واحدة لا نسخة.

أي محور يصنع التباين وأيها يصنع المزاج فقط

كلاهما لازم. والخطأ توقع عمل الأول من الثاني.

الإضاءة: ما يصنع القراءة

  • نص على خلفية، في أي موضع من الصفحة
  • حد حقل الإدخال وأي أيقونة تحمل معنى
  • درجات الأسطح: خلفية، بطاقة، بطاقة فوق بطاقة
  • كل ما يجب أن يصمد في اختبار التدرج الرمادي

الصبغة والتشبع: ما يصنع المزاج

  • شخصية العلامة واختلافها عن المنافس
  • كون الصفحة كلها دافئة أو باردة
  • فصل الفئات في مخطط، إلى جانب إشارة ثانية
  • إحساس بالنجاح أو الخطر، حين يقوله النص أيضا

هذا التقسيم عن قراءة النص. أما لفصل الفئات في مخطط فالصبغة تعمل فعلا، شرط ألا تكون الإشارة الوحيدة.

رمز hex واحد، شاشتان، لونان

شيء لا تكاد دروس نظرية الألوان تذكره: رمز اللون تعليمة لا ضمان. فالـhex نفسه يصير ثلاثة ألوان مختلفة قليلا على شاشة المصمم، وعلى هاتف العميل الرخيص، وعلى جهاز العرض في الاجتماع، وهذا ليس خطأ أحد.

والسبب هو الفضاء اللوني. فقد افترض الجميع سنوات أنه sRGB وأن رمز اللون يعني شيئا داخله. واليوم تغطي شاشات كثيرة مدى أوسع، وتتيح النسخة الرابعة من مواصفة ألوان CSS كتابة ألوان لا تدخل في sRGB أصلا. والنتيجة أن «لون العلامة» لم يعد نقطة ثابتة؛ صار مجالا.

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

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

المسار السريع مع الذكاء الاصطناعي

ما تجيده النماذج فعلا في بناء اللوحات ليس توليد التركيبات، فأي مولّد لوحات يفعل ذلك. المفيد هو هذا: خذ لونا تملكه أصلا، وابنِ درجات إضاءته، واحسب كل زوج سيحمل نصا على خلفية، وقل صراحة أي الأزواج يسقط. أي ضع النموذج في دور الحاسب لا الفنان.

  1. خذ اللون الذي تملكه أصلا، ولو كان hex واحدا من الشعار. فالبدء من لون العلامة يربط اللوحة بما يملكه العميل من اليوم الأول.
  2. شغّل الوصفة أدناه بذلك الـhex. ويكفي هنا نموذج سريع رخيص من فئة Gemini Flash، لأن العمل حساب في أغلبه؛ واختيارنا الحالي بين النماذج محدَّث في <a class="text-link" href="/ai/">قسم الذكاء الاصطناعي</a>.
  3. اقرأ جدول الأزواج من أعلاه وأصلح كل صف دون الحد في مكانه برفع الإضاءة أو خفضها. ولا تمس الصبغة؛ فإن غيّرتها لم يعد لون العلامة.
  4. ضع الناتج على صفحة حقيقية وحوّلها إلى تدرج رمادي. فالأرقام الصحيحة شرط لازم لا كاف؛ والذي يقرر فعلا هو اختبار الرمادي.

وصفة جاهزة للنسخ

لوني الأساس هو: {hex العلامة}
خلفية الموقع: {فاتحة أو داكنة}

١. ابنِ من هذا اللون تسع درجات إضاءة، من فاتح جدا إلى داكن جدا، مع إبقاء الصبغة والتشبع ثابتين تقريبا. واكتب كل درجة برمز hex وبما يعادلها بـhsl().
٢. واقترح كذلك ثلاثة رماديات تنسجم مع هذه الصبغة: واحد لخلفية سطح، وواحد للحدود، وواحد للنص الثانوي.
٣. وابنِ جدولا بكل زوج سيصير عمليا نصا على خلفية. واحسب لكل زوج نسبة التباين بمعادلة الإضاءة النسبية في WCAG، واكتب الرقم بمنزلتين عشريتين.
٤. واكتب بجانب كل صف: مقبول أو مرفوض، بمعيار ٤.٥ إلى ١ للنص العادي و٣ إلى ١ للنص الكبير ولعناصر الواجهة. وقدّم الصفوف المرفوضة أولا.
٥. واقترح لكل صف مرفوض تصحيحا واحدا فقط، وأن يكون تغييرا في الإضاءة لا في الصبغة.

ولا تضف إلى اللوحة أي لون من عندك. وإن احتاج الجواب شيئا لم أكتبه فاسأل؛ ولا تخمّن.

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

الذكاء الاصطناعي في هذا العمل

موقفنا من اللون والذكاء الاصطناعي: ممتاز للحساب لا للاختيار. فالنماذج تحسب نسب التباين أسرع منك، وتبني درجات الإضاءة، وتستخرج الألوان الموجودة من صورة. لكن «أي لون يناسب هذه العلامة» سؤال عن سوق وعن عملاء لا عن هندسة، وهناك يكون جواب النموذج متوسط ما رآه، وهذا بالضبط ما يجعل مخرجات الجميع متشابهة.

أدوات تساعد فعلا

  • Gemini الأنسب للوصفة أعلاه، لأنه يقرأ الصورة ويحسب معا: أعطه لقطة من الصفحة الحالية واطلب جدول الأزواج. وصفحة غوغل نفسها تقول إن تطبيق جيميناي على الويب متاح في أكثر من مئتين وثلاثين بلدا وإقليما، وإيران ليست في تلك القائمة؛ قرأنا هذا على صفحتهم لا باختبار الشبكة.
  • Claude أفضل حين تريد تحويل اللوحة إلى شفرة: متغيرات CSS بأسماء ذات معنى، ودرجات الإضاءة على شكل رموز، والنمطان الفاتح والداكن جنبا إلى جنب. وإيران ليست في أي من قائمتي البلدان المدعومة لدى أنثروبيك، وقد قرأنا ذلك على صفحتها.
  • Adobe Color ليس ذكاء اصطناعيا، وهذه ميزته: العجلة، وعلاقات المتمم والمتجاور والثلاثي، وقسم منفصل لفحص التباين وعمى الألوان. ولتعلم العلاقات نفسها هو أوضح من أي نموذج، لأنك ترى النتيجة أثناء التحريك. أما إمكانية الوصول والدفع من إيران فشيء تختبره بنفسك؛ ولا نكتب عنه ادعاء.

اين ينقلب ضدك

الخطر الأساسي هنا ليس الأمن ولا حقوق النشر، بل شيء أبسط: اللوحة التي يبنيها نموذج يُحكم عليها في شريط عينات لا على صفحة. فمولّدات اللوحات، ذكية كانت أم لا، تُحسّن علاقات الصبغة لا التباين، ولهذا تصل اللوحة الجميلة مرارا إلى نص يسقط دون حد ٤.٥ إلى ١ في WCAG. فأي لوحة تأخذها من نموذج يجب أن تُحسب زوجا زوجا قبل استعمالها.
والخطر الثاني أعم ولا علاقة له باللون: كل صورة أو ملف علامة تضعه في محادثة قد خرج من جهازك، وما يجري له يتوقف على الخطة وإعدادات تلك الخدمة وهو مكتوب على صفحة استخدام البيانات لديها. وللمشروع الشخصي لا مشكلة؛ أما لهوية بصرية لعميل لم تُكشف بعد فخذ الإذن أولا. ولمعرفة كيف يمكن الدفع لكل من هذه الأدوات من إيران انظر دليل الشراء.

المصادر: W3C: Understanding Contrast (Minimum), WCAG 2.2 Google: where the Gemini web app is available Anthropic: supported countries Adobe Color: accessibility tools

حدود هذه النصيحة

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

من عملنا نحن

كل لون في كل شكل على هذا الموقع يأتي من مكان واحد، وهو تدرج بأربع محطات: #ff4d6a، ثم #b06bff عند خمسة وثلاثين بالمئة، ثم #4d9fff عند ثمانية وستين بالمئة، و#2ee6a8 في النهاية. ودالة rgb_dg_hue() في محرك المخططات بالقالب تأخذ لون العقدة رقم i من أصل n بأخذ عينة من التدرج نفسه عند i مقسوما على n ناقص واحد. والنتيجة أن اللون في الشكل ليس زينة بل عرض للترتيب، وأن القسم كله يُدار بتعريف لوني واحد بدل عشرات الاختيارات اليدوية.
وهذا هو الدرس الذي دفعنا ثمنه أثناء بناء تلك المخططات، وهو ظاهر في الشفرة نفسها: الطريقة تكذب حين يكون الشكل حكما. فإن كانت الصفوف مرتبة من الجيد إلى السيئ، لوّن اللون الموضعي فئة خارج ذلك المقياس كأنها على الطيف. لذلك كسبت المخططات مفتاح hue على كل عنصر يثبّت اللون للفئة ويمنعه من أن يأتي من موضع في قائمة. فاللون يعني شيئا حين يتصل بالمعنى لا برقم الصف.

اسئلة متابعة حقيقية

للبداية، أتعلم hex أم HSL؟

تقرأ hex وتكتب HSL. فرمز اللون الذي يصلك من شعار أو من مصمم يكون hex في الغالب دائما، فعليك أن تعرفه؛ لكن حين تبني اللوحة بنفسك يبسّط HSL العمل، لأنك تستطيع تحريك محور وحده. والتحويل بينهما سطر CSS واحد ولا يحتاج أداة.

لون علامة العميل لا يملك تباينا كافيا. ماذا أفعل؟

لا تغيّر لون العلامة بل غيّر دوره. أبقِ الصبغة نفسها بإضاءتين مختلفتين: الأصلية حيث يُرى اللون فقط، ونسخة أدكن أو أفتح حيث يجلس النص فوقه. وهذا بالضبط ما فعلناه بلوحة هذا الموقع، وعُرض بالأرقام في درس إتاحة الوصول.

هل النمط الداكن هو اللوحة نفسها معكوسة؟

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

واصل التعلم