Color variables are named colors you save once and reuse across your app. Instead of picking the same hex code and alpha value every time you style an element, you reference the variable, keeping your color choices consistent everywhere they're used.
When you update a color variable, every element that uses it updates too. This makes it much easier to iterate on your app's look and feel, especially as your app grows.
What color variables are for
Most apps rely on a small palette of colors that appear over and over: brand colors, background colors, text colors, and status colors like success and error. Without variables, each of those colors ends up scattered across your app, hardcoded on individual elements or in styles. Updating one color means finding and updating every style and element that uses it.
Color variables replace that pattern with a single, named reference. Once a color is saved as a variable, it becomes part of your design system, available to any element or style that needs it.
Creating a color variable
To create a color variable:
Open the Global tab and click the Variables section.
Scroll down until you see the Colors header.
Click the New color variable button in the upper right corner of the Color variables section.
Name the variable. The name is how you'll reference the color in the editor, so it should make the variable easy to identify at a glance.
Optionally, add a description to help anyone understand what the variable is meant for.
Pick a color using the color picker.
Click Create to save the new color variable.
Naming your color variable
Name by role, not appearance. Primary is more useful than Blue, because the name still makes sense if you change the color later.
Group related variables with a prefix. Prefixes like Text, Background, and Border help related colors sort together. For example: Text default, Text muted, Text inverse.
Be specific but concise. Background subtle is clearer than Background if you have more than one background variable.
Match your team's naming conventions. Consistency across the palette is more valuable than any specific naming choice.
Writing a useful description
Explain the intent, not the color. Used for primary calls to action is more helpful than Bright blue used on buttons.
Note where it should be used. For example: Backgrounds behind cards and modals or Error states, including borders and text.
Note where it shouldn't be used. If two variables are similar, describing when to pick one over the other prevents mix-ups.
Keep it short. A sentence or two is usually enough.
Using the color picker
The color picker gives you a few different ways to choose the color for your variable.
The color field: The large square where you pick the color's saturation and brightness. Moving up brightens the color, moving down darkens it. Moving right adds saturation, moving left removes it.
The hue slider: The narrow band below the color field. Slide the marker along the band to change the base hue.
The opacity slider: Controls transparency. Slide left for more transparent, right for fully opaque.
The hex code and opacity input: Type a hex code directly for exact colors. You can also paste in codes from other tools.
Using color variables
Anywhere you'd normally set a color in the property editor, you can pick a color variable instead. The color picker shows your saved variables alongside the standard color options.
Color variables can be used in:
Element properties, such as backgrounds, borders, text color, and shadows.
Styles, so an entire component's color palette is built from your variables.
Conditional properties, letting you change an element's color based on a rule while still using variables.
Updating a color variable
Open the Global tab and click the Variables section.
Scroll down to the Colors header and find the color variable you want to update.
On the right side of the color variable row, click the color or alpha value to change them.
To edit the name or description, click the pencil icon on the left side of the row, make your changes, and click Save.
The color updates everywhere it's used in your project. Instead of tracking down every place a color is used, you change it in one place and see the update propagate everywhere.
Finding components that use a color variable
Find usages is useful when you want to review the impact of a change before making it, clean up unused variables, or trace inconsistencies in your design. It's especially helpful in larger apps, where the same variable can be referenced in many places across pages, reusable elements, and workflows.
Navigate to Global, Variables and scroll to the color variable you want to search for.
Click the ... menu on the right side of the color variable row and click Find usages.
The App search tool opens and shows all components that use the color variable. Click one to focus on it in the editor.
Common uses of color variables
Color variables work best when they reflect the roles colors play in your design, rather than the specific colors themselves. A good starting palette often includes:
Brand colors, such as Primary and Secondary.
Background colors, such as Background default and Background subtle.
Text colors, such as Text default, Text muted, and Text inverse.
Border colors, such as Border default and Border strong.
Status colors, such as Success, Warning, Error, and Info.
Building your palette this way makes it easier to maintain, easier to explain to collaborators, and easier to adjust as your design evolves.
Tips for working with color variables
Name variables by role, not appearance. Primary is easier to work with than Blue, because it stays accurate even if the color changes.
Keep the palette small. A tight palette is easier to reason about and enforces consistency.
Use variables in styles. Applying color variables inside your styles is what ties the whole system together.
Plan for dark mode from the start. If you know your app will support dark mode, name your variables in a way that makes both light and dark values easy to define, such as Background default rather than White.
FAQ: Color variables
What's the difference between a color variable and picking a color directly?
What's the difference between a color variable and picking a color directly?
A color variable is a saved, named color that can be reused across your app. Picking a color directly hardcodes the specific hex code into that element, so it can't be updated centrally. Color variables make it easy to keep your palette consistent and to change colors in one place.
Can I use color variables in styles?
Can I use color variables in styles?
Yes. Styles can reference color variables just like individual elements can. Using variables inside styles is what ties the whole design system together, since your elements pick up colors indirectly through the styles they use.
What happens when I change a color variable?
What happens when I change a color variable?
Every element and style that uses the variable updates automatically to reflect the new color. This is one of the main reasons to use color variables in the first place.
Can I delete a color variable that's still in use?
Can I delete a color variable that's still in use?
You can, but any element referencing it will no longer be linked to it, and will revert to a hardcoded color. Use Find usages to review where the variable is used before deleting it, so you can update or replace it where needed.
Deleting a color variable can't be undone, so proceed with care.
How many color variables should I have?
How many color variables should I have?
There's no strict rule, but a small, well-chosen palette is easier to maintain than a large one. Most apps do well with a set that covers brand colors, backgrounds, text, borders, and a few status colors.
Can I use color variables in conditional properties?
Can I use color variables in conditional properties?
Yes. Conditional properties support color variables, so you can change an element's color based on a rule while still referencing your saved palette.
Can I organize color variables into groups?
Can I organize color variables into groups?
There's currently no way to organize color variables into groups or folders.
Do color variables work in both web and native mobile apps?
Do color variables work in both web and native mobile apps?
Yes. Color variables are part of your app's design system and are available on both platforms.
Can I use color variables for dark mode?
Can I use color variables for dark mode?
Yes. One common approach is to set up a conditional on a style that checks a value on the user, such as a dark mode toggle, and changes the color accordingly.