مولد لوحات ألوان Material Design
أنشئ لوحات ألوان جميلة استنادًا إلى إرشادات Material Design من Google. اختر لونيك الأساسي والثانوي لإنشاء سمة كاملة.
مولد اللوحات
اللوحة المُنشأة
لوحة ألوان Material Design الكاملة
تصفح المجموعة الكاملة من ألوان Material Design. انقر على أي لون لنسخ كود HEX الخاص به.
أحمر
وردي
بنفسجي
أزرق
أخضر
برتقالي
تركواز
كهرماني
نصائح الاستخدام
- استخدم الدرجة 500 كلونك الأساسي
- استخدم الدرجة 700 للتدرجات الداكنة (مثل أشرطة التطبيقات)
- استخدم الألوان الثانوية (A200، A400) لأزرار الإجراءات العائمة والعناصر البارزة
- تأكد من نسب تباين مناسبة لتحسين إمكانية الوصول
مولد ألوان Material Design احترافي
احصل على نظام ألوان Google Material Design 3 الكامل مع لوحات Material You، ورموز الألوان الرسمية، وخيارات تصدير احترافية لتطوير واجهات المستخدم الحديثة وتصميم تطبيقات Android.
لماذا تختار مولد Material Design الخاص بنا؟
توفر أداتنا الشاملة الوصول إلى نظام ألوان Material Design 3 الكامل مع التنسيق الديناميكي لـ Material You، ورموز ألوان Google الرسمية، وصيغ تصدير احترافية.
- Material Design 3 system
- Material You palettes
- Official color tokens
- Dynamic theming
- Multiple export formats
- Developer-ready code
نظام Material Design 3 الكامل
احصل على نظام ألوان Material Design 3 الكامل، بما في ذلك الألوان الأساسية والثانوية والثلاثية، وتدرجات الأسطح، ولوحات درجات لونية كاملة بأدوار لونية دلالية.
التنسيق الديناميكي لـ Material You
أنشئ أنظمة ألوان Material You من ألوان أساسية مع نسخ تلقائية للسمة الفاتحة والداكنة، واستخراج ألوان مخصصة لتطبيقات Android الحديثة.
خيارات تصدير جاهزة للمطورين
صدّر بصيغة خصائص CSS المخصصة، أو متغيرات SCSS، أو رموز JSON، أو موارد XML لأنظمة Android، أو رموز Figma، أو بيانات سمات Flutter، مع اتباع قواعد تسمية مناسبة.
مثالي لـ:
- Android app development
- Web applications
- Flutter projects
- Design systems
- UI component libraries
- Material UI theming
كيف يعمل:
اختر نظام الألوان
اختر من ألوان Material Design 3 الكلاسيكية أو أنشئ لوحات Material You من لونك الأساسي.
خصّص وعاين
اضبط القيم اللونية، وعاين السمتين الفاتحة والداكنة، وشاهد كيف تعمل الألوان في عناصر Material Design.
التصدير والتطبيق
نزّل رموز الألوان بالصيغة التي تفضلها وادمجها مباشرة في سير عمل التطوير الخاص بك.
الأسئلة الشائعة
Material Design 3 هو أحدث نظام تصميم من Google، ويتميز بأدوار ألوان ورموز دلالية محسّنة. أما Material You فهي طبقة التخصيص التي تنشئ أنظمة ألوان مخصصة من خلفيات المستخدم أو الألوان الأساسية، لإنشاء سمات ديناميكية تتكيف مع التفضيلات الشخصية مع الحفاظ على مبادئ MD3.
أدخل لون علامتك التجارية أو درجة اللون التي تفضلها كلون أساسي. تُنشئ خوارزميتنا لوحة درجات لونية كاملة تضم مجموعات الألوان الأساسية والثانوية والثلاثية والمحايدة ومتغيراتها المحايدة، لكل منها 13 تدرجًا لونيًا من 0 (أسود) إلى 100 (أبيض)، وفقًا لمواصفات Material You من Google.
صدّر بصيغة خصائص CSS المخصصة، أو متغيرات SCSS/Sass، أو رموز تصميم JSON، أو موارد XML لأنظمة Android، أو كائنات JavaScript/TypeScript، أو رموز تصميم Figma، أو سمات Flutter ColorScheme، أو أصول ألوان Swift لنظام iOS. تتضمن جميع صيغ التصدير قواعد تسمية دلالية مناسبة.
نعم! صُمم نظام ألوان Material Design 3 مع مراعاة إمكانية الوصول. يضمن نظام اللوحات اللونية نسب تباين مناسبة بين ألوان الأسطح وألوان النصوص عليها. تعرض أداتنا مستويات التوافق مع معايير WCAG وتوفر تركيبات ألوان متاحة تلقائيًا.
بالتأكيد! ألوان Material Design مفتوحة المصدر ويمكن استخدامها في أي مشروع. ومع أن النظام صُمم لمنتجات Google، فإن علم الألوان ومبادئ إمكانية الوصول تجعله ممتازًا لأي واجهة مستخدم حديثة، سواء كانت تطبيقات ويب أو جوال أو سطح مكتب.
يستخدم Material Design 3 أدوارًا لونية دلالية تُربط تلقائيًا بالقيم اللونية المناسبة للسمتين الفاتحة والداكنة. على سبيل المثال، يستخدم اللون 'الأساسي' الدرجة 40 في السمة الفاتحة والدرجة 80 في السمة الداكنة. يوفر مولدنا كلا النسختين مع الحفاظ على تباين وإمكانية وصول مناسبين.