نظرية الألوان للمصممين: النظام خلف كل لوحة ألوان جيدة
نظرية الألوان للمصممين العاملين. العجلة، والتناسقات، والإدراك، وعلم النفس، وإمكانية الوصول، وكيف تحوّل أنظمة التصميم الحديثة كل ذلك إلى منتج مُشحَن.
نظرية الألوان تُدرَّس كمسح في تاريخ الفن وتُمارَس كهندسة بناء. العجلات، والتناسقات، والألوان التكميلية. الدافئ والبارد.
"الأحمر يعني الشغف." هذه هي الأدوات التي يُسلَّم بها معظم المصممون في المدارس، وكاد لا شيء منها يصمد أمام واجهة منتج حقيقية.
ما يحتاجه المصممون العاملون فعلاً هو مكدّس. نظام متعدد الطبقات يبدأ من كيفية إدراك العين للألوان، عبر العجلة وتناسقاتها، إلى التباين والتسلسل الهرمي، ومروراً بعلم النفس والثقافة، وصولاً إلى بناء لوحة الألوان، وأخيراً إلى الرموز وأنظمة التصميم التي تُشحَن بها الأعمال. تخطَّ طبقة واحدة وستبدو لوحة الألوان رائعة في Figma وتنهار في الإنتاج.
هذه الورقة هي المكدّس بأكمله. لكل طبقة ورقة Brainy مستقلة للتعمق أكثر. هنا نربطها معاً.
ما الذي تطلب منك نظرية الألوان حله فعلاً
نظرية الألوان ليست مجموعة قواعد جمالية، بل هي مكدّس من الرؤية والإدراك والتفكير المنهجي يجب أن يعمل كله معاً قبل شحن أي لوحة ألوان.
النسخة المختصرة: الرؤية البشرية غريبة، واللون ظاهرة فيزيائية، ويجب على المصممين إنتاج مخرجات تعمل لملايين الأشخاص عبر مئات الأجهزة في عشرات السياقات. النظرية هي المفردات التي نستخدمها للتفكير في هذه المشكلة. إنها ليست مجموعة وصايا. إنها مجموعة المفاهيم المشتركة التي تمكّنك من الانتقال من "هذا يبدو خاطئاً" إلى "اللون المميز يتنافس مع الخلفية والتباين يفشل عند 14 نقطة."
المكدّس متعدد الطبقات عن قصد. كل طبقة تجيب عن سؤال مختلف.
| الطبقة | السؤال الذي تجيب عنه |
|---|---|
| الإدراك | كيف ترى العين هذا اللون فعلاً في سياقه؟ |
| العجلة | ما علاقة الدرجة اللونية بين هذه الألوان؟ |
| التناسق | هل تبدو هذه الألوان مترابطة أم متصادمة؟ |
| التباين | هل يمكن قراءة هذا أو رؤيته أو النقر عليه؟ |
| لوحة الألوان | ما الألوان التي تمتلكها هذه العلامة التجارية أو المنتج؟ |
| النظام | كيف تُطبَّق هذه الألوان باتساق على نطاق واسع؟ |
| إمكانية الوصول | هل كل زوج في النظام يعمل مع كل مستخدم؟ |
كل طبقة تحمل ثقلاً. لوحة الألوان المصممة دون تفكير في الإدراك تفشل في السياق. النظام المبني دون إمكانية وصول يفشل في المراجعة.
التناسق المختار دون منطق لوحة الألوان يفشل على النطاق الواسع. الطبقات تتراكم، وهذا أيضاً سبب أن الحصول على الألوان بشكل صحيح يؤتي ثماراً متراكمة.
العجلة والتناسقات وما هي في الواقع من أجله
عجلة الألوان هي نموذج لعلاقات الدرجة اللونية، والتناسقات هي اختصارات لاختيار أزواج ومجموعات تقرأها العين على أنها مترابطة.
معظم المصممين يتعلمون العجلة على شكل مثلثات الألوان الأساسية والثانوية والثلاثية ثم لا يستخدمونها مجدداً. هذا إهدار. العجلة هي أسرع طريقة للتفكير في الألوان التي تنتمي معاً وتلك التي تتصارع، وهذا مهم في كل مرة تضيف فيها لوناً جديداً إلى لوحة ألوان أو مخطط أو علامة.
أربعة تناسقات تثبت قيمتها في العمل على المنتجات والعلامات التجارية.
التكميلي
الألوان المقابلة على العجلة. الأزرق والبرتقالي، الأحمر والأخضر، البنفسجي والأصفر. تخلق الألوان التكميلية أعلى توتر بصري ممكن بين درجتين لونيتين.
هذا رائع للتأثير اللحظي الواحد (ملصق، صورة بطولية، زي رياضي) وسيئ للغاية للاستخدام الموسّع في الواجهات، وهذا هو السبب في أنك لا ترى تقريباً لوحات منتجات تكميلية خالصة. في واجهة المستخدم، يُلطَّف التكميلي: لون واحد يهيمن والآخر يظهر كلون مميز مُقيَّد.
المتجاور
الألوان المتجاورة على العجلة. الأزرق السماوي، الأزرق، البنفسجي المزرق. لوحات الألوان المتجاورة تبدو متماسكة وهادئة.
إنها أساس معظم أنظمة العلامات التجارية الحديثة. الخطر أنها يمكن أن تبدو رتيبة إذا لم يكن هناك تباين كافٍ في القيمة بين الدرجات اللونية. المتجاور يعمل عندما تتعامل مع لوحة الألوان كعائلة لا كمجموعة منافسين.
الثلاثي والتكميلي المنقسم: الزوج المُهمَل
يحظى التكميلي والمتجاور بمعظم الاهتمام في مدارس التصميم. التناسقان التاليان أقل تداولاً، وبالنسبة للمصممين العاملين، أكثر فائدة في الغالب.
الثلاثي
ثلاث درجات لونية متساوية المسافة حول العجلة. الأحمر والأصفر والأزرق. البرتقالي والأخضر والبنفسجي. لوحات الألوان الثلاثية تبدو مرحة وعالية الطاقة، وهذا هو السبب في ظهورها في علامات الأطفال التجارية والرياضة والترفيه.
في تصميم المنتجات، الثلاثي الخالص نادر لأنه صعب التوازن. لوحات الألوان المستوحاة من الثلاثي (درجة لونية واحدة مهيمنة، واثنتان أخريان مخففتان) موجودة في كل مكان.
التكميلي المنقسم
درجة لونية واحدة بالإضافة إلى الدرجتين المجاورتين للونها التكميلي. الأزرق مع البرتقالي المصفر والبرتقالي المحمر. يحتفظ التكميلي المنقسم بمعظم تباين التكميلي مع توتر أقل. إنه التناسق المُقلَّل الشأن الذي يظهر في كثير من أنظمة العلامات التجارية الجيدة التنفيذ عند البحث.
التناسقات أدوات لا إجابات. لا تختار لوحة ألوان علامة تجارية بالقول "هيا نفعل الثلاثي." تستخدم التناسقات للتفكير في المجموعات المقترحة وتحديد تلك التي تعمل بالفعل.
الإدراك يتغلب على النظرية في كل مرة
نفس اللون الأحمر على نفس الزر يبدو عاجلاً على صفحة محايدة، وصاخباً على صفحة برتقالية، وغير مرئي على صفحة حمراء داكنة، ولا شيء من هذا يُفسَّر بالعجلة.
السياق هو المُضاعِف في الألوان. اللون ليس له معنى ثابت، ولا سطوع ثابت، ولا قابلية قراءة ثابتة. له علاقة بكل ما هو بجانبه، وبما كان على الشاشة قبل ثانية، وبالشاشة التي يستخدمها المستخدم، والضوء الذي يضرب تلك الشاشة. النظرية بدون إدراك هي نظرية في فراغ.
ثلاثة تأثيرات إدراكية تستحق أن تُعرف بالاسم.
التباين المتزامن. نفس الرمادي يبدو أفتح بجانب الأسود وأغمق بجانب الأبيض. الدلالة: لون العلامة التجارية الذي تختاره على خلفية بيضاء استوديو ستشعر به بشكل مختلف تماماً عند وضعه على بطل داكن. يجب عليك اختبار الألوان في سياقها الإنتاجي لا بمعزل عن بعضها.
التكيف اللوني. تتكيف العين مع اللون المحيط في 500 ميلي ثانية أو أقل. صفحة قضت خمس ثوانٍ على بطل برتقالي دافئ قبل التمرير إلى منطقة محتوى محايدة ستشعر بأنها أبرد قليلاً مما هي عليه فعلاً. تحوّل إدراك المستخدم دون أن يلاحظ ذلك.
تجميع القيم. العين تجمع العناصر ذات السطوع المتشابه على أنها مترابطة والعناصر ذات الظلام المتشابه على أنها منفصلة. هكذا يعمل التسلسل الهرمي. التصميم القوي يستغل تباين القيمة أكثر من تباين الدرجة اللونية لأن القيمة هي ما يعالجه النظام البصري أولاً.
علم نفس الألوان: الأدلة مقابل الخرافات
علم نفس الألوان حقيقي، لكن معظم ما يُسمى علم نفس الألوان هو أسطورة مُعاد تدويرها، وهذا هو السبب في أن المصممين يحتاجون إلى فصل الأدلة عن الفولكلور.
هناك أبحاث حقيقية حول دراسة Loyola للتعرف على العلامات التجارية (الألوان تدفع حتى 80% من التعرف على العلامة التجارية)، وعلى تأثيرات التشبع على الإلحاح المُدرَك، وعلى تفضيلات الوضع الداكن، وعلى الارتباطات الثقافية للألوان. هذا مفيد. هناك أيضاً فيضان من المدونات التي تدّعي "الأحمر يزيد التحويل 21%" والتي تنهار تحت أدنى تدقيق. هذا ليس مفيداً.
الاختبار السريع: أي ادعاء في علم نفس الألوان لا يتضمن السياق أو الثقافة أو الجمهور هو خرافة. معنى اللون سياقي دائماً. الأخضر يُقرأ كالمال في تقنية المال الأمريكية وكالطبيعة في الصحة والعافية، وكلاهما صحيح في سياقه.
للتحليل الكامل حول ما هو حقيقي وما هو مُعاد تدويره وكيفية تطبيق علم نفس الألوان فعلاً في العلامات التجارية والمنتجات، ورقة علم نفس الألوان في التصميم تحتوي على الإطار المبني على الأدلة.
لماذا انهارت قواعد النسب عند نطاق المنتجات
قاعدة 60-30-10 وأخواتها حلّت مشكلة سطح واحد، وتصميم المنتجات ليس سطحاً واحداً.
اخترع التصميم الداخلي 60-30-10 للإجابة على "كم من كل لون يذهب على الجدران والأثاث والإكسسوارات." هذا ينطبق بشكل نظيف على غرفة. لا ينطبق على منتج رقمي يحتوي على مئات الأسطح وعشرات الحالات والوضع الفاتح والداكن، ومستخدمين على طيف من الأجهزة.
ألوان المنتجات الحديثة تخلّت عن النسب لصالح الأدوار. السطح، المحتوى، المميز، الحالة، الدلالي. كل دور يحصل على رمز تصميم يحل إلى قيمة خام مختلفة لكل سمة. هذا هو البديل عن 60-30-10، وهو الشيء الوحيد الذي يتوسع.
المعالجة الكاملة لسبب انهيار النسب وكيف تبدو أنظمة الرموز القائمة على الأدوار في الممارسة العملية موجودة في ورقة قاعدة 60-30-10 مكسورة.
إمكانية الوصول أصبحت الآن جزءاً من نظرية الألوان
WCAG وAPCA نقلا إمكانية الوصول من "شيء يراجعه ضمان الجودة في النهاية" إلى خاصية من خصائص نظام الألوان نفسه.
لفترة طويلة، كانت إمكانية الوصول محادثة منفصلة. المصممون كانوا يختارون لوحة الألوان من أجل الجماليات، ويتحقق ضمان الجودة من النسب في النهاية، ويُعدَّل شيء ما، ويمضي الجميع قدماً. هذا السير لا يتوسع. كل نظام تصميم مُشحَن الآن يُشفِّر إمكانية الوصول في طبقة الرموز، مما يعني أن لوحة الألوان نفسها يجب تصميمها وفق نسبة التباين والعتبات الإدراكية من البداية.
النسخة المختصرة: WCAG 2.2 AA هو الحد الأدنى للامتثال (4.5:1 للنص الأساسي، 3:1 للنص الكبير وعناصر واجهة المستخدم غير النصية). APCA هو الخوارزمية الإدراكية التي ترتبط بشكل أفضل بقابلية القراءة الفعلية والمقترحة لـ WCAG 3. المنتجات الحقيقية تستهدف كليهما.
للنظرة الكاملة للمصمم العامل على نسب WCAG وAPCA وكيف تُشفِّر أنظمة التصميم التباين، ورقة تباين الألوان الميسّر تغطيه من البداية إلى النهاية.
بناء لوحة ألوان: مكدّس المصمم العامل
لوحة الألوان التي تُشحَن وتتوسع تُبنى طبقة تلو الأخرى، لا تُختار في جلسة واحدة.
العملية التي تنجح تسير بترتيب مقصود. كل طبقة تُقيِّد التالية، وهكذا تحافظ على تماسك لوحة الألوان بدلاً من الانجراف إلى مجموعة من اختيارات الألوان المتفرقة.
-
ابدأ بمقياس المحايد. ابنِ 8 إلى 12 خطوة من الرمادي (أو شبه الرمادي، غالباً مُزاح قليلاً نحو درجة حرارة العلامة التجارية). معظم الواجهة الحقيقية عبارة عن ألوان محايدة. هذا هو الأساس الذي تجلس عليه كل طبقة أخرى.
-
اختر اللون المميز للعلامة التجارية. لون رئيسي واحد، الشيء الوحيد الذي يربطه القارئ بالعلامة التجارية إذا رآه وحده. ضبط النفس هنا هو كل اللعبة. احتفظ بالطبقة المميزة للحظات العلامة التجارية والإجراءات الأساسية والعناصر عالية الإشارة.
-
أضف الألوان الدلالية. النجاح، التحذير، الحرج، المعلومات. هذه وظيفية لا زخرفية، وتحتاج إلى العمل عبر الوضع الفاتح والداكن دون حمل شخصية العلامة التجارية. تعامل معها كأدوات لا نكهة.
-
وسِّع إلى طبقة الحالة. التمرير فوقه، التركيز، الضغط، التعطيل، الاختيار. تُشتق هذه عادةً من الطبقات الأخرى (لون مميز أغمق للتمرير فوقه، محايد مخفف للتعطيل) لكنها رموزها الخاصة.
-
ضع رموزاً لكل شيء. كل زوج مُشحَن يحتاج إلى اسم دور.
text-on-accent،bg-subtle،border-default. إذا كان بإمكان المصمم استخدام لون خام بدون رمز، فلوحة الألوان تتسرب بالفعل. -
اختبر مقابل الإدراك لا الرياضيات فقط. نسب WCAG أولاً، ودرجات APCA ثانياً، ثم اختبارات العالم الحقيقي: وضع الرمادي، اختبار التقطيب، معاينة الإضاءة المنخفضة، ردود أفعال خمس ثوانٍ من أشخاص لا يعملون على العلامة التجارية.
-
اشحن الوضع الداكن كمجموعة رموز موازية. ليس فلتراً. ليس انعكاساً. لوحة موازية مناسبة تحل نفس الرموز إلى قيم مختلفة.
ابنِ بالترتيب لا في جلسة واحدة
الترتيب مهم لأن المحايدات تحمل الثقل الأكبر على أي صفحة، والمصممون الذين يبدأون بـاللون المميز ينتهون ببناء بقية لوحة الألوان حول قرار واحد قد لا يصمد. ابدأ بالطبقة الهادئة. أضف الطبقة الصاخبة أخيراً.
أنظمة التصميم كنظرية ألوان تطبيقية
أفضل المواد المرجعية لنظرية الألوان اليوم ليست كتاباً مدرسياً، بل وثائق أنظمة التصميم العامة للعلامات التجارية التي تشحن على نطاق واسع.
هذه الأنظمة تُضمِّن كل طبقة من طبقات المكدّس في الإعدادات الافتراضية. إنها أيضاً مجانية ومفتوحة ومُصانة من قِبَل أشخاص يشحنون ألوان المنتجات كل يوم.
Material Design 3
شاهده مباشرةً على m3.material.io
Material 3 هو الأكثر وضوحاً في تقديم نظرية الألوان كنظام تطبيقي. كل دور له نظير on- مرتبط به (النص والأيقونات التي تجلس فوق ذلك الدور)، المقاييس مشتقة من درجة اللون والكروما والنبرة بدلاً من HSL، والنظام بأكمله مبني للتسمية ديناميكياً من لون مصدر واحد.
ما يجب أخذه منه: نمط on-. عندما يختار المصمم primary لزر، يعرف النظام بالفعل ما يجب أن يكون لون النص على ذلك الزر. نظرية إمكانية الوصول والتباين مدمجة في التسمية.
Radix Colors
شاهده مباشرةً على radix-ui.com
يشحن Radix مقاييس من 12 خطوة لكل درجة لونية مع تعيين كل خطوة لدور محدد (خلفية التطبيق، الخلفية الخفية، عنصر واجهة المستخدم، التمرير فوقه، التركيز، النشط، الصلب، النص، النص عالي التباين). إنه بشكل فعال مرجع تناسق الألوان مربوط بسلّم التباين. يصل المصممون إلى الخطوة 11 عند الحاجة إلى نص عالي التباين ويعرفون أنه سيجتاز AA مقابل الخطوات الأدنى.
ما يجب أخذه منه: السلّم المُرقَّم. إعطاء كل خطوة في المقياس دوراً يُزيل نقاش "أي رمادي أستخدم" من كل مراجعة تصميم.
Adobe Spectrum: التوحيد الإدراكي على نطاق واسع
Material وRadix يحلان اللون عند طبقة الأدوار. Adobe يذهب أعمق، ويبني المقاييس نفسها على النماذج الإدراكية بحيث تظل علاقات التباين ثابتة عند تدوير الدرجات اللونية.
شاهده مباشرةً على spectrum.adobe.com
يستخدم Spectrum مقاييس إدراكية موحدة بحيث يكون لرمزين بنفس رقم الخطوة نفس الثقل البصري عبر كل درجة لونية. هذا يعني أن سمة يمكن أن تتحول من الأزرق إلى البرتقالي دون كسر التباين، لأن العلاقات الإدراكية محمية على مستوى المقياس.
ما يجب أخذه منه: التوحيد الإدراكي. إذا كان مقياسك مبنياً على نماذج إدراكية كـ OKLCH أو HSLuv، تصبح إمكانية الوصول قابلة للنقل عبر سمات العلامة التجارية بدلاً من شيء يجب إعادة التحقق منه مع كل لون جديد.
الأسئلة الشائعة
كيف أتعلم نظرية الألوان فعلاً كمصمم؟
اقرأ المكدّس من الأعلى إلى الأسفل (الإدراك، العجلة، التناسق، التباين، لوحة الألوان، النظام)، ثم طبّقه بالترتيب على مشروع حقيقي. النظرية بدون تطبيق تتلاشى في أسبوع. النظرية المطبقة على لوحة ألوان مُشحَنة تبقى لأن التغذية الراجعة فورية. ابدأ بقراءة Interaction of Color ليوزف ألبرز للإدراك، وأمضِ بعد الظهر على وثائق Radix Colors لسلالم التباين التطبيقية، وابنِ لوحة ألوان حقيقية باستخدام المكدّس أعلاه.
هل أحتاج إلى معرفة العلم أم يمكنني فقط استخدام الأدوات؟
يمكنك الشحن دون معرفة فيزياء الضوء أو بيولوجيا الخلايا المخروطية. لا يمكنك الشحن دون معرفة الإدراك والتباين والتفكير القائم على الأدوار في النظام.
الأدوات تتولى الرياضيات. المصمم يتولى الحكم. المصمم الذي يعتمد كلياً على الأدوات هو مصمم لا يستطيع اكتشاف متى تكون الأدوات خاطئة (وهو ما يحدث كثيراً، خاصة مع رياضيات WCAG 2).
ما أكبر خطأ يرتكبه المصممون الجدد مع الألوان؟
اختيار اللون المميز أولاً. اللون المميز هو الأعلى صوتاً في لوحة الألوان، وبناء بقية لوحة الألوان حول قرار واحد صاخب ينتج دائماً تقريباً لوحة ألوان صاخبة.
ابدأ بالمحايدات. دع اللون المميز يكون آخر شيء تحدده. يمكنك دائماً تغيير اللون المميز لاحقاً إذا كان بقية المكدّس سليماً.
نظرية الألوان ليست اختيارية، إنها محيطية
نظرية الألوان هي الجزء من التصميم الذي لا يجادل فيه أحد والذي يطبقه الجميع، سواء أعلموا ذلك أم لا.
المصمم الذي يختار "هذا المرجاني، يبدو صحيحاً" يطبق نظرية الألوان. مدير المنتج الذي يطلب "هل يمكننا جعل الزر يبرز أكثر" يطرح سؤالاً في نظرية الألوان. المستخدم الذي يقول "هذه الصفحة تبدو مزدحمة" يُبلِّغ عن فشل تباين القيمة.
النظرية موجودة بالفعل في الغرفة. السؤال هو ما إذا كنت تعمل عليها بوعي أو تتفاعل معها بعد الحقيقة.
العمل بالمكدّس يجعل غير المرئي مرئياً. تتوقف عن اختيار الألوان وتبدأ في تصميم لوحات الألوان. تتوقف عن اختيار الدرجات اللونية وتبدأ في تصميم الأنظمة. تتوقف عن التخمين في إمكانية الوصول وتبدأ في شحنها.
العائد يتراكم. لوحة الألوان المصممة عبر المكدّس تُعيد بناء العلامة التجارية بشكل نظيف، وتنتقل إلى الوضع الداكن بشكل نظيف، وتتوسع بشكل نظيف، وتجتاز المراجعات بشكل نظيف. لوحة الألوان المختارة بالإحساس لا تفعل أياً من هذه الأشياء وتكلف الفريق وقتاً في كل مرة يكون فيها أحدها مهماً.
تعلّم المكدّس. اعمل بالمكدّس. اشحن المكدّس.
Want a color system that actually works end to end? Brainy builds palettes from perception to tokens with accessibility baked in.
Get Started
