لوحة Split Complementary Color Palette

مرساة واحدة مع اللونين المجاورين لمكمّلها — تباين قوي بحواف أنعم من الاقتران المتكامل الصافي. المراسي: #1E5F9E، #F0A63C، #E86A4A.

متكامل منقسممتوازن
#1E5F9E
#F0A63C
#E86A4A
#F5F5F5
#1B2A4A
#1e5f9e #f0a63c #e86a4a #f5f5f5 #1b2a4a
#1E5F9E #F0A63C #E86A4A #F5F5F5 #1B2A4A

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

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

background#F5F5F5
surface#F0A63C
text#1B2A4A
text-muted#1E5F9E
primary#1E5F9E
secondary#F0A63C
accent#E86A4A

متغيّرات CSS 

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

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

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

النص \ الخلفية#1E5F9E#F0A63C#E86A4A#F5F5F5#1B2A4A
#1E5F9E
1.0
3.2
2.1
6.0
2.2
#F0A63C
3.2
1.0
1.6
1.9
6.9
#E86A4A
2.1
1.6
1.0
2.9
4.5
#F5F5F5
6.0
1.9
2.9
1.0
13.0
#1B2A4A
2.2
6.9
4.5
13.0
1.0

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

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

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

#1E5F9E
rgb(30, 95, 158)
#F0A63C
rgb(240, 166, 60)
#E86A4A
rgb(232, 106, 74)
#F5F5F5
Whitesmoke
#1B2A4A
Navy Blue

لوحات مشابهة

Gray Color Palette
Minimal Color Palette
Navy Blue Color Palette

أسئلة شائعة

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

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

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

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

Split Complementary Color Palette — #1E5F9E #F0A63C #E86A4A #F5F5F5 #1B2A4A — Tintiva