Tailwindカラースケール生成
Tailwindカラースケール生成ツールは、ベースカラーを1色指定するだけで、Tailwind 流の 50〜950（11段階）の明度スケールを自動生成する無料のカラー生成ツールです。Tailwind のデフォルトパレットと同じ感覚のカラースケールを、ブランドカラーやお好みの1色から一瞬で作成でき、デザインシステムやテーマ設定にそのまま使えます。
現在のスケールを URL で共有・保存できます。
生成されたカラースケール
- 50#EFF6FE
- 100#DDEBFD
- 200#C1DCFC
- 300#95C4FC
- 400#58A3F8
- 500ベース#1E90FF
- 600#006BE3
- 700#005BC7
- 800#004AA9
- 900#004185
- 950#04294F
エクスポート
@theme {
--color-brand-50: oklch(0.971 0.013 253.2);
--color-brand-100: oklch(0.936 0.028 253.2);
--color-brand-200: oklch(0.885 0.052 253.2);
--color-brand-300: oklch(0.808 0.094 253.2);
--color-brand-400: oklch(0.704 0.146 253.2);
--color-brand-500: oklch(0.652 0.19 253.2);
--color-brand-600: oklch(0.549 0.201 257.7);
--color-brand-700: oklch(0.494 0.184 258.1);
--color-brand-800: oklch(0.432 0.165 258.7);
--color-brand-900: oklch(0.382 0.128 255.5);
--color-brand-950: oklch(0.281 0.081 253.2);
}
スケールの生成はすべてお使いのブラウザ内で行われ、入力した色が外部サーバーに送信されることはありません。
関連ツール
カラーピッカー
画像から色をスポイトで抽出し、カラーコードを取得できるツール。ルーペで拡大しながらピクセル単位で色を調べられ、HEX / RGB / HSL 切替やパレットのエクスポートに対応。無料・登録不要で、ブラウザだけで完結します。
- デザイン・配色
- 業務効率化
カラーパレット抽出
画像をアップロードするだけで主要な配色（代表色）を自動抽出し、カラーパレットを作成できる無料ツール。HEX / RGB / HSL の確認、各色の占有率表示、色数の調整、CSS変数・SCSS・Tailwind 形式での書き出しに対応。画像はサーバーに送信されず、ブラウザだけで完結します。
- 抽出
- デザイン・配色
配色パレット生成
ベースカラーを1色選ぶだけで、補色・類似色・トライアドなど配色理論に基づくカラーパレットを自動生成する無料の配色ジェネレーター。CSS変数・Tailwind・SCSS・JSON形式でエクスポートでき、コントラストの目安も確認できます。ブラウザだけで完結します。
- ジェネレーター
- デザイン・配色
カラーコード変換
HEX・RGB・HSL・HSV・OKLCH のカラーコードを相互変換できる無料ツール。透明度付きの RGBA・8桁 HEX・HSLA にも対応し、入力した色を全フォーマットへ一括変換してワンクリックでコピーできます。CMYK の参考値も表示。ブラウザだけで完結します。
- コンバーター
- デザイン・配色
コントラストチェッカー
前景色（文字色）と背景色のコントラスト比をリアルタイムに算出する無料のコントラストチェッカー。WCAG 2.1 / 2.2 の AA・AAA 基準への合否判定に加え、合格色の自動提案・色覚特性シミュレーション・APCA にも対応。配色のアクセシビリティをブラウザだけで確認できます。
- チェッカー
- デザイン・配色
- アクセシビリティ
CSSグラデーション生成
色や方向、カラーストップをGUIで操作してCSSグラデーションを自動生成する無料ツール。線形・放射・円錐（conic）グラデーションに対応し、不透明度の調整やCSS変数・Tailwind・SCSS形式での出力、共有URLにも対応。コピペですぐ使え、ブラウザだけで完結します。
- ジェネレーター
- 開発
- デザイン・配色
Tailwindカラースケール生成ツールとは？
Tailwindカラースケール生成ツールは、ベースカラーを1色指定するだけで、Tailwind 流の 50〜950（11段階）の明度スケールを自動生成する無料のカラー生成ツールです。Tailwind のデフォルトパレットと同じ感覚のカラースケールを、ブランドカラーやお好みの1色から一瞬で作成でき、デザインシステムやテーマ設定にそのまま使えます。
ベースカラーは #1E90FF のような HEX のほか、rgb(30, 144, 255) や oklch(0.65 0.19 253) でも入力でき、ネイティブのカラーピッカーから選んだり、「ランダム」ボタンで色を探したりもできます。入力した色の明度から最も近い段階（50〜950）を自動で判定し、その段階には入力色をそのまま保持したうえで、残りの段階を生成します。配色は Tailwind CSS v4 が採用する OKLCH 色空間で計算するため、各段階の明度が知覚的に均等で、自然なカラースケールになります。
生成したスケールは、Tailwind v4（@theme の OKLCH 変数）・Tailwind v3（tailwind.config.js の theme.extend.colors）・CSS変数・JSON の各形式でまとめてエクスポートできます。カラー名（例: brand、primary）を指定すると変数名に反映されるので、コピーしてそのまま tailwind config やスタイルシートに貼り付けられます。各段階の値は HEX・OKLCH・HSL・RGB に切り替えて表示・コピー可能で、各スウォッチには黒文字・白文字のどちらが読みやすいか（コントラストの目安）も表示します。
スケールの計算はすべてお使いのブラウザ内で行われ、入力した色が外部サーバーへ送信されることはありません。アカウント登録や広告クリックなしで、すぐに使えます。
使い方
- ベースカラーを入力欄に入力するか（HEX・RGB・HSL・OKLCH に対応）、カラーピッカーで色を選びます。アイデアが欲しいときは「ランダム」ボタンも使えます。
- 必要に応じてカラー名（例: brand、primary）を入力します。エクスポート時の変数名に反映されます。
- 生成された 50〜950 の 11 段階スケールを確認します。入力色に最も近い段階には「ベース」バッジが付き、その色はそのまま保持されます。
- 表示フォーマット（HEX・OKLCH・HSL・RGB）を切り替え、各段階の値はコピーボタンでコピーします。
- 「エクスポート」で Tailwind v4・Tailwind v3・CSS変数・JSON のタブを切り替え、「コピー」ボタンでコード全体をコピーして tailwind.config やスタイルに貼り付けます。
- 「URL をコピー」を押すと、現在のスケールを再現できる共有 URL が得られます。チーム共有やブックマークに利用できます。
利用シーン
- ブランドカラー1色から Tailwind の 50〜950 スケールを作り、tailwind.config にそのまま設定したいフロントエンドエンジニア。
- Tailwind CSS v4 へ移行し、@theme と OKLCH でカスタムカラーを定義したい開発者。
- デザインシステムで、ボタンやリンクなどの状態（hover・active）に使う明度違いの色を体系的に揃えたいデザイナー。
- shadcn/ui などのコンポーネントに合わせて、独自のプライマリカラーのスケールを用意したい方。
- 既存の1色を起点に、薄い背景色（50・100）から濃いテキスト色（900・950）までを一括で用意したい方。
- 決めたカラースケールを共有 URL でチームに渡したり、後から同じスケールを再現したりしたい方。
注意点
- スケールの生成はすべてブラウザ内で行われ、入力した色が外部に送信されることはありません。
- ベースカラーは HEX・RGB・HSL・OKLCH の各形式で入力できます。透明度（アルファ）には対応していません。
- 入力色の明度から最も近い段階を自動判定し、その段階は入力色をそのまま採用します（例: 明るい色なら 200、濃い色なら 800 などにベースが置かれます）。
- 色の計算には Tailwind CSS v4 と同じ OKLCH 色空間を使用し、sRGB の表示範囲を超える色は自動的に範囲内へ調整します。実際の Tailwind 標準パレットと完全一致するわけではありません。
- 共有 URL にはベースカラー・カラー名・表示フォーマットのみが含まれます。URL を開くと同じ設定でスケールが再現されます。