لوحة Minimal Color Palette

أبيض، وأبيض مكسور، ورمادي متوسط، وشبه أسود. لا شيء غير ذلك. أقصى وضوح.

بسيطمحايدنظيف
#FFFFFF
#F5F5F5
#9E9E9E
#212121
#ffffff #f5f5f5 #9e9e9e #212121
#FFFFFF #F5F5F5 #9E9E9E #212121

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

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

background#FFFFFF
surface#F5F5F5
text#212121
text-muted#9E9E9E
primary#F5F5F5
secondary#9E9E9E
accent#9E9E9E

متغيّرات CSS 

:root {
  --background: #ffffff;
  --surface: #f5f5f5;
  --text: #212121;
  --text-muted: #9e9e9e;
  --primary: #f5f5f5;
  --secondary: #9e9e9e;
  --accent: #9e9e9e;
}
معاينة في الواجهات →

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

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

النص \ الخلفية#FFFFFF#F5F5F5#9E9E9E#212121
#FFFFFF
1.0
1.1
2.7
16.1
#F5F5F5
1.1
1.0
2.5
14.8
#9E9E9E
2.7
2.5
1.0
6.0
#212121
16.1
14.8
6.0
1.0

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

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

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

#FFFFFF
White
#F5F5F5
Whitesmoke
#9E9E9E
rgb(158, 158, 158)
#212121
rgb(33, 33, 33)

لوحات مشابهة

White Color Palette
Off White Color Palette
Black Color Palette

أسئلة شائعة

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

انسخ متغيّرات CSS أدناه إلى :root واستخدم var(--primary) وvar(--background) وغيرها. اللوحة كاملة: #FFFFFF, #F5F5F5, #9E9E9E, #212121.

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

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

Minimal Color Palette — #FFFFFF #F5F5F5 #9E9E9E #212121 — Tintiva