ما هو باحث ألوان Tailwind؟

يستقبل Tailwind Color Finder أي قيمة لون —hex أو ‎rgb()‎ أو ‎hsl()‎ أو اسم CSS مثل teal— ويعيد فوراً أقرب فئة أداة Tailwind CSS مطابقة. بدل تخمين اللون من اللوحات، ألصق القيمة من أداة التصميم واحصل على اسم الفئة الجاهز للنسخ إلى الكود.

المطابقة تستخدم مسافة ΔE الإدراكية في فضاء CIE Lab بدلاً من طرح قيم RGB المباشر، فالنتيجة تشبه ما تراه العين قريباً، لا ما هو أقرب رقمياً. الأداة تبحث في لوحة Tailwind v3/v4 الافتراضية بالكامل، بكل العائلات من slate إلى rose، والدرجات من 50 إلى 950، إضافة إلى الأسود والأبيض. تظهر أفضل عشر نتائج مع المسافة لكل منها لتختار التوازن بين درجة اللون والإضاءة.

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

1. أدخل كود لون Hex من تصميمك أو اختر لونًا باستخدام أداة انتقاء الألوان.
2. تعرض الأداة فورًا أقرب فئة لون في Tailwind CSS مع مقارنة بصرية جنبًا إلى جنب.
3. انسخ اسم فئة Tailwind (مثل bg-blue-500) مباشرة إلى الكود. راجع مسافة اللون لتقييم مدى دقة التطابق.

متى تستخدم

• تحويل أكواد الهيكسا الخاصة بهوية بصرية أو ملف Figma إلى أسماء فئات Tailwind في مشروع جديد.
• مراجعة ملف CSS قديم بألوان مكتوبة يدوياً ونقله إلى فئات Tailwind المنفعية.
• اختيار درجة Tailwind الأقرب دلالياً (red-500 أو rose-500) عندما يعطيك المصمم لوناً واحداً فقط.

النتيجة

يُسلّمك المصمم لون العلامة التجارية #2563EB. الصقه وستُظهر الأداة أنه يتطابق تمامًا مع blue-500. أما بالنسبة لـ #3A7BC8، فتجد sky-600 كأقرب تطابق مع نقاط مسافة توضح مدى القرب.

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

كيف تقرر الأداة أي لون من Tailwind هو الأقرب؟

تحوّل كلا اللونين إلى فضاء CIE Lab وتحسب ΔE76، وهي مسافة إدراكية تقارب الفارق البصري بين لونين. ΔE أقل من 1 يصعب تمييزه بالعين، وفوق 5 يصبح التغير في درجة اللون أو الإضاءة واضحاً.

أي إصدار من لوحة Tailwind يُستخدم؟

لوحة v3/v4 الافتراضية: ٢٢ عائلة لونية (slate وgray وzinc وneutral وstone وred وorange وamber وyellow وlime وgreen وemerald وteal وcyan وsky وblue وindigo وviolet وpurple وfuchsia وpink وrose) بدرجات من ٥٠ إلى ٩٥٠، مع الأسود والأبيض. الألوان المخصّصة للمشروع لا تدخل في البحث.

لماذا يطابق الهيكسا الذي أدخلته درجة لم أتوقّعها؟

مسافة Lab توازن بين درجة اللون والتشبّع والإضاءة معاً. أخضر داكن قد يقترب من slate أكثر من اقترابه من teal لامع لأن فرق الإضاءة يطغى. إن لم تعجبك النتيجة الأولى، استعرض القائمة العشرية واختر بحسب عائلة الدرجة.

هل أستطيع نسخ النتيجة كمتغيّر CSS بدلاً من فئة Tailwind؟

لوحة التفاصيل تعرض اسم الفئة (مثل bg-blue-500) وقيمة الهيكسا معاً. انسخ الهيكسا ولُفّه داخل var(--brand) إن كنت تعتمد على متغيرات CSS بدلاً من الفئات المنفعية مباشرة. وعندما لا يقترب أي لون في اللوحة بما يكفي، تعرض الأداة فئة القيمة المخصصة (bg-[#hex]) المبنية على لونك الدقيق، لتحافظ على الدقة دون تغيير سمتك.

هل يمكنني لصق ‎rgb()‎ أو ‎hsl()‎ أو اسم لون CSS بدل hex؟

نعم. الحقل يتعرّف على hex (‏#2563EB أو 2563EB، بثلاث أو ست خانات)، و‏‎rgb()/rgba()‎، و‏‎hsl()/hsla()‎ مع درجة أو بدون وحدة، وكامل ألوان CSS المُسمّاة (teal، rebeccapurple، cornflowerblue، وغيرها). يتم تجاهل قناة الألفا؛ المقارنة تتم على المكافئ الصلب من RGB.

أدوات ذات صلة