لوحة Dark Color Palette

أسطح منخفضة الإضاءة مع لمسة مضيئة واحدة — الوضع الداكن والهوية الدرامية. المراسي: #0F172A، #1E293B، #334155.

داكنمزاجي
#0F172A
#1E293B
#334155
#475569
#38BDF8
#0f172a #1e293b #334155 #475569 #38bdf8
#0F172A #1E293B #334155 #475569 #38BDF8

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

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

background#38BDF8
surface#475569
text#0F172A
text-muted#1E293B
primary#1E293B
secondary#334155
accent#475569

متغيّرات CSS 

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

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

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

النص \ الخلفية#0F172A#1E293B#334155#475569#38BDF8
#0F172A
1.0
1.2
1.7
2.4
8.3
#1E293B
1.2
1.0
1.4
1.9
6.8
#334155
1.7
1.4
1.0
1.4
4.8
#475569
2.4
1.9
1.4
1.0
3.5
#38BDF8
8.3
6.8
4.8
3.5
1.0

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

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

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

#0F172A
rgb(15, 23, 42)
#1E293B
rgb(30, 41, 59)
#334155
rgb(51, 65, 85)
#475569
rgb(71, 85, 105)
#38BDF8
rgb(56, 189, 248)

لوحات مشابهة

Dark Mode UI Palette
Space Color Palette
Charcoal Color Palette

أسئلة شائعة

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

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

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

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

Dark Color Palette — #0F172A #1E293B #334155 #475569 #38BDF8 — Tintiva