ما هو منتقي ألوان Material Design؟

أداة Material Design Color Picker توفر لك لوحة ألوان Material Design الكاملة مع جميع الألوان الأساسية ومتغيرات درجاتها (من 50 إلى 900). انقر على أي عينة لون لنسخها بصيغة HEX أو RGB أو HSL، وافحص قابلية الوصول بفاحص تباين WCAG المدمج.

اللوحة تضم 19 لوناً رئيسياً من الأحمر إلى البني، ولكل لون عشر درجات هي 50 و100 و200 و300 و400 و500 و600 و700 و800 و900، إضافة إلى درجات التركيز A100 وA200 وA400 وA700 حيث عرّفتها جوجل. كل مربع لون يعرض قيمة HEX الدقيقة، ولوحة الألوان المختارة تتيح تكوين لوحة المشروع ونسخها أو تنزيلها.

كيفية الاستخدام

1. تصفّح شبكة الألوان التي تعرض جميع الألوان الأساسية لـ Material Design: الأحمر والوردي والأرجواني والأرجواني الداكن والنيلي والأزرق والمزيد.
2. انقر على لون أساسي لتوسيع متغيرات درجاته من الأفتح (50) إلى الأغمق (900)، بما في ذلك درجات التمييز (A100–A700).
3. انقر على أي درجة لنسخ قيمتها بالصيغة التي اخترتها (HEX أو RGB أو HSL)، وأضف الدرجات إلى لوحة الألوان المختارة، ثم نزّل اللوحة بصيغة CSS أو SCSS أو إعدادات Tailwind أو JSON لمشروعك.

متى تستخدم

• اختيار اللون الرئيسي ودرجة أفتح للحاويات ودرجة أغمق لحالة التمرير من نفس اللون.
• مطابقة واجهة أندرويد أو فلاتر مع لوحة جوجل الرسمية دون تخمين قيم HEX.
• بناء لوحة موحّدة لعرض تقديمي أو مادة تسويقية.

النتيجة

أنت تبني لوحة تحكم وتحتاج إلى لون 'Indigo 500' (#3F51B5) الدقيق من Material Design لزر الإجراء الرئيسي و'Indigo 50' (#E8EAF6) لخلفية التمرير.

الأسئلة الشائعة

ما الفرق بين الدرجات الرئيسية ودرجات التركيز (A)؟

الدرجات 50 إلى 900 هي تباينات في إضاءة اللون نفسه وتُستعمل للخلفيات والأسطح والنصوص. درجات A100 إلى A700 أعلى تشبّعاً وتخصّصها جوجل لعناصر الإجراء كالأزرار والشارات.

لماذا لا تملك بعض الألوان درجات تركيز؟

البني والرمادي ألوان منخفضة التشبّع بطبيعتها، لذلك لم تعرّف جوجل لها درجات A. الأداة تلتزم بالمواصفة الأصلية ولا تختلق قيماً لم تنشرها جوجل.

أي درجة تناسب نص المحتوى الأساسي؟

توصي مواصفة Material باستخدام Grey 900 فوق الخلفيات الفاتحة، وGrey 50 أو الأبيض فوق الخلفيات الداكنة. الدرجات الوسطى 500 و600 ملائمة للنص الثانوي والأيقونات التي تحتاج تباينًا أقل.

هل هذه الألوان مطابقة لألوان Material 3 (Material You)؟

لا، هذه ألوان نظام Material الأصلي الذي نشرته جوجل عام 2014. أما Material 3 فيستخدم خوارزمية مختلفة تُنتج لوحات نغمية ديناميكية انطلاقاً من لون بذرة واحد.

كيف أتحقق من نسبة التباين بين درجتين؟

أضف الدرجتين إلى لوحة الألوان المختارة، ثم انتقل إلى فاحص التباين. اختر إحداهما واجهةً والأخرى خلفية، وستظهر اللوحة فورًا نسبة WCAG مع شارات نجح/فشل للمستويين AA وAAA للنص العادي والكبير.

أدوات ذات صلة