Softonic

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

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

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

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

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

تحدد لوحة 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 هو توفير درجة أساسية موثوقة مع ثماني خطوات في كل اتجاه للتنويع.

أدوات ذات صلة

مولد الباركود

أنشئ باركودات Code 128 وEAN-13 وUPC وITF-14 وسبع صيغ خطية أخرى. تبقى البيانات في المتصفح، ويمكن تنزيل SVG أو PNG.

مولّد رموز QR

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

مولد الميمز

أضف تعليقًا علويًا وآخر سفليًا إلى صورة JPG أو PNG أو WebP. اضبط الخط والألوان والحد، ثم نزّل الميم كصورة PNG ثابتة.

BMP إلى PNG

حوّل ملفات BMP إلى PNG داخل المتصفح. بلا فقد، يحافظ على عمق اللون ويضيف شفافية اختيارية من قناة alpha الأصلية في BMP.

مغيّر حجم الصور

غيّر حجم الصور إلى أبعاد دقيقة بالبكسل أو إلى نسب مئوية مع الحفاظ على نسبة العرض إلى الارتفاع. مناسب للدفعات، ومن دون رفع الملفات.

قارئ رموز QR

فك ترميز رمز QR من صورة PNG أو JPG أو WebP داخل المتصفح. اعرض روابط URL وبيانات Wi-Fi وvCard وSMS والبريد والتقويم والموقع والنص قبل استخدامها.