![見出し画像](https://assets.st-note.com/production/uploads/images/137921322/rectangle_large_type_2_57411f0ead0194cbabca73dee0019339.jpeg?width=1200)
色調整に HSL も使ってみる
目標の色に近づけるために、HSV( 色相・彩度・明度)や
RGB( Red Green Blue )で色調整をすることを、下記の記事でご紹介しました。
色調整は HSV と RGB で大体間に合いますが、HSL というのもあり
最近使うようになりました。
HSL は
色相( Hue)
彩度( Saturation )
輝度( Lightness ) のことで、HSL 色空間と呼ばれます。
HSV との違いは 明度( V )の代わりに 輝度( L )があること。
色調整には HSV と RGB で間に合うことが多いですが、HSL の 輝度( L )で
色調整したい場合がありますので(私)、参考例を1つあげます。
![](https://assets.st-note.com/img/1713603854420-A43HvRyuX3.jpg)
伊藤園 旬野菜 ペットボトルのラベルに使われている金色っぽい色を
目標の色にします( 近い色を作る )。
その色をどうやって作るか、最初は分かりませんでしたが、色相はイエローオレンジか、オレンジかなと思いました(色相は赤ではなく、赤から黄色の間の色相と判断したため)。
![](https://assets.st-note.com/img/1713605005554-gZWsUODMwl.jpg?width=1200)
確認してみると、イエローオレンジの明度を落とした色が似た感じの色でした。上段の黄色っぽい丸の色がイエローオレンジで、その下がイエローオレンジの明度を落とした色です。
使用しているソフトは Aseprite というドット絵用ソフトです。
目標の色はもっと明るく、白っぽい感じです。
HSV の明度( V )を上げるか、カラーピッカーで白方向の色を選ぶことが
できますが、白っぽさを増したいという場合に、HSL の輝度( L )で
調整できる場合があります。
![](https://assets.st-note.com/img/1713605226632-qoOuDKZ4H5.jpg)
ちなみに、HSV の彩度( S )を下げることで、白っぽくなる場合が
ありますが、暗い色の場合、彩度を下げるとグレーっぽくなるため
彩度を下げて白っぽくすることができません。
![](https://assets.st-note.com/img/1713605437952-M3iaNctMkt.jpg)
そんな時い役立つのが HSL の輝度( L )です。
上図のように輝度を上げることで白っぽくなること分かります。
このように暗い色を白っぽくしたい場合、HSL の輝度( L )で白っぽく
できないかお試しください。
![](https://assets.st-note.com/img/1713605862121-Sxpjg357mA.jpg?width=1200)
上段は HSV で明度を上げた色で、下段は HSL で輝度( L )を上げた色です。
下段1番右、輝度を上げた色が目標色に近いです。
![](https://assets.st-note.com/img/1713606180293-vugTiY4SLK.jpg?width=1200)
さらに HSL の輝度を下げ、目標色に近づいたので終了です。
![](https://assets.st-note.com/img/1713606590688-yKu1M8zK0j.jpg)
![](https://assets.st-note.com/img/1713606703640-IiyATibyfX.jpg)
ちなみに、金色とシトラス色とは違いますね。
最後にまとめると、HSV と RGB で色調整は間に合うことが多いですが
暗い色を白っぽくしたい場合など、HSL の輝度( L )で調整が役立ちます。
以上となります。
最後までご覧いただきありがとうございました。
参考ページ
この記事が気に入ったらサポートをしてみませんか?