saturate()

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

試してみましょう

構文

css
saturate(amount)

引数

amount

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

saturate() の正しい値の例

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

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報