نظرية الألوان للمصممين: النظام خلف كل لوحة جيدة
نظرية الألوان للمصممين الممارسين. العجلة، التناغمات، الإدراك، علم النفس، إمكانية الوصول، وكيف تحولها أنظمة التصميم الحديثة إلى منتج.
تُدرَّس نظرية الألوان كجولة في تاريخ الفن وتُمارَس كهندسة بناء. عجلات، تناغمات، ألوان مكملة. دافئ وبارد.
"الأحمر يعني العاطفة." هذه هي المصنوعات التي يحصل عليها معظم المصممين في المدرسة، وتقريبًا لا شيء منها ينجو من التماس مع واجهة منتج حقيقية.
ما يحتاجه المصممون الممارسون فعلاً هو مجموعة مكدّسة. نظام مطبّق بطبقات يمتد من كيفية إدراك العين للون، عبر العجلة وتناغماتها، إلى التباين والتسلسل الهرمي، عبر علم النفس والثقافة، صعودًا عبر بناء اللوحة، وأخيرًا إلى التوكنات وأنظمة التصميم التي تُنتج العمل. تخطى طبقة واحدة، فتبدو اللوحة جيدة في Figma وتنهار في الإنتاج.
هذه الورقة هي كامل المكدّس. كل طبقة لها ورقة Brainy مخصصة للتعمق أكثر. هنا نربطها معًا.
ما الذي تطلب منك نظرية الألوان حلّه فعلاً
نظرية الألوان ليست مجموعة قواعد جمالية، بل مكدّس من البصر والإدراك والتفكير المنهجي الذي يجب أن يعمل كله معًا قبل أن تُطلَق لوحة.
النسخة القصيرة: البصر البشري غريب، واللون مادي، والمصممون عليهم أن يصنعوا مخرجات تعمل لملايين الناس عبر مئات الأجهزة في عشرات السياقات. النظرية هي المفردات التي نستخدمها للتفكير في تلك المشكلة. ليست مجموعة وصايا. هي مجموعة المفاهيم المشتركة التي تتيح لك الانتقال من "هذا يبدو خاطئًا" إلى "لون التمييز يتنافس مع الخلفية والتباين يفشل عند 14pt".
المكدّس طبقي عن قصد. كل طبقة تجيب عن سؤال مختلف.
| الطبقة | السؤال الذي تجيب عنه |
|---|---|
| الإدراك | كيف ترى العين هذا اللون فعلاً في السياق؟ |
| العجلة | ما علاقة درجات الألوان بين هذه الألوان؟ |
| التناغم | هل تبدو هذه الألوان مترابطة أم متضاربة؟ |
| التباين | هل يمكن قراءته ورؤيته والنقر عليه؟ |
| اللوحة | ما الألوان التي تملكها هذه العلامة أو هذا المنتج؟ |
| النظام | كيف تُطبَّق تلك الألوان باتّساق على نطاق واسع؟ |
| إمكانية الوصول | هل يعمل كل اقتران في النظام لكل مستخدم؟ |
كل طبقة حاملة. لوحة مصممة بدون تفكير إدراكي تفشل في السياق. نظام مبني بدون إمكانية وصول يفشل في التدقيق.
تناغم مختار بدون منطق لوحة يفشل على نطاق واسع. الطبقات تتراكم، ولهذا يدفع الحصول على اللون بشكل صحيح أرباحًا مركبة.
العجلة والتناغمات ولماذا توجد فعلاً
عجلة الألوان هي نموذج لعلاقات درجات الألوان، والتناغمات اختصارات لاختيار أزواج ومجموعات تقرأها العين كمترابطة.
معظم المصممين يتعلمون العجلة كمثلثات أساسية-ثانوية-ثلاثية ولا يستخدمونها مرة أخرى أبدًا. هذا هدر. العجلة هي أسرع طريقة للتفكير في الألوان التي تنتمي معًا والألوان التي تتقاتل، وهو ما يهم كل مرة تضيف فيها لونًا جديدًا إلى لوحة أو مخطط أو علامة.
أربعة تناغمات تستحق مكانها في عمل المنتجات والعلامات التجارية.
المكمل
ألوان متقابلة على العجلة. أزرق وبرتقالي، أحمر وأخضر، بنفسجي وأصفر. المكمّلات تخلق أعلى توتر بصري ممكن بين درجتي لون.
هذا رائع للتأثير في لحظة واحدة (ملصق، صورة بطلة، زيّ رياضي) ومروّع للاستخدام المطوّل في الواجهات، ولهذا السبب لا ترى تقريبًا أبدًا لوحات منتج مكمّلة خالصة. في واجهات المستخدم، تُخفّف المكمّلات: درجة تهيمن، والأخرى تظهر كلمسة مميزة مقيدة.
المتجانس
ألوان متجاورة على العجلة. أزرق سماوي، أزرق، أزرق-بنفسجي. اللوحات المتجانسة تبدو متناسقة وهادئة.
هي أساس معظم أنظمة العلامات التجارية الحديثة. الخطر أنها قد تبدو رتيبة إذا لم يكن هناك تباين قيمي كافٍ بين درجات الألوان. التجانس يعمل عندما تعامل لوحة الألوان كعائلة، لا كمجموعة من المنافسين.
الثلاثي والمكمّل المقسّم: الزوج المُستخدم أقل مما يستحق
المكمّل والمتجانس يحظيان بمعظم الانتباه في مدرسة التصميم. التناغمان التاليان أقل نقاشًا، وللمصممين الممارسين غالبًا أكثر فائدة.
الثلاثي
ثلاث درجات ألوان متباعدة بالتساوي حول العجلة. أحمر-أصفر-أزرق. برتقالي-أخضر-بنفسجي. اللوحات الثلاثية تبدو مرحة وعالية الطاقة، ولهذا السبب تظهر في علامات الأطفال والرياضة والترفيه.
في تصميم المنتجات، الثلاثي الخالص نادر لأنه صعب في التوازن. اللوحات المستوحاة من الثلاثي (درجة مهيمنة، واثنتان أخريان مكتومتان) موجودة في كل مكان.
المكمّل المقسّم
درجة واحدة إضافة إلى الدرجتين المجاورتين لمكملها. أزرق مع أصفر-برتقالي وأحمر-برتقالي. المكمل المقسّم يحتفظ بمعظم تباين المكمّل بتوتر أقل. هو التناغم الذي لا يحظى بالتقدير الكافي الذي يظهر في كثير من أنظمة العلامات التجارية المُنفّذة جيدًا إذا بحثت عنه.
التناغمات أدوات، لا إجابات. لا تختار لوحة علامة تجارية بقول "هيّا نعمل ثلاثيًا". تستخدم التناغمات للتفكير في التوليفات المقترحة ورصد تلك التي تعمل بالفعل.
الإدراك يتغلّب على النظرية في كل مرة
نفس الأحمر على نفس الزر يُقرأ كعاجل على صفحة محايدة، وصاخب على صفحة برتقالية، وغير مرئي على صفحة حمراء داكنة، وأيّ من ذلك لا تفسّره العجلة.
السياق هو مُضاعِف القوة في اللون. اللون ليس له معنى ثابت، ولا سطوع ثابت، ولا قابلية قراءة ثابتة. له علاقة بما يكون بجانبه، وما كان على الشاشة قبل ثانية، وما الشاشة التي ينظر إليها المستخدم، والضوء الذي يضرب تلك الشاشة. النظرية بدون إدراك هي نظرية في فراغ.
ثلاثة تأثيرات إدراكية جديرة بالمعرفة بالاسم.
التباين المتزامن. نفس الرمادي يبدو أفتح بجانب الأسود وأغمق بجانب الأبيض. الدلالة: لون علامة تجارية تختاره مقابل خلفية استوديو بيضاء سيبدو مختلفًا تمامًا عندما يُسقَط على قسم بطل داكن. عليك اختبار الألوان في سياق إنتاجها، لا في عزلة.
التكيف اللوني. تتكيف العين مع اللون المحيط خلال 500ms أو أقل. صفحة قضت خمس ثوانٍ على قسم بطل برتقالي دافئ قبل التمرير إلى منطقة محتوى محايدة ستبدو أبرد قليلاً مما هي عليه منطقة المحتوى فعلاً. إدراك المستخدم تحوّل دون أن يلاحظ.
تجميع القيم. تجمع العين العناصر متشابهة السطوع على أنها مترابطة، وتلك متشابهة الظلام على أنها منفصلة. هكذا يعمل التسلسل الهرمي. تصميم قوي يستفيد من تباين القيم أكثر من تباين درجات الألوان لأن القيمة هي ما يعالجه النظام البصري أولاً.
علم نفس الألوان: الدليل مقابل الخرافة
علم نفس الألوان حقيقي، لكن معظم ما يُسمى علم نفس الألوان أساطير مُعاد تدويرها، ولهذا السبب يحتاج المصممون إلى فصل الدليل عن الفولكلور.
توجد أبحاث حقيقية حول دراسة Loyola للتعرف على العلامات التجارية (اللون يدفع ما يصل إلى 80% من التعرف على العلامة التجارية)، وحول تأثيرات التشبع على الإلحاح المُدرَك، وحول تفضيلات الوضع الداكن، وحول الارتباطات الثقافية بالألوان. هذا مفيد. وهناك أيضًا وفرة من تدوينات المدوّنات تدّعي "الأحمر يزيد التحويل 21%" وتتفكك عند أدنى فحص. هذا ليس مفيدًا.
الاختبار السريع: أي ادعاء بعلم نفس الألوان لا يتضمن السياق أو الثقافة أو الجمهور هو خرافة. معنى اللون سياقي، دائمًا. الأخضر يُقرأ كمال في شركات fintech الأمريكية وكطبيعة في العافية، وكلاهما صحيح في سياقه.
للتحليل الكامل لما هو حقيقي وما هو مُعاد تدويره وكيفية تطبيق علم نفس الألوان فعلاً في عمل العلامات والمنتجات، يحتوي مقال علم نفس الألوان في التصميم على الإطار المستند إلى الأدلة.
لماذا انكسرت قواعد النسب على نطاق المنتج
قاعدة 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 درجة رمادية (أو قريبة من الرمادي، غالبًا ممائلة قليلاً نحو درجة حرارة العلامة). معظم واجهة حقيقية هي ألوان محايدة. هذه هي الأساس الذي تستند إليه كل طبقة أخرى.
-
اختر لون العلامة المميز. لون مرساة واحد، الشيء الوحيد الذي سيربطه القارئ بالعلامة إذا رآه بمفرده. الانضباط هنا هو اللعبة كلها. احتفظ بطبقة التمييز للحظات العلامة والإجراءات الأساسية والعناصر ذات الإشارة العالية.
-
أضف ألوانًا دلالية. النجاح، التحذير، الحرج، المعلومات. هذه وظيفية، لا زخرفية، وتحتاج إلى العمل عبر الوضعين الفاتح والداكن دون حمل شخصية العلامة. تعامل معها كأداة، لا كنكهة.
-
توسّع إلى طبقة حالة. هاور، تركيز، pressed، disabled، selected. عادة ما تُشتق من الطبقات الأخرى (لون تمييز أغمق للهاور، محايد مكتوم لـdisabled) لكنها توكنات خاصة بها.
-
حوّل كل شيء إلى توكنات. كل اقتران يُطلَق يحتاج إلى اسم دور.
text-on-accent،bg-subtle،border-default. إذا استطاع المصمم الوصول إلى لون خام بدون توكن، فاللوحة تتسرّب بالفعل. -
اختبر ضد الإدراك، لا ضد الرياضيات فقط. نسب WCAG أولاً، ثم نتائج APCA، ثم اختبارات العالم الحقيقي: وضع تدرج الرمادي، اختبار الحَول، معاينة الإضاءة المنخفضة، ردود فعل خمس ثوانٍ من أشخاص لا يعملون على العلامة.
-
أطلق الوضع الداكن كمجموعة توكنات موازية. ليس فلترًا. ليس انعكاسًا. لوحة موازية مناسبة تحلّ نفس التوكنات إلى قيم مختلفة.
ابنِ بالترتيب، لا في جلسة واحدة
الترتيب مهم لأن المحايدات تقوم بالعمل الثقيل على أي صفحة، والمصممون الذين يبدؤون بـلون التمييز ينتهون ببناء بقية اللوحة حول قرار قد لا يصمد. ابدأ بالطبقة الهادئة. أضف الطبقة الصاخبة أخيرًا.
أنظمة التصميم كنظرية ألوان مطبقة
أفضل مادة مرجعية لنظرية الألوان اليوم ليست كتابًا مدرسيًا، بل مستندات أنظمة التصميم العامة للعلامات التجارية التي تُنتج على نطاق واسع.
هذه الأنظمة تُدمج كل طبقة من المكدّس في الإعدادات الافتراضية. كما أنها مجانية ومفتوحة وتصونها أشخاص يُنتجون لون المنتج كل يوم.
Material Design 3
شاهده مباشرة على m3.material.io
Material 3 هو الأكثر صراحة حول نظرية الألوان كنظام مطبق. كل دور لديه نظير on- مقترن (نص/أيقونات تجلس فوق ذلك الدور)، تُشتق المقاييس من الدرجة-الكروما-النغمة بدلاً من HSL، والنظام كله مبني للتطبيق الديناميكي للسمات من لون مصدر واحد.
ما الذي تأخذه منه: نمط on-. عندما يختار المصمم primary لزر، يعرف النظام بالفعل ما يجب أن يكون عليه لون النص على ذلك الزر. إمكانية الوصول ونظرية التباين مخبوزة في التسمية.
Radix Colors
Radix يوفر مقاييس من 12 درجة لكل درجة لون مع كل درجة مُعيَّنة لدور محدد (خلفية التطبيق، خلفية دقيقة، عنصر واجهة المستخدم، هاور، تركيز، active، صلب، نص، نص عالي التباين). هو فعليًا مرجع تناغم ألوان مُثبّت على سلم تباين. يمدّ المصممون يدهم إلى الدرجة 11 عندما يحتاجون إلى نص عالي التباين ويعرفون أنه سيمرّ AA مقابل الدرجات الأدنى.
ما الذي تأخذه منه: السلم المرقّم. إعطاء كل درجة من مقياس دورًا يزيل نقاش "أي رمادي أستخدم" من كل مراجعة تصميم.
Adobe Spectrum: التوحيد الإدراكي على نطاق واسع
يحلّ Material وRadix اللون في طبقة الأدوار. Adobe يتعمق أكثر، فيبني المقاييس ذاتها على نماذج إدراكية بحيث تصمد علاقات التباين عند دوران درجات الألوان.
شاهده مباشرة على spectrum.adobe.com
يستخدم Spectrum مقاييس موحّدة إدراكيًا بحيث يكون لتوكنين بنفس رقم الدرجة نفس الثقل البصري عبر كل درجة لون. هذا يعني أن السمة يمكن أن تدور من الأزرق إلى البرتقالي دون كسر التباين، لأن العلاقات الإدراكية مقفلة على مستوى المقياس.
ما الذي تأخذه منه: التوحيد الإدراكي. إذا كان مقياسك مبنيًا على نماذج إدراكية مثل OKLCH أو HSLuv، تصبح إمكانية الوصول قابلة للنقل عبر سمات العلامة التجارية بدلاً من شيء يُعاد التحقق منه عند كل لون جديد.
الأسئلة الشائعة
كيف أتعلم نظرية الألوان فعلاً كمصمم؟
اقرأ المكدّس من أعلى إلى أسفل (الإدراك، العجلة، التناغم، التباين، اللوحة، النظام)، ثم طبّقها بالترتيب على مشروع حقيقي. النظرية بدون تطبيق تتلاشى في أسبوع. النظرية المطبقة على لوحة مُطلقة تلتصق لأن التغذية الراجعة فورية. ابدأ بقراءة Interaction of Color لـJosef Albers للإدراك، واقضِ فترة ما بعد الظهر على مستندات 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
