Color variables

This section covers Color variables, used to set a palette of colors that can be applied throughout your app

The Color Variables feature in the Styles tab enables you to establish a palette of colors that you can apply throughout your Bubble app. Each color variable contains:

• A that determines the color value

• An alpha value that controls its transparency

By incorporating both color and font variables, you can establish a consistent design system for your app. Utilizing a color variable in the styling of an element creates a connection to the color value specified in the Styles tab.

You access the Color Variable editor from the Styles tab.

As a result, if you need to modify the color, you only have to make the change in one place and it will automatically be reflected wherever that color variable is used, saving you the hassle of adjusting each element or style separately.

Do Color variables apply to Styles?

Yes, Color variables apply to , meaning that if you update a Color variable it will automatically be updated on all Styles that use that variable. By combining the two you can set up a highly flexible color system that lets you control the color appearance of your elements from one place.