Tailwind カラージェネレーター

1 つのブランドカラーを OKLCH による 50-950 の完全な Tailwind シェードスケールに変換し、シェードごとの WCAG コントラストもブラウザ内で表示します。

Tailwind カラージェネレーターはすべてブラウザ内で動作します。入力したブランドカラーと生成されたシェードは端末上で計算され、ArrayKit にアップロードされることはありません。

CSS カラーコンバーターを開く

Tailwind カラージェネレーター について

Tailwind カラージェネレーターは、1 つのブランドカラーを tailwind.config にそのまま投入できる完全な 50, 100, 200 … 900, 950 のシェードスケールに変換します。HEX 値を当て推量する代わりに、知覚的に均一な空間である OKLCH で明度を補間するため、どのステップも均等に配置されて感じられ、入力を最も近いステップにスナップさせるため、パレットには実際にあなたの正確なブランドカラーが含まれます。各スウォッチには HEX に加え、黒と白に対する WCAG コントラスト比が表示されるため、どのシェードがテキストに安全かを一目で判断できます。スケール全体を theme.colors ブロックまたは CSS カスタムプロパティとしてコピーできます。HEX・rgb()・hsl()、rebeccapurple のような名前付きカラーなど、任意の CSS カラーを貼り付けられます。すべては端末上で計算され、入力したカラーがブラウザから離れることはありません。

機能

Tailwind カラージェネレーター の使い方

  1. ブランドカラーを入力または選択します（HEX・rgb()・hsl()・名前）
  2. カラー名を設定します — brand や accent などキーになります
  3. シェードごとの WCAG コントラストバッジを見てテキストに安全なステップを見つけます
  4. tailwind.config と CSS 変数の出力を切り替えます
  5. ブロックをコピーするか、単一のスウォッチをクリックして HEX を取得します

例

入力

#7c3aed  (name: brand)

出力

colors: { brand: { 50: '#faf5ff', 500: '#7c3aed', 950: '#2e1065' } }

1 つのバイオレット HEX が brand をキーとする OKLCH 均等配置の 50-950 スケールに展開されます。

よくあるエラーとトラブルシューティング

よくある質問

Tailwind カラージェネレーターは 50-950 スケールをどう構築しますか？
カラーを OKLCH に変換し、色相を保ち、11 個の Tailwind ステップにわたって明度をランプさせ、両端に向けて彩度を絞ります。OKLCH は知覚的に均一なため、素の HSL ランプのように中間に固まらず、各ステップが均等に見えます。
ブランドカラーが 500 ではなく 400 や 600 になるのはなぜですか？
ジェネレーターは、目標の明度が最も近いステップに入力をスナップさせ、そこにあなたの正確なカラーを保持します。明るいブランドカラーは 300-400 付近に、暗いものは 600-700 付近に固定されるため、スケールには必ず入力したカラーが含まれます。
各スウォッチのコントラスト値は何を意味しますか？
そのシェードの純黒・純白に対する WCAG 2.x コントラスト比です。緑のバッジは 4.5:1 以上（通常テキストの AA）、アンバーは 3:1 以上（大きいテキストや UI の AA）です。テキストと背景の組み合わせを選ぶのに使ってください。
HEX の代わりに rgb()・hsl()・名前付きカラーを貼り付けられますか？
はい。あらゆる CSS カラー文字列が使えます — #7c3aed・rgb(124 58 237)・hsl(262 83% 58%)、rebeccapurple のような名前です。ツールが解析し OKLCH に変換して、同じ方法でスケールを構築します。
出力をプロジェクトでどう使いますか？
tailwind.config ブロックを theme.extend.colors にコピーし、bg-brand-500 や text-brand-800 のようなクラスを参照します。または CSS 変数版をコピーして、プレーンな CSS のどこでも var(--brand-500) を使います。カラー名フィールドを変えるとキーを改名できます。
入力したカラーはどこかに送られますか？
いいえ。スケール全体 — 解析・OKLCH の計算・コントラスト比・両方の出力形式 — はブラウザ内で計算されます。入力または選択したブランドカラーは端末から離れず、ArrayKit にアップロードされません。

関連ツール

すべての ArrayKit ツール