---
title: "Color palette"
canonical: "https://help.refined.com/space/CLOUDDOCS/6931021857/Color%20palette"
format: markdown
---
Global color variables is a site-level set of colors you can define once in your Theme and then reuse across your Refined site. It is designed to make branding easier, reduce manual color work, and help keep pages and modules visually consistent.

Global color variables can be bound to individual color settings, in the Theme Editor as well as the landing pages. When the global color variable is changed, so are the color settings it is bound to. This makes it easy to update colors across your pages.

## Add a Color palette

In the theme editor, you define the colors you want available for your site. These become your reusable palette options.

If your current Theme has no Color palette set, add one by clicking “Create a palette”, to start from a neutral palette, or “Pick a preset”,or from other available presets to get started.

## Using the Color palette

When styling your Theme, or layout elements, you can select colors from the site palette instead of manually entering separate custom colors.

Additionally, when new modules are added, these are automatically styled with your global color variables. Depending on the settings as presented, they are applied in the following way:

| **Color variable** | **Where it applies** | **How to use it** |
| --- | --- | --- |
| Background | Used for Section backgrounds. | For accessible text, ensure sufficient contrast with Primary Text and Accent. |
| Surface | Used for card backgrounds. | For accessible text, ensure sufficient contrast with Primary Text and Accent. |
| Primary text | Used for headings, body text, dividers, and icons. | Should contrast with Background and Surface for readability. |
| Accent | Used for buttons and icon backgrounds. | Should contrast with Background, Surface, and Accent text. |
| Accent text | Used for button labels and icons with a background. | Must be clearly readable against Accent. |