Tailwind カラーパレットジェネレーター。

色を 1 つ入力すると、50 から 950 まで 11 段階の Tailwind 風スケールができます。計算は、Tailwind v4 自身のパレットと同じ OKLCH です。入力した色は、明度がいちばん近いステップに、そのままの値で入ります。ブラウザ内で動くので、入力した内容がアップロードされることはありません。

@theme {
  --color-brand-50: oklch(0.971 0.011 256.695);
  --color-brand-100: oklch(0.937 0.025 257.646);
  --color-brand-200: oklch(0.884 0.049 259.79);
  --color-brand-300: oklch(0.809 0.09 259.44);
  --color-brand-400: oklch(0.705 0.151 259.626);
  --color-brand-500: oklch(0.623 0.188 259.815);
  --color-brand-600: oklch(0.578 0.195 259.687);
  --color-brand-700: oklch(0.505 0.169 259.846);
  --color-brand-800: oklch(0.445 0.141 259.626);
  --color-brand-900: oklch(0.395 0.113 260.11);
  --color-brand-950: oklch(0.257 0.073 259.785);
}

Tailwind のカラースケールの作り方

1. 色を入力します。 色見本から選ぶか、HEX、rgb()、hsl()、oklch() で入力します。最初は #3B82F6 が入っています。
2. スケールに名前を付けます。 名前はすべての変数の一部になり（--color-brand-500 のように）、最初は brand です。小文字に変換され、英数字とハイフン以外の文字はハイフンになります。
3. スケールを確認します。 最も明るい 50 から最も暗い 950 まで 11 個の色見本が並び、それぞれに HEX コードとコピーボタンがあります。入力した色には枠線が付き、「入力した色はステップ 500 です。」のように、どのステップかがページに表示されます。
4. コードをコピーします。 Tailwind v4 @theme タブと CSS 変数タブには、11 ステップすべての --color-<name>-<step> が oklch() の値で並んでいます。前者は @theme の中、後者は :root の中です。

スケールの仕組み

• 明度は、Tailwind v4 自身のパレット、その赤のスケールのカーブに従います。ステップ 50 で約 0.97、500 で 0.64、950 で 0.26 です。
• 彩度（色の鮮やかさ）も同じスケールのカーブに従い、600 でピークになります。値は、入力した色の彩度に合わせて調整されます。
• 色相は、どのステップでも入力した色の色相のままです。
• 入力した色は、自身の明度にいちばん近いステップに、そのままの値で入ります。デフォルトの #3B82F6 では、ステップ 500 です。
• sRGB で表示できないステップは、彩度を下げて範囲内に戻します。そのため、色見本のどの HEX コードも、画面で表示できる色です。

Tailwind と Codex で使う

Tailwind v4 のプロジェクトでは、@theme ブロックを、@import "tailwindcss" を含む CSS ファイルに貼り付けます。--color-brand-* の各変数が、bg-brand-500、text-brand-700、border-brand-200 などのクラスになります。

ステップの使い分けの一例です。50〜200 は薄い色や背景、500〜600 はボタンとリンク、700〜900 は明るい背景の上の文字、950 は最も暗い文字に使います。白い文字を載せられるだけ暗いステップがどれかは、色相によって変わります。それぞれの組み合わせをコントラストチェッカーで確認してください。

Codex にスケールをあらゆる場所で使わせ、ずれていくのを防ぐには、ブロックとルールを渡します：

Tailwind v4 プロジェクトのグローバル CSS ファイルに、このスケールを追加してください。すでに @theme ブロックがあれば、その中に入れてください：[@theme ブロックを貼り付け]。プライマリボタンとリンクには brand-600、ホバー時には brand-700、薄く色を付けた背景には brand-50、最も暗い文字には brand-950 を使ってください。ほかの brand の色は追加せず、これらの組み合わせの上の文字が少なくとも 4.5:1 のコントラストになることを確認してください。そのうえで、どのステップを何に使うかを DESIGN.md に記録してください。

よくある質問

無料ですか？

はい。無料で登録も不要、作れるスケールの数にも制限はありません。

選んだ色はアップロードされますか？

いいえ。スケールはブラウザ内で作られ、どこにも送信も保存もされません。サイトが記録するのはツールが使われたことだけで、色は記録しません。

Tailwind の組み込みの色と一致しますか？

完全には一致しません。Tailwind v4 の赤のスケールの明度カーブをすべての色相に当てはめているので、ステップの間隔は均等で、見慣れた印象になります。ただし Tailwind は、自前の色を 1 色ずつ調整しています。生成した青は、Tailwind の青に雰囲気は近いものの、同じではありません。

Tailwind v3 でも使えますか？

@theme タブは Tailwind v4 用です。v3 では、色見本の HEX コードを tailwind.config の colors セクションに、brand などの名前で、ステップ番号をキーにしてコピーしてください。

続けて読む

• OKLCH カラー変換ツールHEX、rgb()、hsl() の色を OKLCH に変換し、sRGB の外にある色は警告します。
• カラーパレットジェネレーター1 つの色から調和のとれた 5 色を作り、気に入った色をロックできます。
• shadcn テーマジェネレーター1 つの色から、ライトとダークの shadcn/ui テーマ一式を作ります。
• WCAG 2.2 対応のコントラストチェッカー文字色と背景色が AA と AAA を満たすかをチェックします。