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"

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)"

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

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

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.