Colors » Lightening or darkening colors

Lightening or darkening colors

When you call lighten() or darken() on an existing color, white or black will be added to the original color, and a new color will be returned. You can pass in a value up to 100, with the default being 10.

framerPurple = new Color "rgb(135, 125, 215)"
framerBlue = new Color "rgb(40, 175, 250)"
framerGreen = new Color "rgb(125, 221, 17)"
# a lighter color
lighterPurple = framerPurple.lighten 20

# a darker color (default = 10)
darkerBlue = framerBlue.darken()

# an even darker color
darkerGreen = framerGreen.darken 30
Download Framer project
Lighter purple, darker blue, and even darker green

These functions change the lightness value of the original color (the L in HSL). That’s a value between zero and 100%. Therefore, color.lighten 100 will always return white, and color.darken 100 will always return black.