Tailwind CSS v4.2
Four New Neutral Color Families
Tailwind CSS v4.2 brings four carefully crafted neutral palettes — Taupe, Mauve, Mist and Olive — each with unique character and warmth.
Complete Palettes
11 shades per family, from 50 to 950. Click any swatch to copy its OKLCH value.
Taupe
hue ~40灰褐 — 温暖的大地色调中性色，带有微妙的红棕色底色，优雅而沉稳
Mauve
hue ~323灰紫 — 优雅的紫粉中性色，带有柔和的紫色底色，精致而神秘
Mist
hue ~214雾蓝 — 清冷的蓝灰中性色，如同薄雾般轻柔，宁静而通透
Olive
hue ~107橄榄 — 自然的黄绿中性色，如同橄榄树叶般沉静，清新而有机
Design in Action
Each color family has its own personality. Here are some examples of how they might be used in real interfaces.
Sarah Chen
Product Designer
"The new taupe palette adds a warmth to neutral interfaces that feels sophisticated without being distracting."
DesignUI/UX
Analytics
Live2,847+12.5%
VisitorsPage ViewsBounce Rate
Tasks
3 of 5 doneReview components
Update tokens
Ship v4.2
Quick Actions
New File
Upload
Share
Export
Gradient Harmony
Smooth transitions within and between the new color families.
Taupe Flow
Mauve Dusk
Mist Breath
Olive Canopy
Warm Fusion
Cool Horizon
Side by Side
Compare all four families at every shade level.
| Shade | Taupe | Mauve | Mist | Olive |
|---|---|---|---|---|
| 50 | ||||
| 100 | ||||
| 200 | ||||
| 300 | ||||
| 400 | ||||
| 500 | ||||
| 600 | ||||
| 700 | ||||
| 800 | ||||
| 900 | ||||
| 950 |
Ready to Use
Copy the CSS variables directly into your project.
globals.css
@theme {
--color-taupe-50: oklch(98.6% 0.002 67.8);
--color-taupe-100: oklch(96% 0.002 17.2);
--color-taupe-200: oklch(92.2% 0.005 34.3);
--color-taupe-300: oklch(86.8% 0.007 39.5);
--color-taupe-400: oklch(71.4% 0.014 41.2);
--color-taupe-500: oklch(54.7% 0.021 43.1);
--color-taupe-600: oklch(43.8% 0.017 39.3);
--color-taupe-700: oklch(36.7% 0.016 35.7);
--color-taupe-800: oklch(26.8% 0.011 36.5);
--color-taupe-900: oklch(21.4% 0.009 43.1);
--color-taupe-950: oklch(14.7% 0.004 49.3);
}