لوحة Dark Mode UI Palette

نظام واجهة داكن متعدّد الطبقات: أسطح رمادية زرقاء عميقة، ارتفاعات متدرّجة، نصوص رمادية هادئة، ولمسة زرقاء سماوية واحدة. كل مستويات النص تحقّق WCAG AA على أسطحها المقصودة.

داكنواجهاتمطوّرون
#0F172A
#1E293B
#334155
#64748B
#94A3B8
#38BDF8
#0f172a #1e293b #334155 #64748b #94a3b8 #38bdf8
#0F172A #1E293B #334155 #64748B #94A3B8 #38BDF8

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

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

background#38BDF8
surface#94A3B8
text#0F172A
text-muted#1E293B
primary#1E293B
secondary#334155
accent#64748B

متغيّرات CSS 

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

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

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

النص \ الخلفية#0F172A#1E293B#334155#64748B#94A3B8#38BDF8
#0F172A
1.0
1.2
1.7
3.8
7.0
8.3
#1E293B
1.2
1.0
1.4
3.1
5.7
6.8
#334155
1.7
1.4
1.0
2.2
4.0
4.8
#64748B
3.8
3.1
2.2
1.0
1.9
2.2
#94A3B8
7.0
5.7
4.0
1.9
1.0
1.2
#38BDF8
8.3
6.8
4.8
2.2
1.2
1.0

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

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

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

#0F172A
rgb(15, 23, 42)
#1E293B
rgb(30, 41, 59)
#334155
rgb(51, 65, 85)
#64748B
rgb(100, 116, 139)
#94A3B8
rgb(148, 163, 184)
#38BDF8
rgb(56, 189, 248)

لوحات مشابهة

Dark Color Palette
Space Color Palette
Website Color Palette

أسئلة شائعة

كيف أستخدم Dark Mode UI Palette في CSS؟

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

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

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

Dark Mode UI Palette — #0F172A #1E293B #334155 #64748B #94A3B8 #38BDF8 — Tintiva