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