デザイン / 色
Tailwindカラー・スケール・ジェネレーター
1つのブランドカラーから、50から950までの完全なTailwind CSSパレットを作成します。Tailwind独自のカラーと同じくOKLCHで構築し、Tailwind 4のテーマCSS、Tailwind 3の設定、CSS変数としてコピーできます。
Tailwindカラー・スケール・ジェネレーター: 各シェードでは、OKLCH色空間で測定したTailwind独自のパレットにおける、その段階の明度、彩度、色相のわずかな変化を使用し、選択した色が指定のシェードに正確に一致するよう調整します。グレーは代わりにTailwindのグレー系統に従います。sRGB色域で表示できない色は、ブラウザと同じCSS Color 4の色域マッピング方式で調整します。Tailwind 4の出力ではOKLCH値を保持し、その他の形式では16進数を使用します。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 日常ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
#f2f8ffoklch(97.6% 0.012 250.3)#dfecffoklch(93.9% 0.029 258.1)#bcd9ffoklch(87.6% 0.061 255.8)#8fbeffoklch(79.3% 0.106 256.6)#5e9cffoklch(69.6% 0.16 259.5)#3b82f6oklch(62.3% 0.188 259.8)#2668daoklch(54.2% 0.187 260.6)#1f57b6oklch(47.7% 0.163 260.6)#1f4997oklch(42.3% 0.137 261.4)#20417coklch(38.4% 0.109 261.4)#15274coklch(27.9% 0.073 263.2)CSS (@theme)
@theme {
--color-brand-50: oklch(97.6% 0.012 250.3);
--color-brand-100: oklch(93.9% 0.029 258.1);
--color-brand-200: oklch(87.6% 0.061 255.8);
--color-brand-300: oklch(79.3% 0.106 256.6);
--color-brand-400: oklch(69.6% 0.16 259.5);
--color-brand-500: oklch(62.3% 0.188 259.8);
--color-brand-600: oklch(54.2% 0.187 260.6);
--color-brand-700: oklch(47.7% 0.163 260.6);
--color-brand-800: oklch(42.3% 0.137 261.4);
--color-brand-900: oklch(38.4% 0.109 261.4);
--color-brand-950: oklch(27.9% 0.073 263.2);
}
シェードはTailwind独自のパレットにおける明度、彩度、色相の変化をOKLCHで測定したものに従います。そのため、Tailwindのblue-500から作成したスケールは、Tailwindの青と知覚可能な色差数個以内になります。sRGBの範囲外の色は、CSS Color 4のガマットマッピング方式で範囲内に収めます。
スケールの使い方
一般的には、ページやカードの背景に50–100、境界線に200–300、ボタンやリンクに500–600、ホバー状態に700、明るい背景上のテキストに800–950を使います。テキストと背景の組み合わせは色のコントラストチェッカーで確認できます。
1色をhex、RGB、HSL、OKLCHの間で変換するには色変換ツールを、写真から始めるにはカラーパレット抽出ツールを使ってください。
Tailwind 4とOKLCH
Tailwind CSS 4では色をOKLCHで定義しており、広色域ディスプレイではsRGBを超える色も表現できます。ここで出力するTailwind 4の色はsRGBの範囲内に収まるため、どの画面でも同じように見えます。
使い方
- 色を選ぶか、16進数コードを貼り付けます。
- その色を割り当てるシェードを選びます。通常は500ですが、ジェネレーターに自動配置させることもできます。
- Tailwind 4、Tailwind 3、または通常のCSS変数用のコードをコピーします。
プライバシーと制限事項
すべてブラウザ上で生成されます。
関連ツール
よくある質問
なぜOKLCHなのですか？
OKLCHの明度を等間隔にすると、どの色相でも目には等しい段階に見えます。そのため、同じ方法で作成した黄色と青色のスケールでもコントラストが揃いますが、HSLではこれを実現できません。
ブランドカラーはどのシェードにするべきですか？
通常は、Tailwindで最も鮮やかな色が保たれる500または600がおすすめです。パステルなど非常に明るい色は200または300のほうが適しています。明度に基づいて配置するには「自動」を選んでください。
これらのシェード上でテキストは読みやすくなりますか？
通常、白いテキストには600以上の暗いシェード、暗いテキストには400以下の明るいシェードが必要です。ただし、各組み合わせをコントラストチェッカーで確認してください。
無料ツール · ブラウザ内で · アカウント不要