محدد ألوان Tailwind

ابحث عن أقرب كلاس لون Tailwind CSS لأي قيمة HEX أو RGB

جرب مثالاً

اللون (HEX)

أقرب ألوان Tailwind

انقر على أي نتيجة لنسخ اسم الكلاس

جرب أيضاً:محول الألوان فاحص تباين الألوان منشئ لوحة الألوان محدد أسماء الألوان مولّد تدرجات CSS

ما هو محدد ألوان Tailwind؟

يأتي Tailwind CSS مزوداً بلوحة ألوان افتراضية تضم 22 عائلة لونية، تحتوي كل منها على 11 درجة تتراوح من 50 (الأفتح) إلى 950 (الأغمق). يمنحك ذلك 242 لوناً محدداً مسبقاً بأسماء كلاسات مثل bg-indigo-500 أو text-red-400. حين تملك قيمة hex أو RGB من ملف تصميم وتحتاج إلى إيجاد أقرب كلاس Tailwind، يحسب محدد ألوان Tailwind المسافة بين مدخلك وكل لون في اللوحة، ثم يعيد أفضل التطابقات.

تعمل عملية المطابقة بتحويل لون مدخلك وكل لون من ألوان Tailwind إلى ثلاثيات RGB، ثم حساب المسافة الإقليدية في فضاء الألوان ثلاثي الأبعاد: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). لون Tailwind الأصغر مسافةً هو التطابق الأقرب. إذا كانت المسافة صفراً، فمدخلك يتطابق تماماً مع درجة Tailwind الافتراضية.

هذا مختلف عن محوّل الألوان العام أو محدد أسماء الألوان. يُغيِّر المحوّل الصيغ (hex إلى HSL، أو RGB إلى CMYK). أما محدد الأسماء فيُطابق ضد الـ 148 لوناً CSS المسماة. ويُطابق محدد ألوان Tailwind تحديداً ضد لوحة Tailwind CSS الافتراضية، مُعيداً أسماء كلاسات جاهزة للصق مباشرة في الترميز.

لماذا تستخدم محدد ألوان Tailwind هذا؟

مقارنة قيمة hex يدوياً بـ 242 درجة من درجات Tailwind تعني التمرير عبر الوثائق أو ملفات الضبط. تُجري هذه الأداة حساب المسافة لكل درجة وتعرض أفضل التطابقات مرتبةً حسب القرب، مع قيم hex الدقيقة وأسماء كلاسات Tailwind الجاهزة للنسخ.

🎯

تعيين أي لون إلى كلاسات Tailwind

الصق رمز hex من Figma أو Sketch أو دليل العلامة التجارية واحصل فوراً على أقرب كلاس لون Tailwind. تعيد الأداة تطابقات متعددة مرتبة لتختار الدرجة المناسبة لتصميمك.

🔒

معالجة تُولي الخصوصية الأولوية

تعمل جميع عمليات حساب الألوان في متصفحك. لا تُرسل أي قيم ألوان إلى أي خادم. تعمل الأداة بدون اتصال بعد تحميل الصفحة.

⚡

مطابقة فورية أثناء الكتابة

غيّر حرفاً واحداً في مدخل hex وتُعاد حسابات النتائج فوراً. لا زر إرسال، ولا مؤشر تحميل، ولا أي طلبات إلى الخادم.

📋

نسخ أسماء الكلاسات مباشرة

انقر على أي نتيجة لنسخ اسم كلاس Tailwind (مثل indigo-500) إلى الحافظة. الصقه في JSX أو HTML أو ضبط Tailwind دون إعادة تنسيق.

حالات استخدام محدد ألوان Tailwind

ترجمة التصميم إلى كود

يستطيع مطورو الواجهات الأمامية الذين يتلقون قيم hex من تصميم Figma إيجاد أقرب كلاس Tailwind بدلاً من إضافة ألوان مخصصة. يُبقي ذلك قاعدة الكود متوافقة مع اللوحة الافتراضية ويُقلل تضخم tailwind.config.js.

ترحيل CSS القائم إلى Tailwind

يستطيع مهندسو الخلفية الذين يُحوّلون مشروعاً قديماً إلى Tailwind CSS البحث عن كل لون hex موجود واستبداله بأقرب كلاس utility. يُسرّع ذلك الترحيل دون إعادة اختيار كل لون من الصفر.

تدقيق نظام التصميم

تستطيع فرق DevOps والمنصات التي تُدقق نظام تصميم قائم على Tailwind التحقق من الألوان المخصصة القريبة بما يكفي من الدرجات الافتراضية لتحل محلها، مما يُقلل عبء صيانة اللوحة.

تطوير مكتبة المكونات

يستطيع مهندسو ضمان الجودة الذين يختبرون مكتبة مكونات التحقق من أن الألوان المُعرضة تُطابق درجات Tailwind المتوقعة بلصق قيم hex المُسحوبة في المحدد والتحقق من درجة المسافة.

تنسيق لوحات تحكم البيانات

يستطيع مهندسو البيانات الذين يبنون لوحات تحكم بمكتبات رسوم بيانية بنمط Tailwind تعيين ألوان العلامة التجارية أو قيم hex المُقدَّمة من العميل إلى أقرب درجة Tailwind لتنسيق متسق عبر المكونات.

تعلم لوحة ألوان Tailwind

يستطيع الطلاب والمطورون الجدد على Tailwind CSS كتابة قيم hex عشوائية واستكشاف عائلة اللوحة ورقم الدرجة التي تقع فيها، مما يُرسّخ الإلمام بالفروق بين color-500 و color-700.

لوحة الألوان الافتراضية لـ Tailwind CSS

يتضمن Tailwind CSS v3 اثنتين وعشرين عائلة لونية. تملك كل عائلة 11 درجة: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, و 950. تُعدّ الدرجة 500 'القاعدة' لكل عائلة. يسرد الجدول أدناه كل عائلة مع أفتح درجاتها (50) وأغمقها (950) بقيم hex.

عائلة اللون	الدرجات	50 (الأفتح)	950 (الأغمق)
slate	11	#f8fafc	#020617
gray	11	#f9fafb	#030712
zinc	11	#fafafa	#09090b
neutral	11	#fafafa	#0a0a0a
stone	11	#fafaf9	#0c0a09
red	11	#fef2f2	#450a0a
orange	11	#fff7ed	#431407
amber	11	#fffbeb	#451a03
yellow	11	#fefce8	#422006
lime	11	#f7fee7	#1a2e05
green	11	#f0fdf4	#052e16
emerald	11	#ecfdf5	#022c22
teal	11	#f0fdfa	#042f2e
cyan	11	#ecfeff	#083344
sky	11	#f0f9ff	#082f49
blue	11	#eff6ff	#172554
indigo	11	#eef2ff	#1e1b4b
violet	11	#f5f3ff	#2e1065
purple	11	#faf5ff	#3b0764
fuchsia	11	#fdf4ff	#350820
pink	11	#fdf2f8	#500724
rose	11	#fff1f2	#4c0519

لوحة ألوان Tailwind v3 مقابل v4

يُغيِّر Tailwind CSS v4 طريقة تعريف الألوان لكنه يحتفظ بنفس أسماء اللوحة الافتراضية وأرقام الدرجات.

Tailwind CSS v3

تُعرَّف الألوان في tailwind.config.js كقيم hex. تتضمن اللوحة الافتراضية 22 عائلة لونية (من slate إلى rose) بـ 11 درجة لكل منها (50-950). تُضاف الألوان المخصصة عبر theme.extend.colors. تتبع أسماء الكلاسات النمط bg-{color}-{shade} و text-{color}-{shade} وما شابه.

Tailwind CSS v4

تنتقل الألوان إلى خصائص CSS مخصصة مُعرَّفة في @theme. اللوحة الافتراضية هي نفس الـ 22 عائلة والـ 11 درجة، لكن القيم تُخزَّن بصيغة OKLCH بدلاً من hex. تستخدم الألوان المخصصة الصيغة @theme { --color-brand: oklch(0.5 0.2 240); }. أسماء الكلاسات لم تتغير: bg-brand و text-indigo-500 وغيرها.

أمثلة على الكود

ابحث عن أقرب لون Tailwind برمجياً باستخدام المسافة الإقليدية في فضاء RGB. يأخذ كل مثال سلسلة hex ويعيد أقرب اسم كلاس Tailwind من اللوحة الافتراضية.

JavaScript

// Find nearest Tailwind color from hex input
const TAILWIND_COLORS = {
  'red-500': [239, 68, 68],
  'blue-500': [59, 130, 246],
  'indigo-500': [99, 102, 241],
  'green-500': [34, 197, 94],
  // ... full palette (242 entries)
}

function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}

function nearestTailwind(hex) {
  const [r, g, b] = hexToRgb(hex)
  let best = '', bestDist = Infinity
  for (const [name, [r2, g2, b2]] of Object.entries(TAILWIND_COLORS)) {
    const d = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (d < bestDist) { bestDist = d; best = name }
  }
  return best
}

nearestTailwind('#6366f1') // → "indigo-500" (exact match)
nearestTailwind('#5a5de0') // → "indigo-500" (distance: 19.3)
nearestTailwind('#ff4500') // → "red-500" (distance: 57.2)

Python

import math

TAILWIND = {
    "red-500": (239, 68, 68),
    "blue-500": (59, 130, 246),
    "indigo-500": (99, 102, 241),
    "green-500": (34, 197, 94),
    # ... full palette
}

def hex_to_rgb(h: str) -> tuple[int, int, int]:
    h = h.lstrip("#")
    return int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)

def nearest_tailwind(hex_str: str) -> tuple[str, float]:
    r, g, b = hex_to_rgb(hex_str)
    name, dist = min(
        TAILWIND.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return name, round(dist, 1)

print(nearest_tailwind("#6366f1"))  # → ('indigo-500', 0.0)
print(nearest_tailwind("#1e293b"))  # → ('slate-800', 0.0)
print(nearest_tailwind("#333333"))  # → ('zinc-700', 17.5)

CLI (Tailwind config)

# tailwind.config.js — extend palette with a custom color
# mapped to its nearest default Tailwind shade
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          // Your brand color: #5a5de0
          // Nearest Tailwind: indigo-500 (#6366f1)
          // Use the exact brand color, reference Tailwind for context
          DEFAULT: '#5a5de0',
          light: '#8183f0',   // near indigo-300
          dark: '#3b3dab',    // near indigo-700
        }
      }
    }
  }
}

# Check Tailwind classes in markup:
# npx tailwindcss -o output.css --content ./src/**/*.html

أسئلة شائعة

كم عدد الألوان في اللوحة الافتراضية لـ Tailwind CSS؟

تحتوي اللوحة الافتراضية في Tailwind CSS v3 وv4 على 242 لوناً: 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, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). تتوفر أيضاً الأسود والأبيض كأدوات مستقلة.

ما الفرق بين محدد ألوان Tailwind ومحدد أسماء ألوان CSS؟

يُطابق محدد أسماء ألوان CSS مدخلك ضد الـ 148 لوناً CSS المسماة (مثل Tomato وSlateBlue وCrimson). أما محدد ألوان Tailwind فيُطابق ضد 242 لوناً في لوحة Tailwind الافتراضية ويعيد أسماء كلاسات مثل red-500 أو indigo-400. ناتج محدد Tailwind كلاس utility جاهز للاستخدام مباشرة في HTML أو JSX.

هل يمكنني استخدام هذه الأداة مع مشاريع Tailwind CSS v4؟

نعم. تستخدم اللوحة الافتراضية في Tailwind v4 نفس أسماء الألوان وأرقام الدرجات في v3. قيم hex شبه متطابقة. الفارق الرئيسي أن v4 يُخزّن الألوان داخلياً بصيغة OKLCH، لكن المخرجات البصرية تُطابق v3 للوحة القياسية. إن خصّصت ثيم v4 بقيم OKLCH غير افتراضية، فالمحدد يُطابق ضد اللوحة القياسية فحسب.

ماذا تعني درجة المسافة في النتائج؟

درجة المسافة هي المسافة الإقليدية بين لون مدخلك ولون Tailwind المُطابَق في فضاء RGB. مسافة 0 تعني تطابقاً تاماً. مسافة أقل من 10 قريبة جداً وعادةً لا تميّزها العين البشرية. المسافات فوق 30 تشير إلى فارق ملحوظ. تُساعدك الدرجة على تقرير ما إذا كنت ستستخدم كلاس Tailwind المُقترح أو تُضيف لوناً مخصصاً.

هل يجب دائماً استخدام أقرب لون Tailwind بدلاً من hex مخصص؟

ليس دائماً. إذا كانت المسافة إلى أقرب درجة Tailwind صغيرة (أقل من 10-15)، فالتبديل إلى الكلاس الافتراضي يُقلل حجم الضبط ويُبقي لوحتك متسقة. إذا كانت المسافة كبيرة، أو كان اللون لوناً خاصاً للعلامة التجارية يجب مطابقته بدقة، أضفه كلون مخصص في ضبط Tailwind. يُساعدك المحدد على اتخاذ هذا القرار بعرض المسافة الدقيقة.

لماذا توجد خمس عائلات رمادية (slate وgray وzinc وneutral وstone)؟

لكل عائلة رمادية لون متضمَّن مختلف. تملك slate ميلاً أزرق تجعلها مناسبة لتصميمات واجهات المستخدم ذات النبرة الزرقاء. أما gray فهي رمادي محايد متوازن بين الدفء والبرودة. وzinc تميل قليلاً نحو البرودة دون الزرقة. وneutral رمادي أكروماتيكي حقيقي بلا انحياز لوني. أما stone فلها لون بني دافئ. أدرج Tailwind العائلات الخمس لتُطابق الرمادي مع درجة حرارة ألوان تصميمك دون الحاجة إلى ضبط مخصص.

كيف أُضيف اللون المُطابَق إلى مشروع Tailwind الخاص بي؟

إذا كان التطابق درجةً افتراضيةً تاماً أو شبه تام، استخدم اسم الكلاس مباشرة: bg-indigo-500 أو text-red-400 أو border-emerald-600. لا حاجة لأي تغيير في الضبط. إن أردت استخدام لون مخصص قريب من درجة Tailwind لكنه غير مطابق، أضفه في tailwind.config.js تحت theme.extend.colors في v3، أو كخاصية CSS مخصصة في @theme في v4. يمنحك المحدد صيغة اسم الكلاس للاستخدام في كلتا الحالتين.