Colors » Changing a color’s saturation

Changing a color’s saturation

There’s saturate() for making a color more, er… colorful, and desaturate() for making it duller. They both take a value between 0 and 100, and the default is 10.

# more color
purplerPurple = framerPurple.saturate 40
# less color
lessBlue = framerBlue.desaturate 50
# no color
noGreen = framerGreen.grayscale()
Download Framer project

The grayscale() function simply dials down the saturation to zero.

Purpler purple, lesser blue, and no green

These functions change the saturation property of a color (the S in HSL). This also means that colors that already have a saturation of 100% can’t be made ‘even brighter.’

Remember that, just like lighten() or darken(), these functions never change the existing color. They will return a new color.