colorize
ColorKit
CK

Tailwind カラージェネレーター

ブランドカラーを入力するだけで、Tailwind CSS v3 / v4対応の調和の取れた50-950シェードスケールを瞬時に生成します。

Generated Scale

50

#F1F6FD

100

#E2ECFC

200

#C2D7F9

300

#9EC0F7

400

#75A6F6

500

#3B82F6

600

#1468F0

700

#0F50B9

800

#0C3679

900

#071938

950

#030A17

Component Preview

Buttons

Alerts & Badges

System Update

The server will restart in 5 minutes. (50/500/700/900)

Badge (100/800)Solid (600)

Tailwindのカラーシェードの仕組み

Tailwind CSSは柔軟で一貫性のあるUI構築のために50〜950の明度スケールを採用しています。

  • 50 - 100： 背景や薄いトーンのパネル。
  • 200 - 400： 繊細な境界線や非アクティブ状態。
  • 500 - 600： 主要アクションボタンやブランドの標準表示。
  • 700 - 950： 本文テキストやダークモードの高コントラストサーフェス。
ナレッジベース & FAQ

よくある質問 (FAQ)

よくある疑問、技術的課題、業界標準に対する分かりやすい解説と解決策。

Tailwind CSSの50〜950シェードスケールはどのように算出されますか？expand_more
Tailwindの数値スケールは明るい色から暗い色へと体系的に整理されています：
  • 50〜100： パステル調の明るい背景色やアラート用背景（明度90%〜95%程度）。
  • 200〜400： 枠線、区切り線、非活性状態、ホバー背景用の中間調。
  • 500〜600： 主要アクションボタンやブランド標準色（500）とそのホバー色（600）。
  • 700〜900： 本文テキスト、見出し、ダークモード用の高コントラスト背景。
  • 950： ダークモードのUIコンテナや深みのある背景用（明度5%〜10%程度）。
Tailwind CSS v3とv4でカスタムカラーシェードを追加する方法の違いは？expand_more
Tailwind CSS v3（JS設定）： tailwind.config.jsのtheme.extend.colorsに定義します： 
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#F0F9FF',
          500: '#0EA5E9',
          900: '#0C4A6E',
        }
      }
    }
  }
}
Tailwind CSS v4（純粋CSS）： CSSファイル内の@themeディレクティブで直接宣言します： 
@theme {
  --color-brand-50: #F0F9FF;
  --color-brand-500: #0EA5E9;
  --color-brand-900: #0C4A6E;
}
単純に白や黒を混ぜるだけでは色がくすんでしまう理由は何ですか？expand_more
線形に白や黒を混色すると彩度が急激に失われ、濁ったパステル調や重苦しい暗色になります。プロ仕様のTailwindカラーパレットは「色相シフト（Hue Shifting）」を採用しており、明るくなるにつれて暖色系（太陽光）へ、暗くなるにつれて寒色系（環境光）へ微細に色相を移動させることで全域で濁りのない鮮やかな発色を保ちます。
見出し、本文、枠線にはどのTailwindシェードを使用すべきですか？expand_more
推奨されるUIタイポグラフィ階層：
  • 見出し（H1〜H3）： 最大コントラストのtext-slate-900またはtext-neutral-900。
  • 本文段落： 長時間読んでも疲れにくいtext-slate-700またはtext-neutral-600。
  • 補足テキスト・日付： 控えめなtext-slate-500。
  • 枠線（ボーダー）： ライトモードはborder-slate-200、ダークモードはborder-slate-800。