カラーシェード生成ツール
ベース色を指定すると、ティント（白寄せ）からシェード（黒寄せ）までの段階を自動生成。各HEXをクリックでコピーできます。
色をクリックするとHEXコードをコピーします。
ティント（白寄せ）
ベース色
シェード（黒寄せ）
使い方
1
ベース色を指定
カラーピッカーまたはHEXコードでベースとなる色を入力します。
2
段階を生成
ティント（白寄せ）からシェード（黒寄せ）までの明度段階が自動で生成されます。
3
HEXをコピー
気に入った色をクリックしてHEXコードをコピー。「全HEXをコピー」でまとめて取得もできます。
カラーシェード生成ツールとは
1つのベース色から、白を加えたティストと黒を加えたシェードの明度段階を自動生成するWebツールです。HSLの明度（Lightness）を均等に調整することで、色相と彩度を保ったまま自然なグラデーション段階を作成します。すべての処理はブラウザ内で完結し、入力した色情報がサーバーに送信されることはありません。
機能・特徴
- 明度段階の自動生成HSLの明度を均等に調整し、ティントとシェードの段階を瞬時に生成します。
- ワンクリックコピー各色をクリックするだけでHEXコードをコピー。デザイン作業がスムーズに進みます。
- 段階数の調整片側5〜10段階まで自由に変更でき、用途に合わせた配色スケールを作れます。
- プライバシー保護すべての処理はブラウザ内で完結。色情報はサーバーに送信されません。
活用シーン
- UIデザインのカラースケール（50〜900）作成
- CSS変数・デザイントークンの配色定義
- ホバー・アクティブ状態の濃淡バリエーション作成
- グラフ・チャートの段階的な配色
- ブランドカラーのバリエーション展開
よくある質問
ティントとシェードの違いは何ですか？
ティント（tint）は元の色に白を加えて明るくした色、シェード（shade）は黒を加えて暗くした色を指します。このツールでは明度（Lightness）を上げる方向がティント、下げる方向がシェードです。
どのような仕組みで段階を生成していますか？
ベース色をHSL（色相・彩度・明度）に変換し、色相と彩度を保ったまま明度を均等に調整しています。これにより、色味を崩さず自然な濃淡のグラデーションを作成できます。
生成したHEXコードはどう使えますか？
各色をクリックするとHEXコードがクリップボードにコピーされます。CSSのcolorやbackground-color、デザインツールのカラー指定などにそのまま貼り付けて利用できます。
スマートフォンでも使えますか？
はい、スマートフォン・タブレット・PCなど、すべてのデバイスでご利用いただけます。カラーピッカーは端末標準のものが利用されます。
入力した色情報は保存されますか？
いいえ、入力された色情報はサーバーに送信・保存されません。すべての計算処理はお使いのブラウザ内で完結するため、安心してご利用いただけます。