データ変換
色の濃淡生成
基準の色を1つ入力すると、明るい側・暗い側の段階的な色の並びを作ります。
入力内容はサーバーへ送信されませんインストール不要無料で使えます
明るい側2段階+基準+暗い側2段階 = 全5行
入力例
結果
基準色を入力して「生成」を押してください。
このツールでできること
色の濃淡生成にまつわる主な機能です。
- 1色から明るい側・暗い側の段階的な色の並びを作れます
- 白・黒と混ぜる方式/HSLの明度を変える方式を選べます
- 片側の段階数(1〜10)を指定できます
- テキスト入力・カラーピッカーどちらからも基準色を指定できます
- 入力・表示はブラウザ内で処理し、サーバーへ送信しません
手順を見る
- 基準色をテキストまたはカラーピッカーで指定します
- 片側の段階数・計算方式・出力書式を選びます既定は2段階・白黒と混ぜる方式です
- 「生成」を押します
- 結果一覧を確認し、「一覧をコピー」でコピーします
こんなときに使えます
こんな場面で色の濃淡生成が役立ちます。
利用シーンを見る
- ボタンのホバーの色を作りたいとき
- 背景の薄い色・枠線の色を基準色から作りたいとき
- カラーコード抽出ツールで見つけた色の濃淡を作りたいとき
濃淡の計算方法
詳しい解説を見る
比率の決め方
片側の段階数をnとしたとき、i段目(i = 1..n)の比率は i × 80 / n(%)です。n = 2のとき40%・80%になります。並びの端は純粋な白・黒にはしません。
方式(a): 白・黒と混ぜる(既定)
基準色のsRGBのRGB値を、白または黒と比率で線形補間します(color-mix(in srgb, ...)に相当する考え方です)。
方式(b): HSLの明度を変える
基準色のHSLのうち、明度(L)だけを比率に応じて0%(黒)または100%(白)に近づけます。色相(H)・彩度(S)は変更しません。
方式による結果の違い
どちらの方式を選ぶかによって、同じ基準色・同じ比率でも結果の色は異なります。採用した計算式・丸め(四捨五入)で固定しているため、 他のツール・デザインソフトの結果と一致することは保証しません。
よくある質問
濃淡の計算方式にはどんな違いがありますか?
「白・黒と混ぜる」はRGB値を白または黒と線形補間します。「HSLの明度を変える」はHSLの明度(L)だけを変え、色相・彩度は変えません。同じ基準色・比率でも結果の色は方式によって異なります。
段階数の上限はありますか?
あります。片側10段階が上限です(全体で最大21行)。
カラーコードはどの書式を入力できますか?
HEX(#rrggbb・#rgb)・RGB(rgb(R, G, B))・HSL(hsl(H, S%, L%))の3書式に対応しています。
結果の並びの端は純粋な白・黒になりますか?
いいえ。比率の上限は80%のため、純粋な白・黒にはなりません。
入力した内容は外部に送信されますか?
いいえ。処理はすべてブラウザ内で完結しており、入力内容が外部やアクセス解析(GA4)へ送信されることはありません。