في التطبيق، تشير الألوان إلى ما يمكن لمسه، وما هو نشط، وما نجح أو فشل. تتضمن هذه اللوحات الاثنتا عشرة خلفية وأسطحًا ولونًا رئيسيًا ونصًا حسب نوع التطبيق، مع أكواد HEX يمكنك نقلها إلى Figma أو Flutter أو SwiftUI أو React Native.
تقنية مالية بالأزرق والأخضر
الأزرق للثقة، والأخضر للأرصدة والعمليات الناجحة.
توصيل برتقالي
يُبرز البرتقالي أزرار الطلب والعروض.
صحة وعافية
هادئة؛ لتطبيقات المواعيد الطبية والعادات والمتابعة.
وضع داكن بنفسجي
خلفية رمادية داكنة جدًا بدل الأسود الخالص، مع لون تمييز بنفسجي فاتح.
تواصل اجتماعي بالوردي والبنفسجي
للشبكات الاجتماعية وتطبيقات التعارف وصنّاع المحتوى.
إنتاجية بسيطة
سهلة القراءة جدًا؛ لمديري المهام وأدوات العمل.
تعليم بالأصفر
مبهجة وواضحة؛ لتطبيقات اللغات والتعلّم.
لياقة نشيطة
ليموني وأحمر على خلفية داكنة؛ للتمارين والقياسات.
تأمل بالخزامي
ناعمة وهادئة؛ للنوم والتأمل والمذكرات الشخصية.
سفر بالفيروزي والرملي
توحي بالشاطئ والشمس؛ للحجوزات وأدلة السفر.
طعام طازج بالأخضر
للسوبرماركت والوصفات والتغذية.
تسوق راقٍ
محايدة وأنيقة؛ تترك البطولة لصور المنتجات.
اضغط على أي لون لنسخ كود HEX الخاص به. أيقونة القلم تفتح اللوحة في المحرر لتعديلها.
حدّد ألوان الحالات منذ البداية
يحتاج كل تطبيق ألوانًا للخطأ والنجاح والتحذير والمعلومات. اختر درجات تنسجم مع لوحتك، ولا تستخدم لون الخطأ لأشياء أخرى مثل أزرار العلامة. وأرفق اللون بأيقونة أو نص ليُفهم دون الاعتماد عليه وحده.
صمّم الوضع الداكن أيضًا
تدعم معظم الهواتف الوضع الداكن، وكثير من المستخدمين يفعّلونه. لا يكفي عكس الألوان: استخدم درجات رمادي داكنة جدًا بدل الأسود الخالص، وخفّف تشبع ألوان التمييز قليلًا حتى لا تبدو مهتزة فوق الخلفية.
تحقق من التباين ومناطق اللمس
يجب أن يكون تباين النص مع خلفيته 4.5:1 على الأقل وفق WCAG. ويجب أن تبدو الأزرار مختلفة عندما تكون نشطة أو مضغوطة أو معطلة. جرّب التطبيق في الهواء الطلق وبسطوع منخفض، فهكذا يستخدمه كثير من الناس.