منشئ لوحة ألوان Material Design

كيف يعمل

تعتبر الأداة لونك الأساسي هو الدرجة 500، ثم تحسب الدرجات الأفتح (من 50 إلى 400) بمزجه تدريجيًا مع الأبيض، والدرجات الأغمق (من 600 إلى 900) بمزجه مع الأسود، بنسب تتزايد كلما ابتعدنا عن الدرجة 500. والنتيجة لوحة ألوان متدرجة متسقة جاهزة للدمج في نظام تصميم أو دليل مكوّنات.

هل هذه هي خوارزمية Material Design الرسمية تمامًا؟

لا، فشركة Google تحسب لوحاتها الرسمية بخوارزمية خاصة أكثر تعقيدًا تعتمد على الفضاء اللوني HCT. وتقدّم هذه الأداة تقريبًا بالمزج الخطي نحو الأبيض والأسود، يعطي نتيجة قريبة بصريًا وقابلة للاستخدام مباشرةً، دون ادعاء مطابقة لوحات Material الرسمية بكسلًا ببكسل.

كيف أستخدم هذه اللوحة في مشروعي؟

انقر على درجة لنسخ رمز HEX الخاص بها، ثم استخدمها كمتغير CSS أو كرمز تصميم (مثل --primary-500): تُستخدم الدرجات الفاتحة غالبًا للخلفيات والحالات المعطّلة، والدرجة 500 للون الرئيسي، والدرجات الداكنة للنص أو الحالات النشطة عالية التباين.

تتم جميع حسابات الألوان مباشرةً داخل متصفحك، دون أي استدعاء لخادم خارجي.