Tailwind CSS カラージェネレーター

ベースカラーを入力して、完全なTailwind CSSカラーパレット（50-950）を生成します。tailwind.config.jsの設定スニペットをコピーできます。

カラーパレットプレビュー

tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
        50: '#f3f6fc',
        100: '#e3ebf7',
        200: '#c0d5f7',
        300: '#92b6f1',
        400: '#538ce9',
        500: '#0b64f4',
        600: '#0954cd',
        700: '#0846ab',
        800: '#11356e',
        900: '#0c244b',
        950: '#07152c',
        },
      },
    },
  },
}

Tailwind カラージェネレーターの使い方

  1. 1.カラースウォッチをクリックするか、入力欄にHEXカラーコードを入力します。
  2. 2.デザインシステムに合ったカラー名を設定します（例："brand"、"primary"）。
  3. 3.ベースカラーから生成された11段階のシェード（50〜950）をプレビューします。
  4. 4.任意のシェードをクリックしてHEX値をコピーするか、tailwind.config.jsの完全な設定スニペットをコピーします。

よくある質問

パレット生成の仕組みは？

ツールはベースカラーをHSLに変換し、明度値を非常に明るい（97%）から非常に暗い（10%）まで変化させて11のシェードを生成し、彩度も微調整してより自然な結果を得ます。

Tailwind CSS v4で使えますか？

はい。生成された設定スニペットはTailwind CSS v3とv4の両方で動作します。v4のCSS設定では、HEX値をCSSカスタムプロパティに直接使用できます。

デフォルトのTailwindパレットと異なるシェードがあるのはなぜ？

デフォルトのTailwindカラーはデザイナーが手動で調整しています。このジェネレーターはHSL明度に基づくアルゴリズムアプローチを使用しており、良好な結果が得られますが手作りのパレットとはわずかに異なる場合があります。

複数のカラーパレットを生成できますか？

カラー名とベースカラーを変更して異なるパレットを生成できます。各設定スニペットをコピーしてtailwind.config.jsのcolorsキー下で組み合わせてください。