# Color Variables
> Learn how to create, apply, and manage Color Variables in Sketch to keep colors consistent across your document and Libraries.
**URL:** https://www.sketch.com/docs/symbols-and-styles/color-variables/ | **Last updated:** 2026-05-19
---
With Color Variables, you can set colors and gradients that synchronize across your document. When you make changes to a Color Variable, those changes appear across all of the layers that use it. You can create Color Variables that are local to a specific document or share them in a Library to use across different documents.
- Color Variables let you sync colors across your document. Change a Color Variable once and it updates every layer that uses it.
- You can export Color Variables as [Color Tokens](/docs/developer-handoff/#exporting-color-variables-as-color-tokens) or [copy their individual values](/docs/developer-handoff/#how-to-export-individual-assets) from the web app inspector.
Color Variables are also [available in the web app Inspector](/docs/developer-handoff/#copying-colors-and-color-variables), useful during handoff.
## Creating a Color Variable
You can create a new Color Variable from the color well in the Inspector, from the Components View, or from **Edit** > **Find and Replace Color**.
### Creating a Color Variable from the Inspector
Select any layer and click on the color well in the Inspector. Select the solid color you want to use, then click to add a Color Variable. Type a name and click **Add** or press ↵ to save. You can also use the eyedropper tool to create Color Variables from your display, inside or outside of the Mac app.
### Creating a Color Variable from the Components View
1. Switch to Components View 1. Click the **Color Variables** tab in the toolbar, then click 1. Set the color you want in the color panel that appears in the Inspector, then type a name
1. Press ↵ or click anywhere in the Previews Grid to save
## Organizing Color Variables
### Grouping Color Variables
To group your Color Variables:
1. Switch to Components View and click the **Color Variables** tab
1. Hold ⇧ and click the Color Variables you want to group
1. Control-click your selection and choose **Group** from the context menu
1. Double-click the group title in the left sidebar to rename it
You can also drag Color Variables into existing groups in the left sidebar.
Like Symbols or Text Styles, you can also group Color Variables by using a `/` in their names. Anything before `/` will become the group name, and anything after will be the name of the Component within that group. For example, Primary/light and Primary/dark will become part of a group named Primary.
### Organizing Color Variables in the Components View
Color Variables and groups will organize automatically in alphabetical order. You can use numbers in front of Color Variables so they appear in the order that works best for you. For example, `1 Primary` or `2 Secondary`. You can also add numbers to the end of similarly named variables, such as `Neutral-100`, `Neutral-200`.
## Applying Color Variables
### Applying a Color Variable from the Inspector
Color Variables appear in the Inspector wherever a color is applied — fills, borders, etc. They also show up in the [Colors section](/docs/symbols-and-styles/selection-colors/), so you can quickly spot them and change them across your whole selection at once.
Select a layer, then apply a Color Variable in one of these ways:
- Click any color well to [open the color picker](/docs/symbols-and-styles/styling/the-color-panel/), then switch to the **Variables** tab. To stop using a Color Variable, switch to **Custom** in the color picker — it picks up the variable’s current value, so you can modify it independently.
- Click a color in the [Colors section](/docs/symbols-and-styles/selection-colors/) to open the color picker, then switch to the **Variables** tab.
- Click a color override in a Symbol instance to open the color picker, then switch to the **Variables** tab.
You can switch between Color Variables from your document or any enabled Library.
**Note:** When you use a Color Variable for the color of a text layer and then create a new text layer in the same document, your new text layer will also use that Color Variable.
### Picking a Color Variable with the eyedropper
You can apply a Color Variable by picking it [directly from the Canvas with the eyedropper](/docs/symbols-and-styles/styling/the-color-panel/#the-eyedropper):
1. Press ⌃C or click the eyedropper in the color panel.
1. Hover over a layer that uses a Color Variable — the loupe labels show the variable name alongside the color value.
1. Hold ⇧ and click to apply the Color Variable. Without ⇧, you’ll pick the raw color value instead.
### Applying a Color Variable from the Find and Replace menu
In the **Find and Replace** menu, click on the color well next to "Replace with", and select the Color Variable you want to apply. Click anywhere to close the color picker, and hit **Replace** to update the colors.
## Editing Color Variables
You can edit Color Variables from the Inspector, the Components View or Find and Replace menu.
You can Control-click on any Color Variable and choose **Copy Value** to copy its value as HEX, RGB, HSL, Objective-C, Swift or SwiftUI.
### Editing Color Variables from the Inspector
Select any layer, and click on a color well in the Inspector. In the color picker, click **Edit** and pick a new color. Choose **Update** to save. Keep in mind you can only edit Color Variables that are local to your document. If you want to edit Color Variables from a Library, you will have to edit them in their Library document.
### Editing Color Variables from the Components View
Switch to the [Components View](/docs/interface-and-settings/the-mac-app-interface/the-components-view/) and click on the **Color Variables ** tab. Click on the color swatch you want to edit and choose the new color using the Inspector. Changes will preview and save automatically.
## Renaming a Color Variable
To rename a Color Variable, switch to the Components View and click on the **Color Variables** tab. Select the color swatch you want to rename, then type the new name in the **Name** field at the top of the Inspector. Your changes save automatically. You can also Control-click the color swatch and choose **Rename**.
## Deleting a Color Variable
To delete a Color Variable, switch to the Components View, and click on the **Color Variables ** tab. Select the swatch of the Color Variable you want to delete and hit backspace. You can also Control-click on the color swatch and select **Delete**.
## Find and replace a specific color or Color Variable
Choose **Edit > Find and Replace Color** to bring up the Find and Replace Color menu, or open the [Command Bar](/docs/interface-and-settings/the-mac-app-interface/the-command-bar/) and type "replace" to find it quickly. From there, select the color or Color Variable you want to find within your design and the color or Color Variable you want to replace it with.
Enable “Include all opacities of this color” to find all colors with different alphas, but the same RGB or HEX values.
Enable “Preserve original opacity” to keep those different alphas intact when you replace the color.
**Note:** We built [a plugin to help you migrate to Color Variables](https://github.com/sketch-hq/color-variables-migrator). They’ve been around for a while, but this plugin makes it easier to apply them consistently across your documents. It automatically assigns Color Variables to any layers, Text Styles, or Layer Styles using the same color — even if they weren’t using a Color Variable before.
## Using Color Variables in developer handoff
Color Variables keep colors consistent between design and code projects. You can download Color Variables as [Color Tokens](/docs/developer-handoff/#exporting-color-variables-as-color-tokens), as CSS variables or in JSON format, or even generate a URL that dynamically updates with the latest values. You can also copy values for individual Color Variables from the [web app Inspector](/docs/developer-handoff/#copying-colors-and-color-variables).