カラーシェード生成ツール

カラーシェード生成ツールとは？

カラーシェード生成ツールは、1 つの基準 HEX 色をデザインシステム向けの完全なティント＆シェードのスケールに変換します。RGB での線形混合だけでなく OKLCH や HSL でも補間できるため、色相を保ちつつ明度を均等に配分し、くすんだり白っぽくなったりする段階のない知覚的にバランスの取れたスケールが得られます。生成する段階数は 2〜24、あるいはカンマ区切りのカスタムラベルで自由に指定でき、色相をずらしたり彩度を調整したりできます。さらに各段階の WCAG コントラストの目安で、白背景・黒背景で文字として使える色を確認でき、完成したスケールは CSS カスタムプロパティ・Tailwind のカラー設定オブジェクト・JSON としてワンクリックでコピーできます。

カラーシェード生成ツールの使い方

1. 「ベースカラー (HEX)」欄に #rrggbb または #rgb 形式で基準色を入力するか、大きな色見本をクリックして視覚的に選びます。
2. 色空間を選びます。OKLCH または HSL は色相を保った知覚的に均等なスケール、RGB は従来の線形混合です。
3. 段階数（2〜24）を設定するか、設定を開いてカンマ区切りのカスタム段階リストの入力、色相シフト、彩度調整、出力カラー名の設定を行います。
4. 各行の 2 つのコントラストセル（白背景・黒背景の文字 A）を確認します。その色が文字として WCAG AA を満たすと強調表示されます。
5. 各段階の HEX を個別にコピーするか、コピーボタンでスケール全体を CSS 変数・Tailwind 設定・JSON としてコピーします。

使用例

よくある質問

RGB・HSL・OKLCH の違いは何ですか？

RGB は色を白と黒に向かって線形に混ぜます。高速ですが中間トーンがムラに見えることがあります。HSL と OKLCH は色相を保ったまま明度を均等に配分し、特に OKLCH は知覚的に均一なので、各段階が等しい明るさの跳びに見えます。最もバランスの良いスケールには OKLCH を選んでください。

何段階まで作れますか。名前は付けられますか？

段階数は 2〜24 の任意です。11 のときは Tailwind でおなじみの番号（50, 100…900, 950）を使い、それ以外は 50〜950 に均等配分されます。設定でカンマ区切りのカスタムラベルを入力すると段階数より優先され、各段階が入力どおりの名前になります。

WCAG コントラストの目安はどう計算されますか？

各段階について、相対輝度をもとに純白・純黒との WCAG コントラスト比を計算します。各行の 2 つの小さなセルは白背景・黒背景の文字 A を示し、比が 4.5:1（通常テキストの AA）に達すると強調表示されます。ホバーすると正確な比と、AA か AAA かが分かります。

色のデータはどこかにアップロードされますか？

いいえ。色の計算、コントラスト判定、3 種類の出力はすべてブラウザー内で行われるため、色の値がサーバーに送信されることはありません。オフラインで動作し、パレットのプライバシーが保たれます。