لوحة E-commerce Color Palette

واجهة متجر محايدة مع دعوة إجراء برتقالية عالية الوضوح وشارة ثقة خضراء — تباين مناسب للدفع في كل الصفحة. المراسي: #111827، #F97316، #FFFFFF، #059669.

تجارة إلكترونيةتجزئةدعوة لاتخاذ إجراء
#111827
#F97316
#FFFFFF
#059669
#8B8D96
#111827 #f97316 #ffffff #059669 #8b8d96
#111827 #F97316 #FFFFFF #059669 #8B8D96

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

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

background#FFFFFF
surface#F97316
text#111827
text-muted#059669
primary#059669
secondary#F97316
accent#8B8D96

متغيّرات CSS 

:root {
  --background: #ffffff;
  --surface: #f97316;
  --text: #111827;
  --text-muted: #059669;
  --primary: #059669;
  --secondary: #f97316;
  --accent: #8b8d96;
}
معاينة في الواجهات →

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

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

النص \ الخلفية#111827#F97316#FFFFFF#059669#8B8D96
#111827
1.0
6.3
17.7
4.7
5.4
#F97316
6.3
1.0
2.8
1.3
1.2
#FFFFFF
17.7
2.8
1.0
3.8
3.3
#059669
4.7
1.3
3.8
1.0
1.1
#8B8D96
5.4
1.2
3.3
1.1
1.0

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

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

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

#111827
rgb(17, 24, 39)
#F97316
rgb(249, 115, 22)
#FFFFFF
White
#059669
rgb(5, 150, 105)
#8B8D96
rgb(139, 141, 150)

لوحات مشابهة

Minimal Color Palette
White Color Palette
Website Color Palette

أسئلة شائعة

كيف أستخدم E-commerce Color Palette في CSS؟

انسخ متغيّرات CSS أدناه إلى :root واستخدم var(--primary) وvar(--background) وغيرها. اللوحة كاملة: #111827, #F97316, #FFFFFF, #059669, #8B8D96.

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

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

E-commerce Color Palette — #111827 #F97316 #FFFFFF #059669 #8B8D96 — Tintiva