saturate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2016年9月⁩.

saturate() はCSS の関数で、入力画像の彩度を上げたり下げたりします。結果は<filter-function> です。

メモ:saturate() は RGB 色に対する行列演算として定義されています。これは実際には色を HSL モデルに変換するものではなく、非線形操作です。そのため、特に彩度の高い色の場合、元の色の彩度や明度が維持されない場合があります。

試してみましょう

filter: saturate(1);

filter: saturate(4);

filter: saturate(50%);

filter: saturate(0);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

構文

css

saturate(amount)

引数

amount: 変換の量で、<number> または<percentage> で指定します。100% 未満の値では彩度を下げ、100% を超える値では彩度を上げます。0% の値では画像が完全に彩度がなくなり、100% の値では入力が変更されないままになります。補間の初期値は1 です。

例

saturate() の正しい値の例

css

saturate(0)     /* 彩度なし */saturate(.4)    /* 彩度 40% */saturate(100%)  /* 効果なし */saturate(200%)  /* 2 倍の彩度 */

saturate() は色相や明度を保存しない

下記の図は、hsl(0 50% 50%) を中間点とする2つのカラーグラデーションを比較したものです。最初のグラデーションはsaturate() を使用して生成したもので、2つ目は実際の HSL カラー値を使用したものです。saturate() グラデーションが両端で色相と明度の違いを示していることに注目してください。

html

<div>  <p><code>saturate()</code> を使用</p>  <div></div></div><div>  <p><code>hsl()</code> を使用</p>  <div></div></div>

#saturate,#hsl {  display: flex;  margin: 1em 0;}#saturate div,#hsl div {  width: 2px;  height: 100px;}

const saturate = document.getElementById("saturate");const hsl = document.getElementById("hsl");for (let i = 0; i <= 200; i++) {  const div1 = document.createElement("div");  div1.style.backgroundColor = `hsl(0 ${i / 2}% 50%)`;  hsl.appendChild(div1);  const div2 = document.createElement("div");  div2.style.backgroundColor = "hsl(0 50% 50%)";  div2.style.filter = `saturate(${i}%)`;  saturate.appendChild(div2);}