はじめに
こんにちは、東京アプリケーションシステム第二ソリューション部のK.T.です。
今回はスタイルで色を変更するということで、色相や彩度を変更して元の色を変化させていきたいと思います。
HSV/HSB
色相(Hue)、彩度(Saturation)、明度(Brightness)の組み合わせで色を表します。
色相は、0~360の値
彩度・明度は0~1の値で表されます。
色相
1 |
<div style='filter: hue-rotate(120deg);'></div> |
0deg
120deg
240deg
彩度
1 |
<div style='filter: saturate(200%);'></div> |
100%
200%
50%
明度
1 |
<div style='filter: brightness(200%);'></div> |
100%
200%
50%
まとめ
色相、彩度、明度を変更することで、元の画像の色を変更することもできます。
リソースの節約にもなるので、是非試してみてください