لوحة Spring Color Palette

أخضر منعش، ووردي متفتّح، وأصفر شمسي باهت. فاتحة ومتفائلة ونظيفة.

ربيعمنعشناعم
#A8D8B9
#F9C8D5
#FDE8B6
#BFE3F0
#D5E8C4
#a8d8b9 #f9c8d5 #fde8b6 #bfe3f0 #d5e8c4
#A8D8B9 #F9C8D5 #FDE8B6 #BFE3F0 #D5E8C4

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

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

background#FDE8B6
surface#D5E8C4
text#A8D8B9
text-muted#F9C8D5
primary#BFE3F0
secondary#F9C8D5
accent#D5E8C4

متغيّرات CSS 

:root {
  --background: #fde8b6;
  --surface: #d5e8c4;
  --text: #a8d8b9;
  --text-muted: #f9c8d5;
  --primary: #bfe3f0;
  --secondary: #f9c8d5;
  --accent: #d5e8c4;
}
معاينة في الواجهات →

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

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

النص \ الخلفية#A8D8B9#F9C8D5#FDE8B6#BFE3F0#D5E8C4
#A8D8B9
1.0
1.1
1.3
1.2
1.2
#F9C8D5
1.1
1.0
1.2
1.1
1.1
#FDE8B6
1.3
1.2
1.0
1.1
1.1
#BFE3F0
1.2
1.1
1.1
1.0
1.1
#D5E8C4
1.2
1.1
1.1
1.1
1.0

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

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

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

#A8D8B9
rgb(168, 216, 185)
#F9C8D5
rgb(249, 200, 213)
#FDE8B6
rgb(253, 232, 182)
#BFE3F0
rgb(191, 227, 240)
#D5E8C4
rgb(213, 232, 196)

لوحات مشابهة

Pistachio Color Palette
Mint Color Palette
Apricot Color Palette

أسئلة شائعة

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

انسخ متغيّرات CSS أدناه إلى :root واستخدم var(--primary) وvar(--background) وغيرها. اللوحة كاملة: #A8D8B9, #F9C8D5, #FDE8B6, #BFE3F0, #D5E8C4.

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

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

Spring Color Palette — #A8D8B9 #F9C8D5 #FDE8B6 #BFE3F0 #D5E8C4 — Tintiva