مرجع ألوان Tailwind CSS

تحتوي لوحة ألوان Tailwind الافتراضية على 22 عائلة لونية (slate وgray وzinc وneutral وstone وred وorange وamber وyellow وlime وgreen وemerald وteal وcyan وsky وblue وindigo وviolet وpurple وfuchsia وpink وrose)، كل منها بـ11 درجة من 50 (الأفتح) إلى 950 (الأغمق) — أي 242 لونًا إجمالاً. تعمل هذه الأداة في كلا الاتجاهين: الصق كود HEX مثل #c4b5fd للعثور على أقرب اسم فئة مطابق، أو اكتب فئة مثل bg-amber-500 للحصول على HEX وRGB الدقيقين ومتغيرات الأدوات الأخرى. شبكة لوحة الألوان الكاملة أدناه قابلة للتصفح، وتنسخ كل عينة كود HEX الخاص بها عند النقر.

ما هي هذه الأداة؟

توفر Tailwind CSS سلم ألوان افتراضيًا ثابتًا بدلاً من السماح لك باختيار قيم عشوائية لألوان الواجهة الشائعة. تحتوي كل عائلة من العائلات الـ22 المسمّاة (مثل amber أو slate) على 11 درجة بالضبط، مرقمة من 50 إلى 950، ولكل درجة قيمة HEX رسمية واحدة موثّقة من Tailwind نفسها ومستخدمة بشكل متطابق عبر أدوات bg- وtext- وborder- وring-.

يدمج هذا المرجع تلك اللوحة الرسمية الكاملة محليًا، لذا فإن البحث عن لون أو اسم فئة لا يتطلب فتح توثيق Tailwind، أو تشغيل عملية بناء، أو تمرير الفئة عبر PurgeCSS فقط لرؤية شكلها. تستخدم عمليات البحث بـHEX المسافة الإقليدية في RGB لإيجاد أقرب درجة رسمية، وعمليات البحث بالفئة دقيقة تمامًا — تطابق كل قيمة هنا القيم الافتراضية الموثّقة لـTailwind.

لماذا تستخدمها؟

الصق كود HEX من ملف تصميم أو لقطة شاشة واحصل فورًا على أقرب اسم فئة في Tailwind، بدلاً من تخمين الدرجة المرقّمة التي يقابلها.
اكتب اسم فئة مثل slate-900 أو bg-purple-500 لرؤية قيمة HEX وRGB الدقيقة دون البحث في توثيق Tailwind.
تصفح الشبكة الكاملة المكوّنة من 22 عائلة × 11 درجة لمقارنة الدرجات جنبًا إلى جنب قبل اختيار واحدة.
احصل على متغيرات bg- وtext- وborder- وring- لأي درجة بنقرة واحدة، حيث تستخدم Tailwind نفس السلم الرقمي عبرها جميعًا.
مجانية وفورية ومحلية بالكامل — بدون رفع ملفات، بدون حساب، بدون خطوة بناء.

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

للعثور على اسم فئة من كود HEX: اكتب أو الصق قيمة HEX (مع أو بدون #) في مربع البحث — تظهر أقرب درجة رسمية في Tailwind فوق الشبكة، مع مسافة اللون إذا لم تكن مطابقة تامة.
للعثور على قيمة HEX من اسم فئة: اكتب الفئة أو اسم العائلة (مثل amber-500 أو bg-blue-600 أو teal فقط) — تعرض المطابقة التامة HEX وRGB وكل متغيرات الأدوات؛ يقوم اسم العائلة وحده بتصفية الشبكة إلى تلك العائلة.
لتصفح كل شيء: اترك مربع البحث فارغًا وانقر على أي عينة في الشبكة — تظهر تفاصيلها في اللوحة أعلاه، ويُنسخ كود HEX الخاص بها تلقائيًا.
انقر على أي من أزرار المتغيرات bg-/text-/border-/ring- في لوحة التفاصيل لنسخ اسم الفئة الدقيق ذاك.

مثال

الإدخال

#c4b5fd

الناتج

violet-300 — مطابقة تامة، #C4B5FD، rgb(196, 181, 253)

هذا الكود بالـHEX هو أحد القيم الافتراضية الموثّقة من Tailwind نفسها، لذا فإن المسافة تساوي 0 والمطابقة تامة وليست تقريبية.

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

هل هذه هي ألوان Tailwind CSS الافتراضية الرسمية؟

نعم — جميع قيم الـHEX الـ242 (22 عائلة × 11 درجة) مأخوذة من لوحة الألوان الافتراضية الموثّقة رسميًا من Tailwind. تمثّل Tailwind v4 الألوان داخليًا بصيغة OKLCH، لكن نفس اللوحة الافتراضية وموازيات الـHEX الموثّقة لها لم تتغير عن الإصدار v3، لذا فإن هذه القيم حديثة لكلا الإصدارين.

ماذا يعني عندما لا يكون بحث HEX مطابقة تامة؟

إذا لصقت كود HEX لا يندرج ضمن قيم Tailwind الافتراضية الـ242 (لون علامة تجارية مخصص مثلاً)، تعرض الأداة أقرب درجة رسمية حسب مسافة RGB وتصنّفها بـ"أقرب مطابقة" مع عرض المسافة — لن تكون مطابقة تمامًا لإدخالك بكسلاً بكسل، بل أقرب قيمة افتراضية في Tailwind فقط.

لماذا تستخدم bg- وtext- وborder- وring- كلها نفس الأرقام؟

تطبّق Tailwind سلم ألوان واحدًا مشتركًا عبر كل فئات الأدوات، لذا فإن bg-amber-500 وtext-amber-500 وborder-amber-500 وring-amber-500 كلها نفس قيمة HEX الأساسية المطبّقة على خاصية CSS مختلفة. لهذا تعرض لوحة التفاصيل المتغيرات الأربعة معًا لأي درجة تبحث عنها.

هل يمكنني البحث عن مجموعة عائلة كاملة مثل "blue" فقط دون رقم درجة؟

نعم — كتابة اسم عائلة فقط (دون رقم) يصفّي الشبكة إلى جميع الدرجات الـ11 لتلك العائلة، لتتمكن من مقارنتها جنبًا إلى جنب، دون اختيار درجة محددة بعد.

هل يغطي هذا ألوان سمة Tailwind المخصصة التي عرّفتها في إعدادات مشروعي؟

لا — يغطي هذا المرجع فقط لوحة الألوان الافتراضية المدمجة في Tailwind، وليس الألوان التي أضفتها أو استبدلتها في كتلة theme.extend.colors في tailwind.config.js أو كتلة @theme في الإصدار v4. إذا كان مشروعك يُخصّص اللوحة، فقد تختلف الألوان المعروضة فعليًا عما هو موضح هنا لنفس اسم الفئة.