saturate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

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

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

試してみましょう

構文

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 id="saturate"></div>
</div>
<div>
  <p><code>hsl()</code> を使用</p>
  <div id="hsl"></div>
</div>
js
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);
}

仕様書

Specification
Filter Effects Module Level 1
# funcdef-filter-saturate

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
saturate()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報

その他の filter および backdrop-filter プロパティの値で使用できる <filter-function> 関数には、次のものがあります。