# Color variables

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 [hex code](#user-content-fn-1)[^1] that determines the color value
* An [alpha value](#user-content-fn-2)[^2] that controls its transparency

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

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FxtgBUHqt6bc82yu9efKj%2Fcolor-variable-editor%402x.png?alt=media&#x26;token=37f1f264-cee4-462d-8500-427c0c06ffe4" alt=""><figcaption><p>You access the Color Variable editor from the <em>Styles</em> tab.</p></figcaption></figure>

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 styles[^3], 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.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2FHfMnDijEyXACLRGQQ9KH%2Fcolor-variables-in-styles%402x.png?alt=media&#x26;token=21722d38-88bb-44e2-8660-c05efdc68852" alt=""><figcaption></figcaption></figure>

[^1]: A hex code is a six-digit number used in to represent a specific color. It condenses RGB values into a single code.\
    \
    The first two digits of the hex code represent the red component, the middle two represent the green component, and the last two represent the blue component.

[^2]: Alpha value in hex codes represents the opacity level of a color. While traditional hex color codes have 6 digits (e.g., #RRGGBB), adding an alpha value extends it to 8 digits (e.g., #RRGGBBAA).

    &#x20;    &#x20;

    The two extra characters denote transparency, with '00' being fully transparent and 'FF' being fully opaque.

    These codes are generated automatically in Bubble.\ <br>

[^3]: The Styles tab in Bubble provides you with a centralized place to define and manage all of your app's styles.

    Styles create a consistent, visually appealing design for your app while making it easier to update that design in the future.\
    \
    Article: [Styles](https://manual.bubble.io/~/changes/1188/help-guides/design/styling/styles)