Skip to main content
.saturation(amount: number): Component
amount
number
required
The saturation multiplier. 0 produces grayscale, 1 is the original color, and values greater than 1 oversaturate.

Support

Usage

Desaturate to grayscale

Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(0)

Half saturation

Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(0.5)

Oversaturated

Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(2)

See Also