Softonic

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

خطوة 1 / 3 اختر عائلة لونية

لوحة Material Design الثابتة لعام 2014 (Material Design 2). يستخدم Material 3 بدلاً منها لوحات درجات مولدة.

اختر عائلة لونية

التالي: اختر درجة لونية

تحدد لوحة Material Design تسع عشرة عائلة لونية، من الأحمر والوردي والأرجواني حتى الرمادي والأزرق الرمادي، لكل منها تدرج من الدرجة 50 (فاتح) إلى الدرجة 900 (شبه أسود)، بالإضافة إلى درجات تمييز اختيارية من A100 إلى A700. يعرض هذا المنتقي جميع العينات اللونية في شبكة، ويتيح لك نسخ أي قيمة بصيغة HEX أو RGB أو HSL أو باسم رمز Material لاستخدامها في Tailwind أو متغيرات CSS أو iOS UIColor أو مصادر الألوان في Android.

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

  1. 1

    تصفح الشبكة

    تصطف العائلات عموديًا على اليسار، وتمتد الدرجات أفقيًا في الأعلى من 50 إلى 900.

  2. 2

    انقر على عينة

    اطّلع على HEX وRGB وHSL والاسم القياسي لرمز Material (مثل Indigo 500).

  3. 3

    انسخ الصيغة التي تحتاجها

    تنسخ النقرة الواحدة السلسلة النصية بدقة: `#3F51B5`، `rgb(63 81 181)`، `hsl(231 48% 48%)`.

  4. 4

    تحقق من التباين

    تعرض اللوحة نسبة التباين وفق معايير WCAG مقابل الأبيض والأسود لاختيار ألوان نص يسهل الوصول إليها.

سلّم الدرجات

الدرجة الاستخدام
50 خلفيات التمرير، أسطح فاتحة
100 خلفيات الرقائق، تعبئات منخفضة التوكيد
200 الحالات المعطّلة، الأسطح الثانوية
300 الحدود، الفواصل
400 نص ثانوي على خلفيات فاتحة
500 اللون الافتراضي / الأساسي، الخط الأساسي
600 الحالات التفاعلية (التمرير، الضغط)
700 العناوين، التوكيد القوي
800 نص داكن على خلفيات فاتحة
900 العنصر الأعلى تباينًا (شبه أسود)
A100 تمييز فاتح
A200 تمييز أفتح من الافتراضي
A400 تمييز (غالبًا لمسة العلامة التجارية “الزاهية”)
A700 تمييز عميق

العائلات في لوحة Material

أحمر، وردي، أرجواني، أرجواني داكن، نيلي، أزرق، أزرق فاتح، سماوي، أزرق مخضر، أخضر، أخضر فاتح، ليموني، أصفر، كهرماني، برتقالي، برتقالي داكن، بني، رمادي، أزرق رمادي.

البني والرمادي والأزرق الرمادي لا تحتوي على درجات تمييز، فهي العائلات المحايدة.

اختيار اللون الأساسي

تقترح المواصفات اللون 500 لونًا أساسيًا، واللون 700 للنسخة الأغمق (المستخدمة في شريط الحالة على Android)، ودرجة تمييز A200 أو A400 للإجراءات الثانوية. هذا عرف وليس قاعدة، إذ يشتق Material 3 الحديث (اللون الديناميكي) اللوحات من لون بذرة واحد بدلًا من الاختيار من تدرجات ثابتة.

نقطة التحقق من إمكانية الوصول

  • نص المتن: نسبة تباين ≥ 4.5:1 مقابل خلفيته (WCAG AA).
  • النص الكبير (18 نقطة فأكثر عريض أو 24 نقطة فأكثر عادي): ≥ 3:1.
  • مكوّنات الواجهة والكائنات الرسومية: ≥ 3:1.

اللوحة ليست آمنة التباين افتراضيًا. فالأصفر 500 على الأبيض يفشل في معايير WCAG بشكل واضح. تحقق دائمًا من النسبة قبل اعتماد أي تركيبة، يعرضها المنتقي مباشرةً.

الصيغ المدعومة

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (صيغة حديثة) أو rgb(63, 81, 181) (صيغة قديمة).
  • HSL: hsl(231 48% 48%).
  • رمز Material: Indigo 500، مناسب لوثائق التصميم وFigma.
  • Tailwind: indigo-500، أدخله مباشرةً في خاصية الفئة إذا كان سِمة Tailwind لديك تستخدم مقياس Material.
  • XML ألوان Android: <color name="indigo_500">#FF3F51B5</color>، بصيغة ARGB.
  • iOS UIColor: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

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

تعرض هذه الأداة لوحة Material Design الثابتة التي نشرتها Google عام 2014 ووثقتها لاحقاً في موقع Material Design 2. وهي لا تنشئ لوحات Material 3 النغمية من لون أساسي. استخدمها عندما تحتاج إلى الدرجات الكلاسيكية المرقمة ودرجات التمييز.

البني والرمادي والأزرق الرمادي ألوان محايدة ولا تشارك في تركيبات ألوان التمييز، ولذلك تحذف المواصفات ببساطة الدرجات من A100 إلى A700 لها.

لوحة Tailwind الافتراضية مستوحاة من Material لكنها ليست مطابقة له. إذا أردت ألوان Material الدقيقة، فوسّع theme.extend.colors بقيم Material وأشِر إليها باسم material-indigo-500 في أسماء الفئات لديك.

يقول العرف نعم، لكن لا شيء يمنعك من استخدام 700 أو درجة تمييز كلون أساسي. الغرض من عرف 500 هو توفير درجة أساسية موثوقة مع ثماني خطوات في كل اتجاه للتنويع.

أدوات ذات صلة

مولد الورق المسطر

أنشئ ورقًا مسطرًا قابلًا للطباعة مجانًا. اختر تسطيرًا جامعيًا أو واسعًا أو ضيقًا، واضبط تباعد الأسطر بالمليمتر وحجم الصفحة وخط هامش، ثم اطبع أو نزّل ملف SVG.

صانع الأعلام

صمّم علماً مخصصاً بسيطاً بنسبة 3:2 في متصفحك باستخدام ستة تخطيطات وألوان ونص ورمز. نزّل SVG أو PNG، أو افتح مربع حوار الطباعة في المتصفح.

تحويل النص إلى خط اليد

اكتب نصا أو الصقه، واختر أحد خطوط اليد الخمسة وورقا ساديا أو مسطرا أو مربعات ولون الحبر، ثم نزّل الصفحة بصيغة PNG. الأداة تدعم الحروف اللاتينية فقط، ولا ترسم العربية بخط اليد.

أداة تقسيم شبكة إنستغرام

قسّم صورة عريضة إلى شبكة إنستغرام بحجم 3×3 أو إلى أي عدد من الصفوف. القطع مُرقّمة لتسهيل رفعها بترتيب عكسي.

منشئ قوائم التصنيف إلى مستويات

أنشئ قائمة تصنيف خاصة من نصوص وصور محلية، وخصص المستويات ورتب بالسحب أو لوحة المفاتيح، ثم صدّر JSON أو PNG أو SVG.

محوّل الصور إلى تدرج رمادي

حوّل الصور الملونة إلى تدرج رمادي في متصفحك. مجاني وخاص، ولا يُرفع أي شيء.

الأداة متاحة بلغات أخرى