أدواتكيف تختار ألوان موقعك أو مشروعك
وقت القراءة: 3 د
لاختيار ألوان الموقع ابدأ بلون رئيسي واحد يناسب موضوعك، وابنِ حوله لوحة صغيرة بـمولّد لوحات الألوان، وتأكد أن نصّك مقروء بفاحص تباين، ثم دوّن الألوان النهائية كمتغيرات CSS. وأغلب اللوحات الجيدة تستخدم لونًا رئيسيًّا واحدًا ولونًا محايدًا أو اثنين ولون إبراز واحدًا.
يمر هذا الدليل بالعملية بالترتيب، مع الأرقام المهمة للقراءة، لتختار ألوانك بأسباب لا بالتخمين.
الخطوات
من المفيد أن تعرف لمن الموقع وما الإحساس الذي تريده منه. دوّن ثلاث كلمات مثل «هادئ، موثوق، عصري».
- 1
اختر اللون الرئيسي
اختر لونًا واحدًا يناسب موضوعك وجمهورك. وإن كان لديك شعار فخذ أقوى ألوانه. وإن انطلقت من صورة فـاستخرج ألوانها واختر البارز منها.
- 2
ولّد لوحة حوله
افتح مولّد اللوحات، واقفل لونك الرئيسي وجرّب أنماط التناسق: المتجاور للهدوء، والمتكامل للتباين، وأحادي اللون للمظهر النظيف. واضغط مسطرة المسافة حتى تتوازن اللوحة.
- 3
وزّع الأدوار
حدّد أي لون للخلفية وأيها للنص وأيها اللون الرئيسي للعلامة وأيها لون الإبراز للأزرار والروابط. واحتفظ بلون الإبراز للأشياء القليلة التي تريد أن تُلاحَظ.
- 4
افحص التباين
استخدم محوّل الألوان وفاحص التباين على كل زوج نص وخلفية. استهدف 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير. واستخدم «اقترح لونًا ناجحًا» لتعديل اللون بالقدر اللازم.
- 5
جرّب على صفحة حقيقية
ضع الألوان على صفحة حقيقية أو نموذج وانظر إليها على جوالك وحاسوبك، في غرفة مضاءة وأخرى خافتة. فالألوان تبدو مختلفة على الشاشات المختلفة.
- 6
احفظها كمتغيرات
صدّر اللوحة كمتغيرات CSS أو إعداد Tailwind واستخدم الأسماء في ملف التنسيق، لتغيّر اللون من مكان واحد لاحقًا.
قاعدة 60-30-10 التقريبية
توازن بسيط ينجح في تصاميم كثيرة: نحو 60% لخلفية محايدة، و30% للون ثانوي، و10% للون إبراز. وهي إرشاد لا قانون، لكنها تحميك من أشهر الأخطاء: استخدام ألوان قوية كثيرة معًا. ويعمل لون الإبراز لأنه قليل.
لماذا الإضاءة أهم من الدرجة اللونية
يلاحظ الناس فروق الإضاءة قبل فروق الدرجة اللونية، ولهذا تبدو اللوحة المبنية على درجات إضاءة متساوية الخطوات منظمة. ويعمل مولّد اللوحات بنظام OKLCH المصمم ليبدو فيه التغيّر المتساوي في الإضاءة متساويًا، فتبقى اللوحات متوازنة. ومحايد فاتح وآخر داكن ولون رئيسي متوسط تمنحك هيكل أي واجهة تقريبًا.
إمكانية الوصول والدلالة
التباين ليس زينة: النص قليل التباين يصعب على كثيرين قراءته وفي الإضاءة القوية. ولا تعتمد على اللون وحده لإظهار شيء، كالأحمر للخطأ دون أيقونة أو نص. وتحمل الألوان دلالات مختلفة في الثقافات والمجالات، فجرّب خياراتك مع من تصمم لهم.
مشاكل شائعة وحلولها
اللوحة تبدو باهتة أو مسطحة
قد تكون الألوان متقاربة في الإضاءة. اجعل أحدها أفتح بوضوح وآخر أغمق بوضوح، وأبقِ لون الإبراز أكثر تشبعًا من البقية.
النص على اللون الرئيسي صعب القراءة
افحص الزوج بفاحص التباين. وغالبًا يكون الحل بتغميق الخلفية قليلًا أو باستخدام نص أسود أو أبيض، وتقترحه أداة اللوحات لكل بطاقة.
الألوان كثيرة جدًا
قلّصها إلى لون رئيسي واحد ومحايدين ولون إبراز. واستخدم درجات فاتحة وغامقة من اللون نفسه بدل ألوان جديدة.
الألوان تبدو مختلفة على جهاز آخر
تختلف الشاشات في السطوع والمعايرة. اختر ألوانًا بتباين كافٍ لا تؤثر فيه الفروق الصغيرة، وجرّب على جهازين على الأقل.
الأسئلة الشائعة
كم لونًا ينبغي أن يكون في الموقع؟
عادةً لون رئيسي واحد ومحايد أو اثنان للخلفيات والنص ولون إبراز، مع درجات فاتحة وغامقة منها. وأكثر من ذلك يبدو مزدحمًا غالبًا.
ما نسبة التباين المطلوبة للنص؟
يطلب مستوى WCAG AA نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير. ويطلب AAA نسبة 7:1 و4.5:1.
هل أستطيع أخذ الألوان من صورة؟
نعم. ارفع الصورة في أداة ألوان الصورة لترى ألوانها السائدة، ثم افتحها في مولّد اللوحات.