Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Edit] CSS [Edit] CSS: Filter Functions .saturate() #4876

Merged
merged 9 commits into from
Jul 4, 2024
34 changes: 22 additions & 12 deletions content/css/concepts/filter-functions/terms/saturate/saturate.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,50 @@
---
Title: 'saturate()'
Description: 'Increase or decrease the intensity of the color of the element it is applied to.'
Description: 'Increases or decreases the color intensity of an element.'
Subjects:
- 'Web Development'
- 'Web Design'
Tags:
- 'Images'
- 'Functions'
- 'Colors'
- 'Elements'
CatalogContent:
- 'learn-css'
- 'paths/front-end-engineer-career-path'
- 'paths/full-stack-engineer-career-path'
---

Increase or decrease the intensity of the color of the element it is applied to.
In CSS, the `saturate()` function increases or decreases the [color](https://www.codecademy.com/resources/docs/css/colors) intensity of an element.

## Syntax

```css
```pseudo
filter: saturate(<value>);
```

where a required `<value>` can be one of the following:
The required `<value>` can either be a positive decimal number or a positive percentage number, such as (but not limited to):

- Number value: `0`, `1.5`
- Percentage value: `100%`, `50%`
- Decimal value: `0`, `0.5`, `1.0`, `1.5`, ...
- Percentage value: `0%`, `50%`, `100%`, `150%`, ...

**Note:** Value defaults to `1` or `100%` leaving element unchanged. Higher values will increase saturation. A value of `0` and `0%` will remove all color leaving the element completely unsaturated. Negative values are not allowed.
> Note: The value defaults to `1` or `100%`, leaving the target element unchanged. Higher values will increase the saturation. A value of `0` or `0%` will remove all the colors, leaving the element completely unsaturated. Negative values are not allowed.

## Example 1
## Example

Set the saturation of a color to `25%`:
The following example sets the saturation of a color to `50%` and `1.5` (or `150%`):

```css
.banner-image {
filter: saturate(25%);
.logo-image-2 {
filter: saturate(50%);
}

.logo-image-3 {
filter: saturate(1.5);
}
```

Here is the output for the above example:

![Output for the above example on saturate()](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-filterfunction-saturate-example.png)

Here, the first image shows the original saturation at `saturate(100%)`, the second image is less saturated at `saturate(50%)`, and the last image is more saturated with `saturate(1.5)`.
Binary file added media/css-filterfunction-saturate-example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading