カラースケール生成ツール
カラースケール生成ツールは、ベースとなるHEXカラーを1つ入力するだけで、50〜950の11段階のカラースケールを自動生成できる無料ツールです。入力データはサーバーに送信されず、ブラウザ内で完結して処理されます。
お気に入りカラー
（最大8件・9件目を追加すると最も古いものが自動で削除されます）
生成されたカラースケール
UIコンポーネントプレビュー
Brand
New
見出しテキストのサンプル
生成したカラースケールを、ヘッダー・ボタン・カードなど各UI要素に適用したイメージを確認できます。
通知バーのサンプル表示です。
CSSカスタムプロパティで一括コピー
※入力データはサーバーに送信されません。ブラウザ内で完結して処理されます。お気に入りはお使いのブラウザにのみ保存されます。
カラースケール生成ツールとは？
カラースケール生成ツールは、1つのベースカラー（HEX）を入力するだけで、明度を段階的に変化させた50〜950の11段階のカラースケールを自動で作成できるツールです。デザインシステムの配色設計やTailwind風のカラー命名規則に対応したカスタムカラーを作りたいデザイナー・Web制作者向けに、CSSカスタムプロパティとしてそのまま使えるコードを出力します。
各機能の説明
-
11段階カラースケール生成ベースカラーから50〜950の11段階で明度・彩度を自動調整したスケールを生成します。
-
コントラスト判定バッジ各色の背景に対して白文字・黒文字どちらが見やすいかをWCAG基準で自動判定します。
-
コピー機能各ステップのHEXコードや、CSS変数（:root形式）をワンクリックでコピーできます。
-
UIコンポーネントプレビューヘッダー・ボタン・カード・通知バーなど複数のUI要素に、生成したスケールを適用して確認できます。
-
カラーピッカー連動ネイティブカラーピッカーとHEX入力欄が連動し、好みの色を直感的に選べます。
-
お気に入り保存★ボタンでベースカラーとトーンの組み合わせを保存し、後から呼び出せます。
トーンプリセットについて
-
標準入力したベースカラーの彩度をそのまま活かし、自然な階調でスケールを展開します。
-
クリア彩度を高めに保ち、色が濁らない鮮やかなスケールを生成します。
-
シック彩度を抑え、グレーに近い落ち着いた色味のスケールに調整します。
こんなときに使う
-
デザインシステム構築時ブランドカラーを基準に、一貫性のあるカラースケールを一括で作成したいとき。
-
Tailwind風カラー設計50〜950の命名規則に合わせたカスタムカラーパレットを用意したいとき。
-
アクセシビリティ確認背景色に対する文字色（白/黒）の視認性を、実装前に事前チェックしたいとき。
-
UIコンポーネントの配色検討ヘッダーやボタン、カードに色を当てたときの印象を、手早くシミュレーションしたいとき。
-
複数案の比較検討気になった配色を★で保存しておき、あとで見比べながら選びたいとき。
よくある質問
-
カラースケールはどのように計算していますか？
入力したベースカラーの色相・彩度を基準に、50〜950の各ステップごとに明度と彩度を調整して計算しています。選択したトーンプリセットによって彩度の変化幅が変わります。
-
入力した色やお気に入りはサーバーに送信されますか？
送信されません。スケールの計算はブラウザ内のJavaScriptで行われ、お気に入りに保存した色もお使いのブラウザ内にのみ保存されます。外部に送信されることはありません。
-
「標準」「クリア」「シック」の違いは何ですか？
標準は入力色の彩度をそのまま活かした自然な階調、クリアは彩度を高めて鮮やかに、シックは彩度を抑えてグレーに近い落ち着いた色味になります。
-
文字色の白/黒の判定はどのような基準ですか？
WCAGのコントラスト比基準に基づき、各背景色に対して白文字・黒文字それぞれのコントラスト比を計算し、より高い比率となる色を推奨色として表示しています。
-
生成したスケールはどのように使えばいいですか？
出力されるCSSカスタムプロパティ（:root変数）をそのままCSSファイルにコピーし、background-colorやcolorプロパティで–color-500のように指定するだけで利用できます。