Tailwindカラーパレットジェネレーター
基準色からTailwindの濃淡パレットを作成
基準色
パレット
#3b82f6500に配置表記
スウォッチを押すと値をコピーします
コード
theme.css
形式
@theme {
--color-brand-50: oklch(0.97 0.012 254.604);
--color-brand-100: oklch(0.932 0.028 255.585);
--color-brand-200: oklch(0.882 0.052 254.128);
--color-brand-300: oklch(0.809 0.092 251.813);
--color-brand-400: oklch(0.707 0.145 254.624);
--color-brand-500: oklch(0.623 0.188 259.815);
--color-brand-600: oklch(0.546 0.215 262.881);
--color-brand-700: oklch(0.488 0.213 264.376);
--color-brand-800: oklch(0.424 0.175 265.638);
--color-brand-900: oklch(0.379 0.128 265.522);
--color-brand-950: oklch(0.282 0.08 267.935);
}v4は選択した表記、v3はHEXで出力します
Tailwindカラーパレットジェネレーターとは？
1つの色から、Tailwindで使える11色の濃淡パレットを作るツールです。ブランドカラーを入れると、同じ色味のまま明るい色から濃い色までを揃えられます。
作ったパレットは、Tailwindの設定やCSSにそのままコピーできます。
使い方
- 基準色を入力するか、ピッカーや「Tailwindの色から選ぶ」で選びます。
- パレットを確認し、スウォッチまたは「すべての色をコピー」で値をコピーします。
- コード欄でパレット名・表記・Tailwind v4/v3を選び、コードをコピーします。
主な設定項目
基準色
パレットの元になる色です。入力した色は、パレットの中で近い濃さの色としてそのまま残ります。
パレット名
primaryを指定すると、--color-primary-50から--color-primary-950までのCSS変数として使えます。空白・大文字・記号は自動で整えられ、Brand Colorはbrand-colorになります。空の場合はbrandになります。
表記
- OKLCH: Tailwind v4の設定にそのまま使える書き方です
- HEX: 一般的なカラーコードです。CSSやデザインツールで広く使えます
Tailwind v4は選んだ表記、v3はHEXで出力します。
プリセット
Tailwindの色系統から基準色を選べます。色帯を押すと、その系統の色が基準色に入ります。
活用シーン
- ブランドカラーをTailwindのクラス名で使いたいとき
primaryやaccentなどの色を、明るい色から濃い色までまとめて用意したいとき- 既存の1色から、ボタンや背景に使う濃淡を揃えたいとき
使うときの注意点
- とても鮮やかな色は、パレットの明るい色や濃い色で同じ鮮やかさを再現できないことがあります
- OKLCHでコピーした色が、画面では少し違う色に見えることがあります。その場合、スウォッチとHEXは近似色です
