لوحة App UI Color Palette

أزرق إجراء أساسي، وسطح تطبيق محايد، وحالة نجاح خضراء — مجموعة الأدوار الدنيا التي تحتاجها واجهة تطبيق فعلًا. المراسي: #2563EB، #F8FAFC، #10B981.

تطبيقاتواجهاتواجهة
#2563EB
#F8FAFC
#10B981
#B4B5F8
#A0A1A6
#2563eb #f8fafc #10b981 #b4b5f8 #a0a1a6
#2563EB #F8FAFC #10B981 #B4B5F8 #A0A1A6

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

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

background#F8FAFC
surface#B4B5F8
text#2563EB
text-muted#A0A1A6
primary#10B981
secondary#B4B5F8
accent#A0A1A6

متغيّرات CSS 

:root {
  --background: #f8fafc;
  --surface: #b4b5f8;
  --text: #2563eb;
  --text-muted: #a0a1a6;
  --primary: #10b981;
  --secondary: #b4b5f8;
  --accent: #a0a1a6;
}
معاينة في الواجهات →

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

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

النص \ الخلفية#2563EB#F8FAFC#10B981#B4B5F8#A0A1A6
#2563EB
1.0
4.9
2.0
2.7
2.0
#F8FAFC
4.9
1.0
2.4
1.8
2.5
#10B981
2.0
2.4
1.0
1.3
1.0
#B4B5F8
2.7
1.8
1.3
1.0
1.3
#A0A1A6
2.0
2.5
1.0
1.3
1.0

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

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

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

#2563EB
rgb(37, 99, 235)
#F8FAFC
rgb(248, 250, 252)
#10B981
rgb(16, 185, 129)
#B4B5F8
rgb(180, 181, 248)
#A0A1A6
rgb(160, 161, 166)

لوحات مشابهة

Website Color Palette
Neutral Color Palette
Mobile App Color Palette

أسئلة شائعة

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

انسخ متغيّرات CSS أدناه إلى :root واستخدم var(--primary) وvar(--background) وغيرها. اللوحة كاملة: #2563EB, #F8FAFC, #10B981, #B4B5F8, #A0A1A6.

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

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

App UI Color Palette — #2563EB #F8FAFC #10B981 #B4B5F8 #A0A1A6 — Tintiva