لوحة Dashboard Color Palette

سطح بيانات داكن مع مجموعة حالات من أربعة ألوان (معلومة، نجاح، تحذير، خطأ) — مُدقّقة لعمى الألوان لسلاسل الرسوم البيانية. المراسي: #0F172A، #38BDF8، #10B981، #F59E0B، #EF4444.

لوحات تحكّمبياناتتحليلات
#0F172A
#38BDF8
#10B981
#F59E0B
#EF4444
#0f172a #38bdf8 #10b981 #f59e0b #ef4444
#0F172A #38BDF8 #10B981 #F59E0B #EF4444

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

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

background#38BDF8
surface#F59E0B
text#0F172A
text-muted#EF4444
primary#F59E0B
secondary#10B981
accent#EF4444

متغيّرات CSS 

:root {
  --background: #38bdf8;
  --surface: #f59e0b;
  --text: #0f172a;
  --text-muted: #ef4444;
  --primary: #f59e0b;
  --secondary: #10b981;
  --accent: #ef4444;
}
معاينة في الواجهات →

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

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

النص \ الخلفية#0F172A#38BDF8#10B981#F59E0B#EF4444
#0F172A
1.0
8.3
7.0
8.3
4.7
#38BDF8
8.3
1.0
1.2
1.0
1.8
#10B981
7.0
1.2
1.0
1.2
1.5
#F59E0B
8.3
1.0
1.2
1.0
1.8
#EF4444
4.7
1.8
1.5
1.8
1.0

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

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

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

#0F172A
rgb(15, 23, 42)
#38BDF8
rgb(56, 189, 248)
#10B981
rgb(16, 185, 129)
#F59E0B
rgb(245, 158, 11)
#EF4444
rgb(239, 68, 68)

لوحات مشابهة

Dark Mode UI Palette
App UI Color Palette
Diwali Color Palette

أسئلة شائعة

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

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

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

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

Dashboard Color Palette — #0F172A #38BDF8 #10B981 #F59E0B #EF4444 — Tintiva