From d0a56128721b7be01703b7879056f38443239fc5 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 18 Feb 2026 05:52:35 -0500
Subject: [PATCH] Add mauve, olive, mist, and taupe color palettes (#19627)

## Summary

This PR adds four new neutral color palettes to Tailwind CSS: `mauve`,
`olive`, `mist`, and `taupe`. Each palette includes 11 shades (50, 100,
200, 300, 400, 500, 600, 700, 800, 900, 950) defined using the OKLch
color space for perceptually uniform color transitions.

These new palettes expand the available neutral color options beyond the
existing stone, slate, gray, zinc, and neutral palettes, providing
designers with more nuanced choices for different design systems and
brand aesthetics.

The changes include:
- Added color definitions to `packages/tailwindcss/src/compat/colors.ts`
- Added corresponding CSS custom properties to
`packages/tailwindcss/theme.css`

## Test plan

To verify these changes:
1. Build the project and ensure no compilation errors occur
2. Verify that the new color palettes are available in the Tailwind
config
3. Test that utilities like `bg-mauve-500`, `text-olive-600`,
`border-mist-300`, and `ring-taupe-400` work correctly
4. Confirm that the colors render with proper OKLch values in the
browser

https://claude.ai/code/session_01QhC1ZYkW3pCd55WbbqYBNV

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
---
 CHANGELOG.md                                  |  3 +-
 packages/tailwindcss/src/compat/colors.ts     | 52 +++++++++++++++++++
 .../src/source-maps/source-map.test.ts        |  4 +-
 packages/tailwindcss/theme.css                | 48 +++++++++++++++++
 4 files changed, 104 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f6d9407f6..376db05cc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,12 +10,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
+- Add `mauve`, `olive`, `mist`, and `taupe` color palettes to the default theme ([`#19627`](https://github.com/tailwindlabs/tailwindcss/pull/19627))
 - Add `@tailwindcss/webpack` loader for Tailwind CSS v4 ([#19610](https://github.com/tailwindlabs/tailwindcss/pull/19610))
 - Add `pbs-*`, `pbe-*`, `mbs-*`, `mbe-*`, `scroll-pbs-*`, `scroll-pbe-*`, `scroll-mbs-*`, `scroll-mbe-*`, `border-bs-*`, `border-be-*` utilities for `padding-block-start`, `padding-block-end`, `margin-block-start`, `margin-block-end`, `scroll-padding-block-start`, `scroll-padding-block-end`, `scroll-margin-block-start`, `scroll-margin-block-end`, `border-block-start`, and `border-block-end` ([`#19601`](https://github.com/tailwindlabs/tailwindcss/pull/19601))
 - Add `inline-*`, `min-inline-*`, `max-inline-*`, `block-*`, `min-block-*`, `max-block-*` utilities for `inline-size`, `min-inline-size`, `max-inline-size`, `block-size`, `min-block-size`, and `max-block-size` ([#19612](https://github.com/tailwindlabs/tailwindcss/pull/19612))
 - Add `inset-s-*`, `inset-e-*`, `inset-bs-*`, `inset-be-*` utilities for `inset-inline-start`, `inset-inline-end`, `inset-block-start`, and `inset-block-end` ([#19613](https://github.com/tailwindlabs/tailwindcss/pull/19613))
 - Add `font-features-*` utility for `font-feature-settings` ([#19623](https://github.com/tailwindlabs/tailwindcss/pull/19615))
-- Add '.jj' to ignored content directories ([#19687](https://github.com/tailwindlabs/tailwindcss/pull/19687))
+- Add `.jj` to ignored content directories ([#19687](https://github.com/tailwindlabs/tailwindcss/pull/19687))
 
 ### Fixed
 
diff --git a/packages/tailwindcss/src/compat/colors.ts b/packages/tailwindcss/src/compat/colors.ts
index 2f443b4b6..a1d162c54 100644
--- a/packages/tailwindcss/src/compat/colors.ts
+++ b/packages/tailwindcss/src/compat/colors.ts
@@ -69,6 +69,58 @@ export default {
     '900': 'oklch(21.6% 0.006 56.043)',
     '950': 'oklch(14.7% 0.004 49.25)',
   },
+  mauve: {
+    '50': 'oklch(98.5% 0 0)',
+    '100': 'oklch(96% 0.003 325.6)',
+    '200': 'oklch(92.2% 0.005 325.62)',
+    '300': 'oklch(86.5% 0.012 325.68)',
+    '400': 'oklch(71.1% 0.019 323.02)',
+    '500': 'oklch(54.2% 0.034 322.5)',
+    '600': 'oklch(43.5% 0.029 321.78)',
+    '700': 'oklch(36.4% 0.029 323.89)',
+    '800': 'oklch(26.3% 0.024 320.12)',
+    '900': 'oklch(21.2% 0.019 322.12)',
+    '950': 'oklch(14.5% 0.008 326)',
+  },
+  olive: {
+    '50': 'oklch(98.8% 0.003 106.5)',
+    '100': 'oklch(96.6% 0.005 106.5)',
+    '200': 'oklch(93% 0.007 106.5)',
+    '300': 'oklch(88% 0.011 106.6)',
+    '400': 'oklch(73.7% 0.021 106.9)',
+    '500': 'oklch(58% 0.031 107.3)',
+    '600': 'oklch(46.6% 0.025 107.3)',
+    '700': 'oklch(39.4% 0.023 107.4)',
+    '800': 'oklch(28.6% 0.016 107.4)',
+    '900': 'oklch(22.8% 0.013 107.4)',
+    '950': 'oklch(15.3% 0.006 107.1)',
+  },
+  mist: {
+    '50': 'oklch(98.7% 0.002 197.1)',
+    '100': 'oklch(96.3% 0.002 197.1)',
+    '200': 'oklch(92.5% 0.005 214.3)',
+    '300': 'oklch(87.2% 0.007 219.6)',
+    '400': 'oklch(72.3% 0.014 214.4)',
+    '500': 'oklch(56% 0.021 213.5)',
+    '600': 'oklch(45% 0.017 213.2)',
+    '700': 'oklch(37.8% 0.015 216)',
+    '800': 'oklch(27.5% 0.011 216.9)',
+    '900': 'oklch(21.8% 0.008 223.9)',
+    '950': 'oklch(14.8% 0.004 228.8)',
+  },
+  taupe: {
+    '50': 'oklch(98.6% 0.002 67.8)',
+    '100': 'oklch(96% 0.002 17.2)',
+    '200': 'oklch(92.2% 0.005 34.3)',
+    '300': 'oklch(86.8% 0.007 39.5)',
+    '400': 'oklch(71.4% 0.014 41.2)',
+    '500': 'oklch(54.7% 0.021 43.1)',
+    '600': 'oklch(43.8% 0.017 39.3)',
+    '700': 'oklch(36.7% 0.016 35.7)',
+    '800': 'oklch(26.8% 0.011 36.5)',
+    '900': 'oklch(21.4% 0.009 43.1)',
+    '950': 'oklch(14.7% 0.004 49.3)',
+  },
   red: {
     '50': 'oklch(97.1% 0.013 17.38)',
     '100': 'oklch(93.6% 0.032 17.717)',
diff --git a/packages/tailwindcss/src/source-maps/source-map.test.ts b/packages/tailwindcss/src/source-maps/source-map.test.ts
index 8433e8aa0..02d8a434a 100644
--- a/packages/tailwindcss/src/source-maps/source-map.test.ts
+++ b/packages/tailwindcss/src/source-maps/source-map.test.ts
@@ -178,8 +178,8 @@ test('source maps trace back to @import location', async ({ expect }) => {
     'theme.css: 5:22 <- 4:22',
     'theme.css: 6:4 <- 6:2-8:0',
     'theme.css: 7:13 <- 8:13',
-    'theme.css: 8:4-43 <- 446:2-54',
-    'theme.css: 9:4-48 <- 449:2-59',
+    'theme.css: 8:4-43 <- 494:2-54',
+    'theme.css: 9:4-48 <- 497:2-59',
     'index.css: 12:0-12 <- 4:0-37',
     'preflight.css: 13:2-59 <- 7:0-11:23',
     'preflight.css: 14:4-26 <- 12:2-24',
diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
index 52d447f7f..502f5c752 100644
--- a/packages/tailwindcss/theme.css
+++ b/packages/tailwindcss/theme.css
@@ -271,6 +271,54 @@
   --color-stone-900: oklch(21.6% 0.006 56.043);
   --color-stone-950: oklch(14.7% 0.004 49.25);
 
+  --color-mauve-50: oklch(98.5% 0 0);
+  --color-mauve-100: oklch(96% 0.003 325.6);
+  --color-mauve-200: oklch(92.2% 0.005 325.62);
+  --color-mauve-300: oklch(86.5% 0.012 325.68);
+  --color-mauve-400: oklch(71.1% 0.019 323.02);
+  --color-mauve-500: oklch(54.2% 0.034 322.5);
+  --color-mauve-600: oklch(43.5% 0.029 321.78);
+  --color-mauve-700: oklch(36.4% 0.029 323.89);
+  --color-mauve-800: oklch(26.3% 0.024 320.12);
+  --color-mauve-900: oklch(21.2% 0.019 322.12);
+  --color-mauve-950: oklch(14.5% 0.008 326);
+
+  --color-olive-50: oklch(98.8% 0.003 106.5);
+  --color-olive-100: oklch(96.6% 0.005 106.5);
+  --color-olive-200: oklch(93% 0.007 106.5);
+  --color-olive-300: oklch(88% 0.011 106.6);
+  --color-olive-400: oklch(73.7% 0.021 106.9);
+  --color-olive-500: oklch(58% 0.031 107.3);
+  --color-olive-600: oklch(46.6% 0.025 107.3);
+  --color-olive-700: oklch(39.4% 0.023 107.4);
+  --color-olive-800: oklch(28.6% 0.016 107.4);
+  --color-olive-900: oklch(22.8% 0.013 107.4);
+  --color-olive-950: oklch(15.3% 0.006 107.1);
+
+  --color-mist-50: oklch(98.7% 0.002 197.1);
+  --color-mist-100: oklch(96.3% 0.002 197.1);
+  --color-mist-200: oklch(92.5% 0.005 214.3);
+  --color-mist-300: oklch(87.2% 0.007 219.6);
+  --color-mist-400: oklch(72.3% 0.014 214.4);
+  --color-mist-500: oklch(56% 0.021 213.5);
+  --color-mist-600: oklch(45% 0.017 213.2);
+  --color-mist-700: oklch(37.8% 0.015 216);
+  --color-mist-800: oklch(27.5% 0.011 216.9);
+  --color-mist-900: oklch(21.8% 0.008 223.9);
+  --color-mist-950: oklch(14.8% 0.004 228.8);
+
+  --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);
+
   --color-black: #000;
   --color-white: #fff;