مجدّف ألوان Tailwind CSS ابحث عن فئة لون CSS Tailwind الأقرب لأي رمز HEX.
مجدّف ألوان Tailwind
ابحث عن فئة لون CSS Tailwind الأقرب لأي رمز HEX.
أدخل لونك
اكتب رمز HEX أو استخدم محدد الألوان.
عرض المطابقات
انظر إلى أفضل 10 ألوان Tailwind CSS الأقرب مرتبة حسب المسافة.
نسخ اسم الفئة
انسخ اسم فئة لون Tailwind (على سبيل المثال، blue-500) لمشروعك.
What Is مجدّف ألوان Tailwind?
يتماشى معادلة FreeToolkit لون تيلويند CSS مع أي لون HEX مع اللون الأقرب في لوحة الألوان الافتراضية لتيلويند CSS. يتضمن تيلويند 22 عائلة من الألوان (سلات، رمادي، زنك، أحمر، برتقالي، إلخ) ، كل منها يحتوي على 11 درجة (50-950) ، مما يجعل إجمالي 242 لونًا محددًا مسبقًا. يحسب هذا الأداة المسافة الرباعية RGB بين لون الإدخال وكل لون تيلويند، وتحديد الرتب العشر الأعلى من المطابقات. وهو لا يقدر بثمن للمطورين الذين يهاجرون التصاميم إلى تيلويند ، أو مطابقة ألوان العلامة التجارية لفصول تيلويند ، أو العثور على فئة الأداة الصحيحة لتيلويند لمواصفات التصميم. يعرض كل تطابق شريطًا مرئيًا، واسم فئة تيلويند (على سبيل المثال ، أزرق-500) ، وقيمة HEX الفعلية ، وعامل المسافة حتى تتمكن من الحكم على جودة المطابقة.
Why Use مجدّف ألوان Tailwind?
-
يبحث عن أفضل تطابق بين جميع الألوان الـ 242 في لوحة ألوان Tailwind الافتراضية
-
المقارنة البصرية جنبًا إلى جنب للون المدخلات مقابل لون Tailwind
-
يعرض اسم الفئة الدقيق من Tailwind جاهزًا للاستخدام في الكود
-
مساعدة مقياس المسافة في الحكم على جودة المطابقة
-
أفضل 10 نتائج لاختيار أفضل تطابق
Common Use Cases
تصميم إلى Tailwind
تحويل ألوان التصميم من Figma/Sketch إلى فئات'utilties' الأقرب في Tailwind.
تكامل العلامة التجارية
عثور على ألوان Tailwind الأقرب لتوجيهات العلامة التجارية لتحقيق التطوير السريع.
هجرة الإرث
تعيين الألوان الحالية في CSS إلى ما يعادلها في Tailwind خلال هجرة الإطار.
استكشاف الألوان
اكتشف ألوان Tailwind المتشابهة مع اللون الذي تحبه لتحقيق أسلوب متسق من الأولوية للوظائف.
Technical Guide
تحسب معادلة الباحث بعد المسافة الاوروبية في مساحة لون RGB: D = sqrt ((R1-R2)² + (G1-G2)² + (B1-B2)²) بين لون الإدخال وكل واحد من الألوان 242 الافتراضية في لوحة تيلويند. يتم فرز النتائج حسب المسافة التصاعدية. يعني بعد مسافة 0 تطابقًا دقيقًا. تشير المسافات أقل من 20 إلى مطابقات قريبة جدًا ؛ أكثر من 50 تعني اختلاف ملحوظ. يتم تنظيم لوحة تيلويند في 22 عائلة من الألوان مع 11 درجة لكل منها (50، 100، 200، 300، 400، 500، 600، 700، 800، 900، 950). تكون الدرجة 500通常 هي اللون "الأساسي" لكل عائلة. تم تصميم ألوان تيلويند 3.x مع مراعاة التجانس الإدراكي ، مما يعني أن خطوات الدرجات المتساوية (على سبيل المثال من 400 إلى 500) تنتج فروقًا في الإضاءة المرئية متساوية تقريبًا عبر جميع عائلات الألوان.
Tips & Best Practices
-
1المسافة الأقل من 10 تعني أن لون Tailwind لا يمكن تمييزه تقريبًا عن مدخلاتك
-
2إذا كان أقرب تطابق له مسافة كبيرة، فكر في توسيع Tailwind بلون مخصص
-
3صيغة اسم الفئة هي "اسم اللون-ظل" (على سبيل المثال، bg-blue-500, text-red-600)
-
4ألوان Tailwind 500-ظل هي الشدة "ال표준" - الأضواء هي 50-400 والأغمق هو 600-950
-
5يمكنك توسيع لوحة ألوان Tailwind بألوان مخصصة في tailwind.config.js للحصول على تطابقات دقيقة
Related Tools
مُحَوِّل HEX إلى RGB
قم بتحويل رموز الألوان HEX إلى قيم RGB في الحال مع معاينة مباشرة للعينة.
🎨 Color Tools
محدد اللون
محدد لون تفاعلي مع مخرجات HEX و RGB و HSL و CMYK.
🎨 Color Tools
لوحات الألوان التجارية
استعرض لوحات الألوان الرسمية من أكثر من 50 علامة تجارية وشركة تقنية شعبية.
🎨 Color Tools
ألوان تصميم المواد
استعرض مجموعة ألوان تصميم المواد الكاملة مع جميع ظلالها واختياراتها.
🎨 Color Tools
لون إلى متغيرات سي إس إس
تحويل مجموعة من الألوان إلى خصائص مخصصة في CSS (متغيرات).
🎨 Color ToolsFrequently Asked Questions
Q ماذا إذا لم يكن هناك لون Tailwind قريب بما فيه الكفاية?
Q هل يعمل هذا مع Tailwind v4?
Q ما هي المسافة التي تعتبر تطابقًا جيدًا?
About This Tool
مجدّف ألوان Tailwind 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.