لوحة ألوان تصميم المواد استعرض مجموعة ألوان تصميم المواد الكاملة مع جميع ظلالها واختياراتها.
ألوان تصميم المواد
استعرض مجموعة ألوان تصميم المواد الكاملة مع جميع ظلالها واختياراتها.
اختر عائلة الألوان
اختر عائلة ألوان مثل الأحمر أو الأزرق أو الأخضر البحري.
استعرض درجات الألوان
اعرض جميع الدرجات من 50 (الأكثر إضاءة) إلى 900 (الأغمق) بالإضافة إلى متغيرات التأثير.
انسخ الألوان
انسخ رمز HEX لأي درجة بلون بضغطة واحدة.
What Is ألوان تصميم المواد?
ألوان التصميم المادي هي مرجع كامل لنظام ألوان Google's Material Design، وتتميز بـ 19 عائلة من الألوان مع ظلال من 50 إلى 900 بالإضافة إلى متغيرات Akron (A100-A700). تم تصميم لوحة ألوان التصميم المادي بعناية من قبل جوجل لتوفير مجموعة متوازنة وشاملة من الألوان لتصميم الواجهة المستخدم. تقدم كل عائلة لونية مدىً من الضوء جداً (50) إلى الغامق جداً (900)، مع توفير ظلال Akron أvariants مشبعة ومشبعة لأجزاء التأكيد. تم تصميم اللوحة مع مراعاة سهولة الوصول، مع تقديم تحديد واضح بين الظلال المجاورة. يتم استخدامها على نطاق واسع في تطوير تطبيقات Android، و Material UI (React)، و Angular Material، و Flutter، وتطبيقات الويب التي تتبع إرشادات التصميم المادي. يسمح لك الأداة بمعاينة العائلة، ومشاهدة جميع الظلال في شريط مرئي، ونقل رمز HEX لأي لون.
Why Use ألوان تصميم المواد?
-
تصميم مادي كامل مع جميع العائلات الـ 19
-
درجات من 50-900 بالإضافة إلى متغيرات التأثير (A100-A700)
-
محدد عائلة الألوان المرئي بالتنقل السريع
-
شريط الدرجات الذي يعرض جميع المتغيرات في لمحة
-
نسخ بضغطة واحدة لكل لون
Common Use Cases
تطوير تطبيقات Android
اختر ألوان مادية لتطبيقات Android وفقًا لإرشادات التصميم من جوجل.
Material UI (React)
ابحث عن قيم الألوان الدقيقة لتعديل موضوع MUI.
تطوير Flutter
اختر ألوان مادية لتطبيقات Flutter بثقة.
تصميم الويب
ابنِ مواقع إلكترونية مستوحاة من تصميم المواد باستخدام لوحة الألوان الرسمية.
Technical Guide
استخدم نظام ألوان التصميم المادي تخصيص تسمية منظم: اسم العائلة + رقم الظل. تحتوي كل عائلة على 10 ظلال стандарт (50، 100، 200...900) وaž إلى 4 ظلال Akron (A100، A200، A400، A700). تقدم الظلال القياسية تدرجًا من الضوء جداً (50، مناسب للخلفيات) إلى الغامق جداً (900، مناسب للنص). تم تصميم ظلال Akron كمتغيرات مشبعة ومشبعة لأزرار الإجراءات الطافية والعناصر التفاعلية والتأكيد. لا تحتوي جميع العائلات على أكمام - Brown و Grey و Blue Grey تفتقر إلى متغيرات Akron لأنها محايدة. تم تصميم الألوان باستخدام مساحة اللون HCT (Hue، Chroma، Tone) في Material Design 3 (Material You)، والتي توفر سلم ألوان أكثر.uniformity من HSL. تضمن اللوحة تقديم تحديد واضح بين ظل 500 والنص الأبيض، وبين الظلال الأخف والنص الداكن.
Tips & Best Practices
-
1الدرجة 500 هي الدرجة "الرئيسية" لكل عائلة - استخدمها كقاعدة
-
2تعمل درجات 50-200 بشكل جيد للخلفيات والسطوح
-
3تعمل درجات 600-900 بشكل جيد لنصوص على خلفيات خفيفة
-
4درجات التأثير (A100-A700) مخصصة لعناصر التركيز مثل الفابس والروابط
-
5يقدم تصميم المواد 3 ألوان ديناميكية من ورق الحائط للمستخدم - تحقق من Material You للحصول على التحديثات
Related Tools
مُحَوِّل HEX إلى RGB
قم بتحويل رموز الألوان HEX إلى قيم RGB في الحال مع معاينة مباشرة للعينة.
🎨 Color Tools
محدد اللون
محدد لون تفاعلي مع مخرجات HEX و RGB و HSL و CMYK.
🎨 Color Tools
لوحات الألوان التجارية
استعرض لوحات الألوان الرسمية من أكثر من 50 علامة تجارية وشركة تقنية شعبية.
🎨 Color Tools
مجدّف ألوان Tailwind
ابحث عن فئة لون CSS Tailwind الأقرب لأي رمز HEX.
🎨 Color Tools
ألوان النظام لآي أو إس وأندرويد
استعرض ألوان النظام لوياجهات آي أو إس البشرية وتصميم المواد لأندرويد.
🎨 Color ToolsFrequently Asked Questions
Q هل هذه لوحة الألوان الأخيرة لتصميم المواد?
Q لماذا تفتقر عائلات الألوان البني والرمادي والأزرق الرمادي إلى درجات التأثير?
Q أي درجة يجب أن أستخدمها للأزرار الرئيسية?
About This Tool
ألوان تصميم المواد is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.