Tailwindカラー生成
1色のHexコードからTailwind CSSの50〜950の11階調パレットと設定コードを生成
特徴
1色から11階調を自動生成
入力した色を500に置き、50〜950の濃淡を計算
v3とv4の両形式に対応
configと@themeの書き方をタブで切り替え
階調ごとにHexをコピー
色見本ごとのボタンでカラーコードを1色ずつコピー
入力と同時にパレット更新
実行ボタン不要で色を試しながら比較
使い方
基準色のHexを入力
Hexコードを入力するか、左端の色見本をクリックしてカラーピッカーで選択
必要に応じて色名を入力
コード内で使う色名を英小文字で入力。空欄ならprimaryを使用
11階調の色見本を確認
50〜950の色見本とHexコードを確認し、見本のコピーボタンで1色ずつコピー
出力形式を選んでコピー
v3かv4を選び「コードをコピー」でtailwind.config.jsやCSSファイルへ貼り付け
ユースケース
ブランドカラーの濃淡作成
ボタンのホバーや背景に使う濃淡をブランドカラー1色から揃える
標準パレットにない色の追加
Tailwind標準色に無いプロジェクト独自の色を11階調で設定ファイルに追加
v4の@theme設定の作成
サイトのメインカラーからTailwind v4のCSS変数をまとめて書き起こし
デザインカンプの実装準備
カンプの指定色から実装用の11階調コードを用意し、デザインツールにも転記
基礎知識
Tailwindの50〜950が表すもの
Tailwind CSSの色は、50が最も薄く950が最も濃い11段階の数字で明るさを表し、500がその色の基準になります。数字は「bg-primary-500」や「text-primary-700」のようにクラス名の末尾に付けて使います。
- 50〜300の段階：50〜300の段階は、背景色や薄い塗りに使われることが多い明るい色で、上に濃い文字を重ねても読みやすい色です。
- 600〜950の段階：600〜950の段階は、ボタンのホバー時や見出しの文字色に使われることが多い暗い色で、白い背景の上でもはっきり見える色です。
v3とv4の色の定義方法の違い
Tailwind CSSのv3では色をtailwind.config.jsのJavaScriptで定義し、v4ではCSSファイルの@themeの中にCSS変数として定義します。どちらの書き方でも、定義した色は「bg-primary-500」のような同じクラス名で使えます。
- v3の書き方：v3の書き方は、theme.extend.colorsの中に「primary: { 500: '#3B82F6' }」のように色名と段階を入れ子にして書く形式です。
- v4の書き方：v4の書き方は、@themeの中に「--color-primary-500: #3B82F6;」のように色名と段階をハイフンでつないだ変数名で書く形式です。
安全性とプライバシー
ブラウザ完結
入力データはお使いのブラウザ内だけで処理され、外部に送信されません。
ブラウザ内のみで処理
パレットの計算とコード生成はすべてお使いのブラウザ内で行われ、入力データはサーバーに送信されません。
通信はHTTPSで暗号化
ページの読み込みもTLSにより暗号化され、第三者から内容を読み取られません。
第三者への送信なし
広告ネットワークやトラッカーなど外部サービスへ入力内容を送信しません。
結果の自動保存なし
入力した色や色名や入力候補をサーバーに保管することはありません。
Google検索でラッコツールズをフォロー
189件の便利なツールが、Google検索・AI検索から探しやすくなります！
- 検索で見つかる
- AI検索でも表示
- 新ツールも発見
更新情報
- update #318
Tailwindカラー生成を追加、1色から11階調の色と設定コードを作成
ラッコM&A 案件一覧
注目のツール
