CSSを使用した画像の彩度変更方法

まず、CSSのfilterプロパティを使用して彩度を変更する方法を紹介します。以下のコード例を参考にしてください。

.image {
  filter: saturate(200%); /* 彩度を200%に設定 */
}

上記の例では、.imageというクラスを持つ要素の彩度を200%に設定しています。このように、saturate関数を使用して彩度の値を指定することで、画像の彩度を調整することができます。値を100%以下に設定すると彩度が低下し、100%以上に設定すると彩度が増加します。

また、CSSのhue-rotateプロパティを使用することで、画像の色相を変更することもできます。以下のコード例を参考にしてください。

.image {
  filter: hue-rotate(90deg); /* 色相を90度回転 */
}

上記の例では、.imageというクラスを持つ要素の色相を90度回転しています。hue-rotate関数を使用することで、画像の色相を任意の角度だけ回転させることができます。

さらに、CSSのbrightnessプロパティやcontrastプロパティを組み合わせて、画像の明るさやコントラストも調整することができます。以下のコード例を参考にしてください。

.image {
  filter: brightness(150%) contrast(200%); /* 明るさを150%、コントラストを200%に設定 */
}

上記の例では、.imageというクラスを持つ要素の明るさを150%、コントラストを200%に設定しています。brightness関数とcontrast関数を使用することで、画像の明るさやコントラストを調整することができます。

これらの方法を組み合わせることで、さまざまな画像処理効果を実現することができます。ぜひ、実際に試してみてください。