رنگ‌های Tailwind CSS: پالت OKLCH در v4، رنگ‌های سفارشی و درجه‌ها

ساختار پالت رنگ Tailwind

پالت پیش‌فرض Tailwind v4.3 شامل 26 مقیاس نام‌دار است. هفده‌تای آن‌ها رنگی‌اند: 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 اضافه شدند. سیاه و سفید هم جداگانه وجود دارند.

همهٔ مقیاس‌ها همان 11 درجه را دارند: 50، 100، 200 تا 900، و 950. درجهٔ 50 تقریباً سفید است و 950 تقریباً سیاه. هر کلاس از یوتیلیتی، رنگ و درجه تشکیل می‌شود: bg-blue-500، text-rose-700، border-zinc-200.

شمارهٔ درجه جایگاهی در مقیاس است، نه مقدار روشنایی. روشنایی OKLCH درجهٔ 500 از 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-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 معمولی و استایل‌های inline هم کار می‌کند.

خود پالت از نو طراحی نشد، فقط دوباره تنظیم شد. اگر blue-500 نسخهٔ v3 (#3b82f6) را به OKLCH تبدیل کنید، دقیقاً همان روشنایی و فام blue-500 نسخهٔ v4 را دارد. فقط کروما بالا رفت، از 0.188 به 0.214. بقیهٔ مقیاس آبی هم همین الگو را دارد، به‌جز blue-400 که 0.7 واحد تیره‌تر هم شد. کنتراست تقریباً تغییر نمی‌کند، در حالی که رنگ‌ها زنده‌تر به نظر می‌رسند.

این کرومای اضافه از sRGB فراتر می‌رود. 94 رنگ از 286 رنگ v4 بیرون از sRGB و درون Display P3 قرار دارند و همه‌شان رنگی‌اند. در orange، 9 درجه از 11 درجه بیرون از sRGB است و در blue، 4 درجه (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 تنها برای یک رنگ تأکیدی کافی است. به محض اینکه به حالت هاور، پس‌زمینه‌های کم‌رنگ یا حالت تاریک نیاز داشتید، یک مقیاس کامل با درجه‌های شماره‌دار تعریف کنید.

چطور یک مقیاس سفارشی کامل از 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 این جست‌وجو را برای هر رنگی انجام می‌دهد و سه کلاس نزدیک‌تر را نشان می‌دهد.

پرسش و پاسخ