Colors » Colors are objects

Colors are objects

Colors in Framer are objects. When you set a layer’s backgroundColor (or other color property) it will be converted into a Color object.

A color object has r, g, b and h, s, l properties, as well as an a (alpha) property.

Take, for instance, this layer in Framer’s signature blue:

layer = new Layer
    backgroundColor: "#28AFFA"

(Here we use the Hex format, but any of the CSS color notations would work. See the examples in Background color.)

We can print out the RGB values of the color object behind backgroundColor:

# The color’s RGB values
print "Red: " + layer.backgroundColor.r
print "Green: " + layer.backgroundColor.g
print "Blue: " + layer.backgroundColor.b

» "Red: 40"
» "Green: 175"
» "Blue: 250"

And do the same thing with the HSL and alpha values:

# The color’s HSL values
print "Hue: " + layer.backgroundColor.h
print "Saturation: " + layer.backgroundColor.s
print "Lightness: " + layer.backgroundColor.l

» "Hue: 201.42857142857144"
» "Saturation: 0.9545454545454546"
» "Lightness: 0.5686274509803921"
# The color’s alpha value
print "Alpha: " + layer.backgroundColor.a

» "Alpha: 1"
Download Framer project

You can also explicitly define these properties when creating a new color object. Here’s an RGBA example:

framerBlue = new Color
    r: 40
    g: 175
    b: 250
    a: 1

The s and l properties differ from the CSS format, though: 100% saturation or lightness is not 100, but 1 (just like alpha).

lime = new Color
    h: 120
    s: 1
    l: 0.5
    a: 1
alsoLime = new Color "hsla(120, 100, 50, 1)"
Download Framer project

Note: You can also directly pass in a CSS color string when creating a color object, as I did above with alsoLime.

Framer blue, lime and… also lime

Existing color objects cannot be changed. Changing the r value, for instance, will not work:

# trying to set framerBlue’s red value to 200
framerBlue.r = 200
print framerBlue

» <Color r:40 g:175 b:250 a:1>

But you can always create a new color based on an existing one.

# a new color with more red
framerBlueChanged = new Color
    r: 200
    g: framerBlue.g
    b: framerBlue.b
    a: framerBlue.a
print framerBlueChanged.toRgbString()

» "rgb(200, 175, 250)"
rightLayer.backgroundColor = framerBlueChanged
Download Framer project
Add some red to blue to get purple

It’s easier when you just want a lighter or darker color or one with a different saturation because there are built-in functions to help you make these changes.