لوحة Mobile App Color Palette

لون أساسي بنفسجي واثق، وسطح شبه أبيض، وحبر داكن — الأدوار الثلاثة التي يبدأ منها نظام واجهة الجوال. المراسي: #7C3AED، #F5F3FF، #111827.

جوالتطبيقاتحديث
#7C3AED
#F5F3FF
#111827
#CDA7F9
#9F9DA8
#7c3aed #f5f3ff #111827 #cda7f9 #9f9da8
#7C3AED #F5F3FF #111827 #CDA7F9 #9F9DA8

الأدوار الدلالية

تُسنَد تلقائياً: الأفتح = الخلفية، الأغمق = النص، الأكثر تشبّعاً = اللون الأساسي.

background#F5F3FF
surface#CDA7F9
text#111827
text-muted#7C3AED
primary#7C3AED
secondary#CDA7F9
accent#9F9DA8

متغيّرات CSS

:root {
  --background: #f5f3ff;
  --surface: #cda7f9;
  --text: #111827;
  --text-muted: #7c3aed;
  --primary: #7c3aed;
  --secondary: #cda7f9;
  --accent: #9f9da8;
}
معاينة في الواجهات →

مصفوفة إمكانية الوصول

لون النص (الصفوف) على الخلفية (الأعمدة). الأخضر = اجتياز WCAG AA للنص العادي (≥4.5:1).

النص \ الخلفية#7C3AED#F5F3FF#111827#CDA7F9#9F9DA8
#7C3AED
1.0
5.2
3.1
2.9
2.1
#F5F3FF
5.2
1.0
16.2
1.8
2.4
#111827
3.1
16.2
1.0
8.9
6.6
#CDA7F9
2.9
1.8
8.9
1.0
1.3
#9F9DA8
2.1
2.4
6.6
1.3
1.0

تحت عمى اللون الأخضر-الأحمر

محاكاة Machado وزملائه (2009)، شدة 1.0 — تقدير تقريبي وليست أداة طبية.

ألوان هذه اللوحة

لوحات مشابهة

أسئلة شائعة

كيف أستخدم Mobile App Color Palette في CSS؟

انسخ متغيّرات CSS أدناه إلى :root واستخدم var(--primary) وvar(--background) وغيرها. اللوحة كاملة: #7C3AED, #F5F3FF, #111827, #CDA7F9, #9F9DA8.

هل تجتاز هذه الألوان فحوصات إمكانية الوصول؟

راجع مصفوفة WCAG في هذه الصفحة: كل اقتران نص-على-خلفية بنسبة ≥ 4.5 يجتاز AA للنص العادي؛ و≥ 3 يجتاز AA للنص الكبير ومكوّنات الواجهة.

Mobile App Color Palette — #7C3AED #F5F3FF #111827 #CDA7F9 #9F9DA8 — Tintiva