配色トーンスケール生成
基準色を1つ選ぶと、Tailwind風の 50〜950 明度スケール（トーンスケール）を生成します。各段の HEX はクリックでコピー、CSS変数・Tailwind形式での一括コピーにも対応。色を変えるとその場で更新され、選んだ色は外に出ません。
例（クリックで試す）
各段をクリックするとその HEX をコピーします。500 はおおむね基準色そのものです。
配色トーンスケール生成の使い方
カラーピッカーで基準色を選ぶか、HEX 欄に #ea6379 のような値を入力します（#RGB の3桁や # 無しも受け付けます）。50 から 950 までの11段の明度スケールがその場で生成され、各段の色をクリックすると HEX がコピーされます。
- 500 が中心：500 はおおむね入力した基準色そのもので、そこから明るい側（50〜400）と暗い側（600〜950）へ展開します。
- 1段クリックでコピー：各段の HEX をクリックすると個別にコピーでき、Figma やデザインツールにそのまま渡せます。
- CSS変数をコピー：
--color-50: #…;… の形式で全段をまとめてコピーします。:rootに貼り付けて使えます。 - Tailwind風をコピー：
{ 50: '#…', 100: '#…', … }の形式でコピーし、tailwind.configのtheme.colorsに貼れます。
こんな場面で便利です
- ブランド色を1つ決めて、UI 全体で使う明度バリエーション（ボタン・ホバー・背景・境界線）を一括で用意したいとき
- Tailwind CSS でカスタムカラーを定義するために、
50〜950の値がまとめて欲しいとき - ダークモード用に「同じ色相で明度違い」の色をそろえたいとき
- uicolors.app / tints.dev のような明度スケールを、外部送信なしで手元で作りたいとき
明度カーブは 50 がもっとも淡く、950 がもっとも濃くなるよう単調に配分しています。基準色の明度によっては 500 が隣の段と近くなることがありますが、500 は入力した色そのものを保持します。
よくある質問
選んだ色はサーバーに送信されますか？
いいえ。スケールの計算はすべてお使いのブラウザ内で完結し、選んだ色や生成したスケールが外部に送信・保存されることはありません。安心してご利用いただけます。
50〜950 という数字は何を表しますか？
Tailwind CSS でおなじみの明度（トーン）の段階です。数字が小さいほど明るく（50 がいちばん淡い）、大きいほど暗く（950 がいちばん濃い）なります。500 はおおむね基準色そのもので、そこを中心に淡いティントと濃いシェードを両側へ展開します。ボタンや文字、背景、境界線などに段階を割り当てて使います。
生成したスケールはどこで使えますか？
CSS変数として貼れば --color-500 のように参照でき、Tailwind形式でコピーすれば tailwind.config の theme.colors にそのまま貼り付けてユーティリティ（bg-brand-500 など）で使えます。各段の HEX はクリックで個別にコピーできるので、Figma やデザインツールにも渡せます。