ブランドカラーを1色決めても、実際のUIでは背景・ホバー・枠線・文字と、明度違いが何段階も必要になります。このツールは基準色から50〜900の10段階を自動生成し、そのままCSS変数として使える形で出力します。
なぜ段階が必要か
ボタンの通常時・ホバー時・押下時、背景の淡い塗り、枠線、文字色。1つの色でこれらをまかなおうとすると、その都度その場の勘で色を作ることになり、画面ごとに微妙に違う色が増えていきます。
先に10段階を決めておけば、「背景は100、枠線は300、文字は800」のように役割で選べるようになります。デザインの再現性が上がり、実装の相談も減ります。
段階ごとの使いどころ
一般的には500前後を基準色として扱い、明るい側を背景、暗い側を文字やボタンに使います。ホバーは1段階濃くする（600→700）と自然な変化になります。
| 段階 | 主な用途 |
|---|---|
| 50 / 100 | 淡い背景、選択中の行、通知バーの下地 |
| 200 / 300 | 枠線、区切り線、無効状態 |
| 400 / 500 | アイコン、基準となるブランドカラー |
| 600 / 700 | ボタンの背景、リンク、ホバー時の濃色 |
| 800 / 900 | 見出し、濃い背景の上の面、文字色 |
コントラスト比の見方
各段階の右側に「白 / 黒」の数値を表示しています。これは、その色を背景にしたときに白文字・黒文字を置いた場合のコントラスト比です。
WCAGの基準では、通常の文字で4.5以上、大きな文字（18pt以上または太字14pt以上）で3以上が求められます。ボタンの背景色を選ぶときは、上に置く文字色の側の数値が4.5を超えているかを確認してください。
| 比率 | 判定 |
|---|---|
| 4.5以上 | 通常の文字でAA適合 |
| 3以上4.5未満 | 大きな文字・UI部品のみ適合 |
| 3未満 | 文字色としては使わない |
出力形式
CSS変数はそのまま貼り付けて使えます。JSON形式はTailwind CSSの設定ファイルなど、色の定義をオブジェクトで持つ環境に貼り付けやすい形にしています。
:root {
--brand-50: #f0faf4;
--brand-500: #2fa35a;
--brand-900: #0f3a1f;
}
/* 使うとき */
.button { background: var(--brand-600); color: #fff; }
.button:hover { background: var(--brand-700); }きれいなスケールにするコツ
- 基準色は彩度が高すぎない色を選ぶ（明るい側が濁りにくくなります）
- 同じ手順で作った色を混ぜない：黄色系と青系では、同じ明度でも見え方が変わります
- 文字用の濃い色は、実際に背景に置いて確認する
- グレーも同じ考え方で作ると、サイト全体の統一感が出ます
よくある質問
Q 500が入力した色と少し違うのはなぜ？
各段階の明度をそろえて生成しているため、基準色の明度によっては500が入力値とわずかに異なります。入力した色そのものを使いたい場合は、その値を直接指定してください。
Q Tailwind CSSで使えますか？
使えます。JSON形式の出力を tailwind.config の theme.extend.colors に貼り付けてください。
Q コントラスト比はどう計算していますか？
WCAGの相対輝度の式にもとづいて計算しています。白（#fff）と黒（#000）それぞれとの比率を表示しています。
Q ダークモード用のスケールも作れますか？
同じスケールを反転して使う方法が一般的です。背景に800〜900、文字に50〜200を割り当てると、明暗を入れ替えられます。