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.
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"
"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.
Want to set the background color of the entire screen? Simple:
# Setting the color of the Screen Screen.backgroundColor = "rgba(51, 204, 255, 1)"
When you can’t set the screen’s background color it’s probably because of a Design (or other imported) artboard being on top. Set the opacity of the artboard’s fill color to zero.