مولد ألوان Tailwind

توليد لوحة ألوان Tailwind CSS بـ 11 درجة من 50 إلى 950 وكود التكوين من رمز Hex لون واحد

التحديثاتتم إضافة منشئ ألوان Tailwind لإنشاء 11 درجة لونية وأكواد إعدادات من لون واحدعرض تحديثات المعلومات

المميزات

توليد تلقائي لـ 11 درجة من لون واحد

حساب تدرج اللون من 50 إلى 950 مع وضع اللون المدخل على 500

دعم صيغتي v3 و v4

التبديل بين طريقة كتابة config و @theme عبر علامات التبويب

نسخ رمز Hex لكل درجة

نسخ رمز اللون واحدًا تلو الآخر عبر زر لكل عينة لون

تحديث اللوحة مع الإدخال

لا حاجة لزر تنفيذ — اختبر الألوان وقارنها مباشرة

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

إدخال رمز Hex للون الأساسي

أدخل رمز Hex أو انقر على عينة اللون على اليسار لاختيار اللون عبر منتقي الألوان

إدخال اسم اللون حسب الحاجة

أدخل اسم اللون بأحرف إنجليزية صغيرة للاستخدام في الكود. إذا تركته فارغًا، سيتم استخدام primary

تأكد من عينات اللون بـ 11 درجة

تحقق من عينات اللون ورموز Hex من 50 إلى 950، ثم انسخ اللون الواحد تلو الآخر عبر زر النسخ

اختر صيغة الإخراج والنسخ

اختر v3 أو v4 وانقر على "نسخ الكود" للصق في tailwind.config.js أو ملف CSS

حالات الاستخدام

إنشاء تدرجات ألوان العلامة التجارية

توحيد تدرجات الألوان المستخدمة عند تمرير الفأرة على الأزرار والخلفيات من لون العلامة التجارية الواحد

إضافة الألوان التي ليست في اللوحة القياسية

إضافة الألوان الفريدة للمشروع التي لا توجد في ألوان Tailwind القياسية بـ 11 درجة إلى ملف التكوين

إنشاء إعدادات @theme في v4

كتابة متغيرات CSS في Tailwind v4 من لون الموقع الرئيسي جملة واحدة

التحضير لتطبيق تصميم المخطط الأولي

تحضير كود 11 درجة للتطبيق من اللون المحدد في المخطط الأولي، ونسخه أيضًا إلى أداة التصميم

المعارف الأساسية

ما تمثله 50–950 في Tailwind

تستخدم ألوان Tailwind CSS 11 مرحلة رقمية لتمثيل السطوع، حيث 50 هو الأفتح و 950 هو الأغمق، و 500 هو اللون الأساسي. تُستخدم الأرقام في نهاية أسماء الفئات مثل "bg-primary-500" و "text-primary-700".

المراحل من 50 إلى 300：ألوان فاتحة تُستخدم غالبًا في الخلفيات والحشوات الفاتحة، وسهلة القراءة عند وضع نصوص داكنة فوقها.
المراحل من 600 إلى 950：ألوان داكنة تُستخدم غالبًا عند تمرير الفأرة على الأزرار وألوان نصوص العناوين، وواضحة جدًا على الخلفيات البيضاء.

الفرق بين طريقة تعريف الألوان في v3 و v4

في Tailwind CSS v3، تُعرّف الألوان عبر JavaScript في tailwind.config.js، وفي v4 تُعرّف كمتغيرات CSS في @theme بملف CSS. بصرف النظر عن طريقة الكتابة، يمكنك استخدام الألوان المعرّفة بنفس اسم الفئة مثل "bg-primary-500".

طريقة v3：طريقة v3 تكتب بصيغة متداخلة مثل "primary: { 500: '#3B82F6' }" داخل theme.extend.colors.
طريقة v4：طريقة v4 تكتب متغيرات CSS مثل "--color-primary-500: #3B82F6;" داخل @theme حيث يتم ربط اسم اللون والمرحلة بالواصلة.