オンライン画像HSL調整ツール

色相・彩度・明るさの調整で画像の印象を変える

このツールは、画像全体の色相（色合い）、彩度（鮮やかさ）、明るさ（輝度）を数値で指定して調整します。例えば、色相を45度、彩度を150%、明るさを80%に設定すると、ブラウザのフィルタ処理により hue-rotate(45deg) saturate(150%) brightness(80%) が適用されます。色相を500度に指定しても360度に丸められ、彩度を-20%にしても0%に制限されます。

具体的な使い方と出力例

ポートレート写真の肌色を自然に補正したい場合、色相をわずかに調整し、彩度を下げることで落ち着いた印象にできます。逆に商品写真では彩度を上げて鮮やかに見せることができます。ただし、彩度や明るさを強くしすぎると色情報が失われるクリッピングが発生するため、元画像を保存しておくことをお勧めします。

処理の仕組みと制限

処理はブラウザのキャンバス上で行われ、画像はローカルに留まります。出力サイズは元画像と同じです。対応形式はブラウザがデコードできる画像（PNG、JPEG、WebP、GIF、BMPなど）で、ファイルサイズは25MB、ピクセル数は2400万までです。レイヤー編集やRAW現像、アニメーション保持には対応していません。

よくある質問

Q1: 色相を360度以上に設定するとどうなりますか？

色相の入力範囲は-360〜360度ですが、360度を超える値は360度に、-360度未満は-360度に丸められます。例えば500度は360度として扱われます。

Q2: 彩度を0%にすると画像はどうなりますか？

彩度0%はグレースケール（白黒）になります。明るさ0%にすると黒になりますが、画像の形状は保持されます。

Q3: このツールはHSLの「L（輝度）」を調整しますか？

いいえ、このツールの3番目の操作はCSSのbrightness（明るさ）であり、HSLのL（輝度）とは異なります。画像全体の明るさを調整します。

チェックリスト

• 画像を読み込む
• 色相・彩度・明るさを設定する
• 「画像を生成」をクリックする
• 結果を確認する
• PNGでダウンロードする