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

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

カラーシェード生成ツールは、1つの基準 HEX 色を完全なティント＆シェードのスケールに変換する無料のオンラインツールで、Tailwind CSS のカラートークンと同じく 50、100、200 から 900、950 までの番号が付きます。基準色を白へ線形に混ぜて明るい段階（50〜400）を、黒へ混ぜて暗い段階（600〜950）を作り、500 は基準色そのものを保ちます。デザイナーやフロントエンド開発者は、デザインシステム用の一貫したカラースケールの生成、CSS カスタムプロパティや Tailwind のテーマカラーの設定、ブランドカラーの明暗バリエーション選びに活用します。各段階は色見本と HEX 値が並んで表示され、ワンクリックでコピーできます。

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

1. 「ベースカラー (HEX)」フィールドに #rrggbb または #rgb 形式でベースカラーを入力するか、大きなカラーピッカーの色見本をクリックして視覚的に選びます。
2. 50〜950 のスケールが即座に更新されます。明るいティント（50〜400）は白へ、500 はベースカラー、暗いシェード（600〜950）は黒へ混ぜられます。
3. 各行を見ると、段階番号（50 … 950）、色見本、HEX 値が横並びで確認できます。
4. 任意の行の末尾にあるコピーボタンをクリックすると、その段階の HEX 値をクリップボードにコピーできます。
5. 500 だけが必要なときは、入力欄の横のコピーボタンでベースカラーの HEX 値をコピーします。

使用例

#4f86f7

#f6f9ff

#4f86f7

#0b1323

よくある質問

どのカラー形式を入力できますか？

ベースカラーは #rrggbb（6桁）または #rgb（3桁の短縮形）のいずれかの HEX 値で入力します。値が有効な HEX カラーでない場合は「Invalid HEX color」というメッセージが表示され、スケールは生成されません。出力の各段階は #rrggbb 形式の HEX 値で表示されます。

シェードはどのように計算されますか？

各段階はベースカラーと純白または純黒との線形混合です。50〜400 の段階は白に向かって徐々に少ない割合で混ぜられ、500 はベースカラーそのまま、600〜950 は黒に向かって徐々に多い割合で混ぜられます。番号付けは Tailwind CSS のカラースケールに一致します。

なぜ 500 が自分のベースカラーの番号と必ずしも一致しないのですか？

500 は常にあなたの正確なベースカラーです。本ツールは色を知覚的な明度カーブに再センタリングしないため、入力が非常に明るい、または非常に暗い場合は、スケールの明るい側か暗い側の範囲が狭くなります——最も均等なスケールにするには中間トーンのベースを選んでください。

HEX を入力する代わりに視覚的に色を選べますか？

はい。内蔵のカラーピッカー付きの大きな色見本をクリックして色を選べます。HEX フィールドは自動的に更新され、変更するたびに 50〜950 のスケール全体が瞬時に再計算されます。

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

いいえ。すべてはローカルのカラー演算を使ってブラウザ内で完結します。カラー値がサーバーに送信されることは一切ないため、オフラインでも動作し、パレットのプライバシーが保たれます。