ألوان Tailwind CSS: لوحة v4 بصيغة OKLCH والألوان المخصصة والدرجات

كيف تُبنى لوحة ألوان Tailwind

تضم اللوحة الافتراضية في Tailwind v4.3 ستة وعشرين سلّمًا مسمّى. سبعة عشر منها لونية: red وorange وamber وyellow وlime وgreen وemerald وteal وcyan وsky وblue وindigo وviolet وpurple وfuchsia وpink وrose. وتسعة محايدة: slate وgray وzinc وneutral وstone من v3، إضافة إلى mauve وolive وmist وtaupe التي أُضيفت خلال v4. ويُضاف إليها الأسود والأبيض.

لكل سلّم الخطوات الإحدى عشرة نفسها: 50 و100 و200 وصولًا إلى 900، ثم 950. الدرجة 50 بيضاء تقريبًا، و950 سوداء تقريبًا. والكلاس يتكون من الأداة واللون والدرجة: bg-blue-500 وtext-rose-700 وborder-zinc-200.

رقم الدرجة موضع في السلّم، وليس قيمة إضاءة. فالدرجة 500 تتراوح إضاءتها في OKLCH بين 55.1% في gray و79.5% في yellow، ولهذا يتصرف yellow-500 وblue-500 بشكل مختلف تمامًا كلونين للنص.

أزرق Tailwind: كل درجة مع OKLCH وHex والتباين

إليك سلّم الأزرق كاملًا كما يعرّفه Tailwind v4. عمود Hex هو أقرب لون في sRGB، ونحصل عليه بخفض الكروما مع الحفاظ على الإضاءة والصبغة. نسب التباين قيم WCAG 2 مقيسة على قيمة Hex هذه.

blue-600 هي أول درجة تجتاز 4.5:1 لنص المحتوى على الأبيض. أما blue-500 فتجتاز على الأسود بنسبة 5.58:1 لكنها تفشل على الأبيض بنسبة 3.76:1. ولا توجد درجة زرقاء تجتاز 4.5:1 على الخلفيتين معًا، لذا تحتاج السمة الفاتحة والداكنة إلى درجتين مختلفتين.

أي درجات Tailwind تجتاز WCAG AA على الأبيض

أفتح درجة ناجحة تعتمد على الصبغة. فـ orange وamber وyellow وlime، وكذلك green وemerald وteal وcyan وsky، ما تزال فاتحة عند 500، لذا تحتاج إلى 700 لنص المحتوى. أما red وblue وviolet وpurple وfuchsia وpink وrose فتجتاز عند 600، وindigo منذ 500. ويبقى yellow الاستثناء: حتى yellow-600 تفشل مع النص الكبير بنسبة 2.93:1.

الإضاءة تتنبأ بالنتيجة أفضل من رقم الدرجة. فمن بين الألوان الـ286 كلها، تجتاز كل درجة إضاءتها في OKLCH أقل من 58% نسبة 4.5:1 على الأبيض، وتفشل كل درجة إضاءتها فوق 59.2%. اقرأ قيمة L في تعريف الكلاس وستعرف الجواب قبل أن تختبره.

كل الألوان المحايدة ما عدا olive تجتاز عند 500. فـ olive-500 إضاءتها 58% وصبغتها مائلة إلى الأصفر، ولا تبلغ سوى 4.25:1، لذا لا يمكن استبدال نص gray-500 بنص olive-500 دون فرق.

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

كان v3 يعرّف الألوان كقيم Hex في tailwind.config.js تحت theme.extend.colors. أما v4 فينقل الإعدادات إلى CSS: الألوان متغيرات سمة داخل @theme، مكتوبة بصيغة OKLCH ومتاحة كمتغيرات CSS، فتعمل var(--color-blue-500) في CSS العادي وفي الأنماط المضمّنة.

اللوحة نفسها أُعيدت معايرتها، لا رسمها من جديد. بعد التحويل إلى OKLCH، يملك blue-500 في v3 (#3b82f6) الإضاءة والصبغة نفسيهما تمامًا كما في blue-500 في v4. الكروما وحدها ارتفعت، من 0.188 إلى 0.214. وبقية سلّم الأزرق تتبع النمط نفسه، باستثناء blue-400 الذي صار أغمق أيضًا بمقدار 0.7 نقطة. يكاد التباين لا يتغير بينما تبدو الألوان أكثر حيوية.

هذه الكروما الإضافية تتجاوز sRGB. فـ 94 من ألوان v4 الـ286 تقع خارج sRGB وداخل Display P3، وكلها لونية. في orange تقع 9 درجات من 11 خارجه، وفي blue أربع (من 200 إلى 500). على شاشة P3 ترى اللون كاملًا، وعلى شاشة sRGB يعرض المتصفح لونًا قريبًا منه. يستهدف v4 متصفحات Safari 16.4 وChrome 111 وFirefox 128 أو أحدث، وكلها تفهم oklch().

@theme {
    --color-blue-500: oklch(62.3% 0.214 259.815);
}

.card {
    border-color: var(--color-blue-500);
}

كيف تضيف ألوانًا مخصصة في Tailwind v4

عرّف متغيرًا في نطاق الأسماء --color- داخل @theme. الجزء الذي يلي --color- يصبح اسم الكلاس، فيمنحك --color-brand الكلاسات bg-brand وtext-brand وborder-brand وring-brand وكل أدوات الألوان الأخرى، إضافة إلى var(--color-brand) في CSS. وتُقبل كل الصيغ: Hex وrgb() وhsl() وoklch().

لاستبدال اللوحة الافتراضية بدل توسيعها، أعد ضبط نطاق الأسماء أولًا بـ --color-*: initial، ثم عرّف الألوان التي تريدها فقط. تُولَّد الأدوات للكلاسات التي تستخدمها فعلًا فقط، لذا تحتفظ معظم المشاريع بالألوان الافتراضية.

@import 'tailwindcss';

@theme {
    --color-brand: #e4572e;
    --color-ink: oklch(21% 0.02 260);
}

يكفي --color-brand واحد للون تمييز واحد. لكن ما إن تحتاج إلى حالات hover أو خلفيات مُلوَّنة خفيفة أو الوضع الداكن، عرّف سلّمًا كاملًا بدرجات مرقّمة.

كيف تبني سلّمًا مخصصًا كاملًا من 50 إلى 950

وُلّد السلّم أدناه من #e4572e. إضاءته 63.7% تطابق الدرجة 500، فيبقى لون العلامة التجارية عند 500 تمامًا. تتبع الدرجات الأخرى منحنى الإضاءة في Tailwind وتحافظ على الصبغة نفسها، وتبلغ الكروما ذروتها عند 500 و600 ثم تتناقص نحو الطرفين، وكلها تقع داخل sRGB، لذا فقيم Hex دقيقة.

كما في صبغات Tailwind الدافئة، يحتاج هذا السلّم إلى 600 لنص المحتوى على الأبيض. تعطي brand-500 نسبة 3.68:1، وهذا يكفي للنص الكبير والأيقونات فقط.

@theme {
    --color-brand-50: oklch(97% 0.01103 36.478);
    --color-brand-100: oklch(93.477% 0.02574 36.478);
    --color-brand-200: oklch(88.485% 0.04964 36.478);
    --color-brand-300: oklch(81.145% 0.08641 36.478);
    --color-brand-400: oklch(71.064% 0.14524 36.478);
    --color-brand-500: oklch(63.723% 0.18385 36.478);
    --color-brand-600: oklch(56.583% 0.19167 36.478);
    --color-brand-700: oklch(49.952% 0.16921 36.478);
    --color-brand-800: oklch(43.729% 0.14814 36.478);
    --color-brand-900: oklch(38.935% 0.11766 36.478);
    --color-brand-950: oklch(27% 0.07538 36.478);
}

احتفظ بالدقة الكاملة عند اللصق. تقريب الإضاءة إلى 0.1% والكروما إلى ثلاث خانات عشرية يدفع brand-600 خارج sRGB بقليل، وهذا لا يضر، لكنه لم يعد يطابق قيمة Hex تمامًا.

كيف تعمل معدِّلات الشفافية مثل bg-blue-500/50

الشرطة المائلة بعد اللون تحدد قناة ألفا: bg-blue-500/50 هو blue-500 بشفافية 50%. كان v3 يترجم ذلك إلى rgb(59 130 246 / 0.5)، وهذا لا يعمل إلا مع الألوان التي يستطيع Tailwind تقسيمها إلى قنوات. أما الألوان المخصصة المعرّفة كمتغيرات CSS فكانت تحتاج إلى صيغة خاصة rgb(var(--brand) / <alpha-value>).

يترجم v4 المعدِّل إلى color-mix() في Oklab، فيمزج اللون مع transparent. وهذا يعمل مع أي لون: متغيرات السمة، والقيم الاعتباطية مثل bg-[#e4572e]/50، ومتغيرات CSS الخاصة بك.

الشفافية تغيّر التباين. فوق الأبيض يظهر blue-500/50 بلون #95bfff وblue-500/10 بلون #eaf2ff. النص بلون blue-600 يُقرأ بنسبة 5.25:1، لكن text-blue-600/60 ينخفض إلى 2.62:1 ويفشل حتى مع النص الكبير.

• blue-500#2b7fff
• blue-500/50 على الأبيض#95bfff
• blue-500/20 على الأبيض#d5e5ff
• blue-500/10 على الأبيض#eaf2ff

.bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}

كيف تجد أقرب كلاس Tailwind لأي قيمة Hex

قارن قيمة Hex بكل الدرجات الـ286 حسب المسافة الإدراكية في Oklab (ΔEOK). تحت 0.02 تقريبًا يصعب رؤية الفرق عند وضع اللونين جنبًا إلى جنب، فيمكن لكلاس Tailwind أن يحل محل لونك. وفوق 0.04 تقريبًا، أضف لونًا مخصصًا بدلًا من ذلك.

يعرض الجدول مطابقات حقيقية. قيم Hex القديمة من v3 تعود إلى الكلاس نفسه في v4، بينما يقع برتقالي علامة تجارية نموذجي مثل #ff5733 بين orange-600 وred-400. تجري صفحة Tailwind في PickShade هذا البحث لأي لون وتعرض أقرب ثلاثة كلاسات.

أسئلة وأجوبة