צבעי 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. מעליהם יש גם black ו-white.

לכל סולם אותן 11 דרגות: 50, 100, 200 וכן הלאה עד 900, ו-950. דרגה 50 כמעט לבנה, 950 כמעט שחורה. מחלקה היא ה-utility ועוד הצבע והדרגה: 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 וגם הירוקים, ה-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 רגיל ובסגנונות inline.

הפלטה עצמה כוונה מחדש, לא צוירה מחדש. כשממירים ל-OKLCH, ל-blue-500 של v3 (#3b82f6) יש בדיוק אותה בהירות ואותו גוון כמו ל-blue-500 של v4. רק הכרומה עלתה, מ-0.188 ל-0.214. שאר סולם הכחול מתנהג באותו אופן, חוץ מ-blue-400 שגם נעשה כהה יותר ב-0.7 נקודות. הניגודיות כמעט לא זזה, והצבעים נראים חיים יותר.

הכרומה הנוספת חורגת מ-sRGB. מתוך 286 הצבעים של v4, 94 נמצאים מחוץ ל-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 וכל utility צבע אחר, ובנוסף var(--color-brand) ב-CSS. מתקבלים HEX, rgb(), hsl() ו-oklch().

כדי להחליף את פלטת ברירת המחדל במקום להרחיב אותה, אפסו קודם את מרחב השמות עם --color-*: initial, ואז הגדירו רק את הצבעים שאתם רוצים. מחלקות utility נוצרות רק למחלקות שאתם באמת משתמשים בהן, ולכן רוב הפרויקטים משאירים את ברירות המחדל.

@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 עושה את החיפוש הזה לכל צבע ומציג את שלוש המחלקות הקרובות ביותר.

שאלות ותשובות