Background color

Framer’s default background color is a transparent gray (in Code) or transparent blue (in Design).

But why is it backgroundColor, and not just color? Because of CSS. It refers to the background-color CSS property.

You can also set color, but that will change the color of the layer’s text (in the case of a Text Layer or HTML layer).

The value of backgroundColor has to be a string, but you can write it in any of the different CSS color formats.

Tip: Layers with a (transparent) image can at the same time have a color. You just have to make sure to pick anything but Framer’s default gray ("rgba(123, 123, 123, 0.5)").

# All of these describe the same color: lime green
# CSS Named Color
greenLayer.backgroundColor = "lime"
# Hex Code
greenLayer.backgroundColor = "#00ff00"
# Websafe Hex Code
greenLayer.backgroundColor = "#0f0"
# RGB Decimal
greenLayer.backgroundColor = "rgb(0,255,0)"
# RGBA Decimal, the last value is ‘alpha’ (opacity)
greenLayer.backgroundColor = "rgba(0,255,0, 1)"
# Hue Saturation Lightness
greenLayer.backgroundColor = "hsl(120,100%,50%)"
# Hue Saturation Lightness Alpha
greenLayer.backgroundColor = "hsla(120,100%,50%, 1)"

An empty layer’s transparent gray color has a use: It’s for making areas of your design tappable. You can create a layer, give it the correct size and position, and then set its background color to "transparent" to make it invisible. You then have a transparent ‘button’ that you can use to trigger an action.

backButton = new Layer
    width: 160, height: 44
    backgroundColor: "transparent"

Instead of "transparent" you can also use null (without quotation marks) or simply an empty string ("").

backButton = new Layer
    width: 160, height: 44
    backgroundColor: null

backButton = new Layer
    width: 160, height: 44
    backgroundColor: ""

By the way, the Colors chapter has info about changing and mixing colors.

The screen’s background color

Want to set the background color of the entire screen? Simple:

# Setting the color of the Screen
Screen.backgroundColor = "rgba(51, 204, 255, 1)"