لوحة Monochromatic Color Palette

خمس خطوات من لون واحد — الإضاءة هي المتغيّر الوحيد، فلا شيء يمكن أن يتنافر. المراسي: #334155، #475569، #64748B.

أحادي اللونأنيق
#334155
#475569
#64748B
#94A3B8
#CBD5E1
#334155 #475569 #64748b #94a3b8 #cbd5e1
#334155 #475569 #64748B #94A3B8 #CBD5E1

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

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

background#CBD5E1
surface#94A3B8
text#334155
text-muted#475569
primary#475569
secondary#64748B
accent#94A3B8

متغيّرات CSS 

:root {
  --background: #cbd5e1;
  --surface: #94a3b8;
  --text: #334155;
  --text-muted: #475569;
  --primary: #475569;
  --secondary: #64748b;
  --accent: #94a3b8;
}
معاينة في الواجهات →

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

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

النص \ الخلفية#334155#475569#64748B#94A3B8#CBD5E1
#334155
1.0
1.4
2.2
4.0
7.0
#475569
1.4
1.0
1.6
3.0
5.1
#64748B
2.2
1.6
1.0
1.9
3.2
#94A3B8
4.0
3.0
1.9
1.0
1.7
#CBD5E1
7.0
5.1
3.2
1.7
1.0

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

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

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

#334155
rgb(51, 65, 85)
#475569
rgb(71, 85, 105)
#64748B
rgb(100, 116, 139)
#94A3B8
rgb(148, 163, 184)
#CBD5E1
rgb(203, 213, 225)

لوحات مشابهة

Taupe Color Palette
Dark Mode UI Palette
Winter Color Palette

أسئلة شائعة

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

انسخ متغيّرات CSS أدناه إلى :root واستخدم var(--primary) وvar(--background) وغيرها. اللوحة كاملة: #334155, #475569, #64748B, #94A3B8, #CBD5E1.

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

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

Monochromatic Color Palette — #334155 #475569 #64748B #94A3B8 #CBD5E1 — Tintiva