قاعدة 60-30-10
هي أنفع قاعدة لتوزيع الألوان. جاءت من التصميم الداخلي، لكنها تصلح لأي مشروع.
- 60%: اللون الغالب. عادةً لون محايد أو درجة هادئة، ويغطي الخلفيات والمساحات الكبيرة.
- 30%: اللون الثانوي. يضيف الشخصية، واستخدمه للكتل أو القوائم أو الأثاث.
- 10%: اللون المميز. الأكثر جرأة، واستخدمه للأزرار أو الأيقونات أو التفاصيل.
مثال: أبيض مائل للرمادي بنسبة 60%، وأزرق كحلي بنسبة 30%، وبرتقالي بنسبة 10%.
لا تحتاج إلى قياس دقيق. الفكرة أن يقود لون، ويدعم آخر، ويبرز ثالث.
دور الألوان المحايدة
الألوان المحايدة هي الأبيض والأسود والرمادي والبيج والكريمي والبني الفاتح، وتتناسق مع كل شيء تقريبًا.
تمنح العين راحة وتساعد الألوان القوية على البروز. ولوحة الألوان الخالية من المحايدات تكون مُتعبة عادةً.
- الأبيض والأبيض المائل للرمادي: نظافة ومساحة.
- الرمادي: عصري وهادئ. اختر رماديًا دافئًا أو باردًا حسب باقي لوحة الألوان.
- البيج ولون الرمل: دفء وإحساس طبيعي.
- الأسود أو شبه الأسود: أناقة وتباين. وللنصوص، يكون الرمادي الداكن جدًا عادةً أريح للعين من الأسود الخالص.
التنسيق حسب الحرارة
تنقسم الألوان إلى دافئة (الأحمر والبرتقالي والأصفر) وباردة (الأزرق والأخضر والأرجواني). وهناك ثلاث طرق بسيطة لتنسيقها:
- كلها دافئة: دافئة ومفعمة بالطاقة. ممتازة للمطاعم أو العلامات الودودة.
- كلها باردة: هادئة واحترافية. ممتازة للصحة أو التقنية أو المال.
- قاعدة باردة مع لون مميز دافئ: الخيار الأكثر مرونة. اللون الدافئ يجذب العين على خلفية هادئة.
أما ما يفشل عادةً فهو مزج كثير من الألوان الدافئة والباردة القوية في وقت واحد دون لون غالب.
التباين في النصوص
اللون الجميل لا فائدة منه إذا تعذّرت قراءة النص. التباين بين النص والخلفية أساسي لسهولة القراءة وإمكانية الوصول.
- استخدم نصًا داكنًا على خلفية فاتحة، أو نصًا فاتحًا على خلفية داكنة.
- تجنّب النص الأصفر أو الأخضر الفاتح أو الرمادي الفاتح على الأبيض.
- تجنّب وضع الألوان المتكاملة المشبعة فوق بعضها، مثل الأحمر على الأخضر، فهي تهتز وتُتعب العين.
- تشترط إرشادات WCAG نسبة لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير.
يمكنك اختبار أي زوج من الألوان باستخدام أداة فحص التباين.
15 تنسيقًا للألوان ينجح دائمًا
هذه الأزواج نقاط بداية آمنة. استخدمها كأساس وأضف لونًا محايدًا أو لونًا مميزًا حسب الحاجة.
- الكحلي والكريمي: كلاسيكي وجاد وسهل القراءة.
- الأسود والذهبي: فخامة وأناقة.
- الأزرق والبرتقالي: متكاملان ومليئان بالطاقة.
- الأخضر الغامق والبيج: طبيعي وهادئ.
- الوردي والرمادي الفحمي: عصري ومتوازن.
- الأصفر والأسود: أقصى تباين، مثالي للتحذيرات.
- العنابي ولون الرمل: دافئ وراقٍ.
- الفيروزي والمرجاني: منعش وصيفي.
- الأرجواني والليلكي الفاتح: أحادي اللون ومبدع.
- البني والأخضر المريمي: ترابي، مثالي للعلامات الطبيعية.
- الرمادي ولون الخوخ: ناعم وودود.
- الأزرق البترولي والأصفر الباهت: هادئ مع لمسة من الضوء.
- التيراكوتا والأبيض المائل للرمادي: دافئ ومتوسطي.
- الأزرق المخضر الداكن والخردلي: كلاسيكي قديم ومليء بالشخصية.
- الأبيض والأحمر: مباشر وحيوي وواضح جدًا.
ستجد أفكارًا أكثر بكثير، مع أكواد HEX الخاصة بها، في صفحة تنسيقات الألوان.
الألوان التي تتناسق مع كل لون
إذا كان لديك لون رئيسي بالفعل، فهذه القائمة تمنحك نقطة بداية سريعة:
- الأحمر: الأبيض والأسود والرمادي والكحلي والبيج. ولخيار جريء، الوردي أو البرتقالي.
- البرتقالي: الكحلي والفيروزي والأبيض والكريمي والبني.
- الأصفر: الرمادي والأسود والكحلي والأبيض. والأصفر الخردلي يتناسق جيدًا مع الأخضر الداكن.
- الأخضر: البيج والأبيض والبني والذهبي والوردي الهادئ.
- الأزرق: الأبيض والبرتقالي والرمادي والأصفر والمرجاني. والكحلي يعمل تقريبًا كلون محايد.
- الأرجواني: الرمادي والليلكي والذهبي والأخضر المريمي والأبيض.
- الوردي: الرمادي والكحلي والأخضر الزيتوني والأبيض والذهبي.
- البني: الكريمي والأخضر والأزرق البترولي والبرتقالي والأبيض المائل للرمادي.
لاحظ أن الألوان المحايدة تظهر في كل قائمة تقريبًا، فهي الطريقة الأكثر أمانًا لتنسيق لون قوي.
كيف تصنع تنسيقك الخاص
- اختر لونًا رئيسيًا حسب ما تريد التعبير عنه.
- ابحث عن لون ثانوي في دائرة الألوان: لون مجاور لنتيجة هادئة، أو لون مقابل لنتيجة لافتة.
- أضف لونًا أو لونين محايدين.
- اختر لونًا مميزًا واحدًا لأهم العناصر.
- جرّب لوحة الألوان على مثال حقيقي: صفحة ويب أو شريحة عرض أو صورة للغرفة.
عند الشك، استخدم ألوانًا أقل. من ثلاثة إلى خمسة ألوان تكفي لأي مشروع تقريبًا.
أخطاء شائعة في الألوان
- استخدام ألوان كثيرة جدًا. تبدو النتيجة فوضوية ولا يبرز شيء.
- إعطاء كل الألوان الوزن نفسه. دون لون غالب، لا تعرف العين أين تنظر.
- نسيان التباين. نصوص لا تُقرأ أو أزرار لا يراها أحد.
- تشبيع كل شيء. الألوان الزاهية جدًا مُتعبة. اجمعها مع درجات أهدأ.
- تجاهل السياق. يبدو اللون مختلفًا في ضوء النهار وعلى الشاشة وفي الطباعة.
- النسخ دون تكييف. لوحة الألوان التي تنجح مع علامة ما قد لا تناسب جمهورك.
- مزج ألوان محايدة بحرارات مختلفة. الرمادي البارد بجانب البيج الدافئ قد يبدو باهتًا وموحلًا. اختر المحايدات من العائلة نفسها.
- عدم الاختبار على عدة شاشات. قد يبدو اللون رائعًا على حاسوبك وباهتًا على الهاتف. تحقّق دائمًا على أكثر من جهاز.