Tailwind CSSにmauve、olive、mist、taupeの4つのニュートラルカラーパレットを追加

2026年02月18日 19:52 JST tailwindlabs/tailwindcss

https://github.com/tailwindlabs/tailwindcss/pull/19627

Tailwind CSS v4では、既存のstone、slate、gray、zinc、neutralに加えて、mauve（モーブ）、olive（オリーブ）、mist（ミスト）、taupe（トープ）の4つの新しいニュートラルカラーパレットが追加されました。各パレットは知覚的に均一な色の遷移を実現するOKLch色空間で定義されており、デザインシステムやブランド美学に合わせた細やかな色選択が可能になります。

背景

Tailwind CSSは従来、5種類のニュートラルカラーパレット（stone、slate、gray、zinc、neutral）を提供してきました。これらはウォームトーンからクールトーンまでの基本的な無彩色の選択肢を網羅していましたが、より微妙な色調の違いを表現する手段は限られていました。

#19627 は、デザイナーがより多様なニュートラルカラーの選択肢を持てるようにするため、新たに4つのパレットを追加しています。各パレットは異なる色相を持ちながらも、ニュートラルカラーとしての控えめな彩度を維持しています。

技術的な変更

各カラーパレットは11段階のシェード（50、100、200、300、400、500、600、700、800、900、950）で構成され、OKLch色空間を使用して定義されています。

カラー定義の追加

packages/tailwindcss/src/compat/colors.ts に4つのパレット定義が追加されました。各パレットは色相（hue）の値で特徴づけられます：

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)',
},

4つのパレットの色相範囲は以下の通りです：

mauve: 色相320-326度（紫がかったピンク）
olive: 色相106-107度（黄緑寄りの緑）
mist: 色相197-229度（青から青緑）
taupe: 色相17-67度（オレンジから黄色）

CSS カスタムプロパティの追加

packages/tailwindcss/theme.css には対応するCSS変数が追加されました：

--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-950: oklch(14.5% 0.008 326);

これにより、bg-mauve-500、text-olive-600、border-mist-300、ring-taupe-400 などのユーティリティクラスが使用可能になります。

設計判断

OKLch色空間の採用により、知覚的に均一な明度の変化が実現されています。

OKLchはL（明度）、C（彩度）、h（色相）の3つのパラメータで色を表現する色空間で、従来のRGBやHSLと比較して人間の視覚に即した色の遷移を表現できます。例えばmauveパレットでは、明度（L）が98.5%から14.5%まで段階的に減少する一方、彩度（C）は0.034を最大値として控えめな範囲に収められています。

また、11段階のシェード構成は既存のカラーパレットとの一貫性を保つ選択です。50から950までの値は、Tailwind CSSの既存のカラーシステムと完全に互換性があり、ユーザーは新しいパレットを既存のデザインシステムにシームレスに統合できます。

まとめ

本PRは、Tailwind CSSのニュートラルカラーの選択肢を5種類から9種類に拡張し、デザイナーに微妙な色調の違いを表現する手段を提供しました。OKLch色空間の採用と既存のカラーシステムとの一貫性により、これらの新しいパレットはTailwind CSSのデザイン哲学に自然に統合されています。デザインシステムやブランドガイドラインに応じて、より細やかなニュートラルカラーの選択が可能になります。