オンライン色の明るさ調整ツール
ベースカラーと割合を指定して、白に向かって線形に明るくした色を生成。HEX・RGB・HSV・HSLで結果を確認・編集できます. 処理はブラウザ内でローカルに行われます。
使ってみる
色を明るくする仕組み
このツールは、選択した色の各RGBチャンネルを白(255)に向かって線形に補間します。計算式は 出力 = 元の値 + (255 - 元の値) × 割合 / 100 で、結果は整数に丸められます。例えば、黒(#000000)を50%で明るくすると #808080 になります。0%では元の色のまま、100%では白(#FFFFFF)になります。
具体的な操作例
ベースカラーを #22A06B、明るさを20%に設定して生成すると、各チャンネルは次のように計算されます。
- R: 34 + (255-34)×0.2 = 78.2 → 78
- G: 160 + (255-160)×0.2 = 179
- B: 107 + (255-107)×0.2 = 136.6 → 137
結果は #4EB389 になります。
入力と制限
割合は0〜100の範囲に制限され、範囲外の値はクランプされます。数値でない値は拒否されます。このツールは単一の色のみを処理し、画像のピクセルを変更するものではありません。また、コントラスト比の測定や、テキストと背景の組み合わせのアクセシビリティ保証は行いません。アルファ値(透明度)は保持されません。
よくある質問
Q1: このツールはHSLの「明度」を上げるのと同じですか?
いいえ。HSLの明度を上げる操作とは異なり、このツールはRGBチャンネルを白に向かって線形に補間します。そのため、色相や彩度が変化する場合があります。
Q2: 割合を100%にするとどうなりますか?
100%にすると、すべてのチャンネルが255になるため、結果は白(#FFFFFF)になります。
Q3: 結果の色をコピーするにはどうすればよいですか?
結果のカラーパネルに表示されるHEX、RGB、HSV、HSLの各値は、それぞれのフィールドからコピーできます。
チェックリスト
- ベースカラーを選択する
- 明るさの割合を設定する
- 生成アクションを実行する
- 結果の値を確認・コピーする
処理はブラウザ内でローカルに行われます。