カラーパレット生成ツール（Tailwind CSS用・50〜950段階）
基準色と名前を決めると、50から950までの色と設定コードを作ります。
入力した文章やファイルはサーバーに送らず、このブラウザー内だけで処理します。
マスを押すとHEXをコピーします。下の数字は白文字・黒文字のうち見やすい方のコントラスト比です。
Tailwind v4（@theme）
Tailwind v3（tailwind.config.js）
プレビュー
保存しました。変更はすぐに反映されます。
はじめる詳しく見る新機能
使い方
- 基準色を選ぶかHEXコードを入力し、クラス名に使うカラー名（例: brand）を決めます。
- 50（いちばん明るい）〜950（いちばん暗い）の段階がOKLCHの明るさを基準に作られます。「基準色を近い段階にそのまま使う」をオンにすると、選んだ色がそのままパレットに入ります。
- v4はCSSの@themeブロック、v3はtailwind.config.jsのcolors部分をコピーして貼り付けます。bg-brand-500のように使えます。
- 下のプレビューで、ボタン・バッジ・お知らせ枠に当てはめた見た目を確かめましょう。
よくある質問
OKLCHで計算すると何がよいのですか？
OKLCHは人が感じる明るさを基準にしているため、段階ごとの明るさの差がそろいやすく、黄色や青など色によって明るさがばらつく問題が起きにくくなります。Tailwind v4の標準色もoklch()で書かれています。
Tailwind標準の色と同じになりますか？
いいえ。このツール独自の明るさ・彩度のカーブで計算しているため、公式の色とは値が異なります。自分のブランドカラーで同じような使い分けの段階をすばやく作りたいときに使ってください。
画面で表示できない色はどうなりますか？
明るさと色相はそのままに、彩度だけを下げてsRGBの範囲に収めます。そのため、とても鮮やかな色は一部の段階で少し落ち着いた色になることがあります。
Tailwind CSSはTailwind Labs Inc.の商標です。このツールはTailwind Labsとは関係がなく、同社の承認を受けたものでもありません。