検索
500
一覧
各カラーファミリーの中間階調に一致するスウォッチ
デザインツール
Tailwindカラーチートシート - フルスケール配色ボード
Tailwind CSS の配色スケール（50〜950 を含む）を 1 画面で確認できます。名前、スケール、HEX で検索し、utility class 名や生の HEX 値を CSS プロジェクト向けにコピーできます。
DesignTailwindCSS
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
Tailwindカラーチートシート
🔍
当前选中：
- 显示 0 / 0
利用シーン
- indigo-900 と emerald-400 を同じ画面で比較する
- UI 実装中に bg-/text-/border- class 名をコピーする
- Tailwind 以外の CSS 用に HEX 値を取得する
使い方
- 色名、スケール、HEX で検索する
- class prefix とコピー方法（class または HEX）を選ぶ
- swatch をクリックしてコピーするか、表示中リストをまとめてコピーする
入出力サンプル
FAQ
どの Tailwind palette を基準にしていますか？
近年の Tailwind 既定値で一般的な公式スケールを反映しており、neutral 系ファミリーも含みます。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS名前付きカラー
CSS名前付きカラー - 標準色名リファレンス
W3C / CSS の named color とその値を一覧できます。keyword や family で絞り込み、標準 color name や HEX をコピーして素の CSS 実装に使えます。
CSS Color Cheat sheet
CSSからTailwindへ変換
CSSからTailwindへ変換 - 宣言マッピング
CSS 宣言を貼り付けると、可能な範囲で Tailwind utility class へ変換します。一般的な layout、spacing、color ルールは標準 class に変換し、対応しない値は arbitrary-value 構文へフォールバックします。
CSS Tailwind 変換