لوحة Complementary Color Palette

لونان يفصل بينهما 180° — أقصى تباين لوني، مثالي للمسات البطل ودعوات الإجراء. المراسي: #1E5F9E، #F07B3F، #F5F5F5.

متكاملجسور
#1E5F9E
#F07B3F
#F5F5F5
#1B2A4A
#C9D6EA
#1e5f9e #f07b3f #f5f5f5 #1b2a4a #c9d6ea
#1E5F9E #F07B3F #F5F5F5 #1B2A4A #C9D6EA

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

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

background#F5F5F5
surface#C9D6EA
text#1B2A4A
text-muted#1E5F9E
primary#1E5F9E
secondary#F07B3F
accent#C9D6EA

متغيّرات CSS 

:root {
  --background: #f5f5f5;
  --surface: #c9d6ea;
  --text: #1b2a4a;
  --text-muted: #1e5f9e;
  --primary: #1e5f9e;
  --secondary: #f07b3f;
  --accent: #c9d6ea;
}
معاينة في الواجهات →

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

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

النص \ الخلفية#1E5F9E#F07B3F#F5F5F5#1B2A4A#C9D6EA
#1E5F9E
1.0
2.4
6.0
2.2
4.5
#F07B3F
2.4
1.0
2.5
5.2
1.9
#F5F5F5
6.0
2.5
1.0
13.0
1.4
#1B2A4A
2.2
5.2
13.0
1.0
9.7
#C9D6EA
4.5
1.9
1.4
9.7
1.0

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

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

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

#1E5F9E
rgb(30, 95, 158)
#F07B3F
rgb(240, 123, 63)
#F5F5F5
Whitesmoke
#1B2A4A
Navy Blue
#C9D6EA
rgb(201, 214, 234)

لوحات مشابهة

Minimal Color Palette
Navy Blue Color Palette
Website Color Palette

أسئلة شائعة

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

انسخ متغيّرات CSS أدناه إلى :root واستخدم var(--primary) وvar(--background) وغيرها. اللوحة كاملة: #1E5F9E, #F07B3F, #F5F5F5, #1B2A4A, #C9D6EA.

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

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

Complementary Color Palette — #1E5F9E #F07B3F #F5F5F5 #1B2A4A #C9D6EA — Tintiva