ベースカラーを選んで、知覚的に均一な OKLCH ステップで 11 シェードの Tailwind パレット（50-950）を取得。v3 config、v4 @theme、CSS 変数として出力可能。
/* Tailwind v4 — @theme block in your main CSS */
@theme {
--color-brand-50: #f2f7ff;
--color-brand-100: #e2ebff;
--color-brand-200: #c5d3ff;
--color-brand-300: #a5b2ff;
--color-brand-400: #858dff;
--color-brand-500: #6a6cff;
--color-brand-600: #5854f3;
--color-brand-700: #463bd1;
--color-brand-800: #342ba4;
--color-brand-900: #261f7c;
--color-brand-950: #120e49;
}優れたデザインシステムには単一のブランドカラー以上のものが必要です：背景用の 50、アクセント用の 500、ライトテーマでの本文用 900、そしてその間に 8 つの均等な刻みが必要。HSL で手作業で計算するのは面倒です — HSL の lightness は知覚的に均一ではないため、同じ L でも黄 500 は青 500 よりずっと明るく見えます。本ジェネレーターは OKLCH（Tailwind v4 自体が使用するカラースペース）で変換するため、ベース hue に関係なくすべてのステップが均等に見えます。ベース hex を選択（またはプリセットを使用）し、色名を付け、Tailwind v3 config、Tailwind v4 @theme ブロック、またはプレーン CSS カスタムプロパティとしてエクスポート。
Step | Lightness ターゲット (OKLCH L) | Chroma 係数 50 | 0.98 | 0.15 100 | 0.95 | 0.30 200 | 0.89 | 0.55 300 | 0.81 | 0.80 400 | 0.72 | 1.00 ← 最大 chroma 500 | 0.62 | 1.00 ← ベース hue 600 | 0.55 | 1.00 700 | 0.47 | 0.95 800 | 0.39 | 0.80 900 | 0.32 | 0.65 950 | 0.22 | 0.45 両極で chroma が先細りするため、50 と 950 が不自然に飽和して見えません。