カラースケール生成
ブランドカラーを一つ渡すと、明るい側（tint）と暗い側（shade）に十段階を作ります。出力はTailwindや多くのデザインシステムが前提にしている 50・100・…・900 の形です。
🎨 すべてブラウザ内で動きます。インストールも登録も不要です。
どの段階をどこに使うか
- · 50~200 背景、淡い強調、無効状態
- · 400~600 ボタン・リンク — ブランドカラーそのもの
- · 700~900 押された状態、暗い背景上の文字
- 各行の右の表示は、その色を背景にしたとき白／黒の文字がアクセシビリティ基準（4.5:1）を超えるかどうかです。
このツールでできること
- 50から900までの十段階
- 各段階のHEXとHSL
- 白文字と黒文字どちらが読めるか表示
- CSS変数としてまとめてコピー
ほかのカラーツール
画面とそのカラープロファイルによって、色は少し違って見えることがあります。