Tailwindカラーパレットジェネレーター
基準色を11階調のTailwindスケールに変換
パレットプレビュー
パレットを設定
基準色に近い色相のTailwind系統が選ばれ、彩度が11階調にスケールされます
よく使うTailwind Colorから選択
CSSコード
例: primary → --color-primary-50 〜 950
@theme {
--color-brand-50: oklch(0.97 0.01 254.6);
--color-brand-100: oklch(0.93 0.03 255.58);
--color-brand-200: oklch(0.88 0.05 254.13);
--color-brand-300: oklch(0.81 0.09 251.81);
--color-brand-400: oklch(0.71 0.14 254.62);
--color-brand-500: oklch(0.62 0.19 259.82);
--color-brand-600: oklch(0.55 0.22 262.88);
--color-brand-700: oklch(0.49 0.21 264.38);
--color-brand-800: oklch(0.42 0.17 265.64);
--color-brand-900: oklch(0.38 0.13 265.52);
--color-brand-950: oklch(0.28 0.08 267.93);
}module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#F0F6FE',
100: '#DDEAFC',
200: '#C1DBFA',
300: '#95C5FB',
400: '#5DA3F9',
500: '#3B82F6',
600: '#2563EB',
700: '#1E4FD6',
800: '#1F41AC',
900: '#213B85',
950: '#182650',
},
},
},
},
};
Tailwindカラーパレットジェネレーターとは？
1つの基準色から、Tailwind v4の公式パレットと同じlightnessとhueカーブで11階調（50から950）を生成するツールです。ブランドカラーをTailwindに取り込みたいときや、デザイントークンを一気に揃えたいときに使えます。
プレビューのスウォッチはクリックで個別コピーでき、出力は@themeブロック（Tailwind v4）とtailwind.config.js形式（v3）から選べます。
使い方
- 基準色をHEX / OKLCH /
rgb()/hsl()で入力するか、カラーピッカーで選びます。 - 必要に応じてパレット名（CSS変数のベース名）を変更します。デフォルトは
brandです。 - 出力形式をHEX / OKLCHから選び、Tailwind v3向けにはv3 configタブに切り替えます。
- プレビューで11階調を確認し、
@themeブロックをまとめてコピーするか、個別スウォッチをクリックして1色ずつコピーします。
主な設定項目
基準色
パレット全体の起点になる色です。入力色のhueに最も近いTailwindの色系統が自動選択され、その系統の11階調テーブルが適用されます。プレビューのスウォッチをクリックすると、その段階の値がコピーされます。
CSS変数プレフィックス
primaryを指定すると--color-primary-50から--color-primary-950までの11個のCSS変数として出力されます。空白・大文字・記号はスラグ化（小文字化・記号除去）されて安全な変数名になります。
色形式
- OKLCH（おすすめ）: Tailwind v4公式と同じ表記で、色空間を維持したままスケール全体を表現できます
- HEX:
bg-brand-500のような既存ユーティリティと同じ記法で扱いたい場合に向きます - v3 config タブ:
tailwind.config.jsのtheme.extend.colorsに貼れるmodule.exports形式のJavaScriptコードを出力します
Tailwind 公式テーブルを使う強み
このツールは、Tailwindが公開している22色系統×11階調のOKLCHテーブルをそのまま利用しています。
- 公式と同じ見え方: 生成された
blue-500はTailwind公式のblue-500とほぼ同じ見え方になります - 手動チューニング済み: 各階調のlightnessとchromaはTailwindチームによって「淡く」「vividに」「締まりが出る」と調整されています
- hueベースの自動マッピング:
cyan寄りの色はskyやcyanテーブルから選ばれるため、入力色に近い系統が使われます
入出力例
たとえば基準色に#3b82f6（Tailwindのblue-500）、パレット名をprimaryにすると、Tailwind v4の@theme形式で次のようになります。
@theme {
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-300: #93c5fd;
--color-primary-400: #60a5fa;
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;
--color-primary-800: #1e40af;
--color-primary-900: #1e3a8a;
--color-primary-950: #172554;
}
出力形式をOKLCHに切り替えると、lightnessとchromaを保った色空間表記で得られます。v3 configタブに切り替えると、tailwind.config.jsのtheme.extend.colorsにそのまま貼れるmodule.exports形式のコードが出力されます。
活用シーン
- ブランドカラーを
bg-brand-500のような一貫したスケールでTailwindに取り込みたいとき primary/accent/surfaceなどのデザイントークンを11階調で一気に定義したいとき- 既存の色から50–950のフルスケールを逆算して、コンポーネントの配色定義を揃えたいとき
- 色空間（HEX / OKLCH）やTailwindバージョン（v4 / v3）を切り替えながら色案を検討・提示したいとき
使うときの注意点
- 色系統はhueだけで決まるため、明度や彩度の細かい違いでは系統が切り替わりません
- chromaは上限0.4で頭打ちになるため、極端に鮮やかな色はパレット全体で再現しきれないことがあります
- パレット名はスラグ化されるため、空白・大文字・記号は取り除かれます
