The Four New Color Palettes added to Tailwind CSS v4.2

Tailwind CSS v4.2 introduces four new palettes to the growing, default color scale. However, these new additions aren’t overly expressive, instead these fresh options introduce a few neutral swatches to the overall offering. Each of the four (namely Mauve, Olive, Mist and Taupe) features a range of rather subtle hues — these are earthy, muted tones that stand in contrast to the more vivid options already available.

I guess in practice, these new palettes go alongside the likes of slate or zinc — all of which are softer color ranges. These new additions may help when you want just a hint of color rather than something more shouty. I figured we’d take a quick look at them to get a visual sense of what they offer:

Why oklch?

As with all of the Tailwind CSS palettes, these four new options are defined in the uniform color space oklch. Each value has three components: lightness (0–100%), chroma (roughly 0–0.4), and hue angle (0–360°). Evil Martians published an excellent post that explains the benefit of using OKLCH, noting that it makes “color feel predictable, expressive, and safe to use”.

The key advantage of oklch? The lightness steps up from one shade to another feel visually even. Chroma across all four palettes peaks around 0.031–0.034 — barely above zero — which is what keeps them firmly in neutral territory despite having a distinct hue. Will you be using them?

In use

Here’s an example look at how all four palettes look side by side — including the full ramp from 50 to 950, so you can compare the hue character of each.

Color reference

Source values from packages/tailwindcss/theme.css · hex approximations computed from oklch

mauve

Shade	Swatch	Hex	oklch
50		#fafafa	oklch(98.5% 0 0)
100		#f3f1f3	oklch(96% 0.003 325.6)
200		#e7e4e7	oklch(92.2% 0.005 325.62)
300		#d7d0d7	oklch(86.5% 0.012 325.68)
400		#a89ea9	oklch(71.1% 0.019 323.02)
500		#79697b	oklch(54.2% 0.034 322.5)
600		#594c5b	oklch(43.5% 0.029 321.78)
700		#463947	oklch(36.4% 0.029 323.89)
800		#2a212c	oklch(26.3% 0.024 320.12)
900		#1d161e	oklch(21.2% 0.019 322.12)
950		#0c090c	oklch(14.5% 0.008 326)

olive

Shade	Swatch	Hex	oklch
50		#fbfbf9	oklch(98.8% 0.003 106.5)
100		#f4f4f0	oklch(96.6% 0.005 106.5)
200		#e8e8e3	oklch(93% 0.007 106.5)
300		#d8d8d0	oklch(88% 0.011 106.6)
400		#abab9c	oklch(73.7% 0.021 106.9)
500		#7c7c67	oklch(58% 0.031 107.3)
600		#5b5b4b	oklch(46.6% 0.025 107.3)
700		#474739	oklch(39.4% 0.023 107.4)
800		#2b2b22	oklch(28.6% 0.016 107.4)
900		#1d1d16	oklch(22.8% 0.013 107.4)
950		#0c0c09	oklch(15.3% 0.006 107.1)

mist

Shade	Swatch	Hex	oklch
50		#f9fbfb	oklch(98.7% 0.002 197.1)
100		#f1f3f3	oklch(96.3% 0.002 197.1)
200		#e3e7e8	oklch(92.5% 0.005 214.3)
300		#d0d6d8	oklch(87.2% 0.007 219.6)
400		#9ca8ab	oklch(72.3% 0.014 214.4)
500		#67787c	oklch(56% 0.021 213.5)
600		#4b585b	oklch(45% 0.017 213.2)
700		#394447	oklch(37.8% 0.015 216)
800		#22292b	oklch(27.5% 0.011 216.9)
900		#161b1d	oklch(21.8% 0.008 223.9)
950		#090b0c	oklch(14.8% 0.004 228.8)

taupe

Shade	Swatch	Hex	oklch
50		#fbfaf9	oklch(98.6% 0.002 67.8)
100		#f3f1f1	oklch(96% 0.002 17.2)
200		#e8e4e3	oklch(92.2% 0.005 34.3)
300		#d8d2d0	oklch(86.8% 0.007 39.5)
400		#aba09c	oklch(71.4% 0.014 41.2)
500		#7c6d67	oklch(54.7% 0.021 43.1)
600		#5b4f4b	oklch(43.8% 0.017 39.3)
700		#473c39	oklch(36.7% 0.016 35.7)
800		#2b2422	oklch(26.8% 0.011 36.5)
900		#1d1816	oklch(21.4% 0.009 43.1)
950		#0c0a09	oklch(14.7% 0.004 49.3)

---

---