Color

Understanding the color system and its application in your theme.

Color scales

There is a number of 12 step color scales available, each with their own light, dark and alpha variants.

Colors are grouped into 2 categories: accents and grays, and can be specified on your Theme, or per component where appropriate.

Accents

The accent is the most dominant color in your theme, it is used for primary buttons, links and other interactive elements. There is a number of accent colors to choose from.

Grays

Grays are used for backgrounds, borders, text and other non-interactive elements. You can choose a pure gray or one of the tinted grays.

Alpha variants

Every color has an alpha variant which is designed to appear visually the same when placed over the page background. This is very powerful and allows colors to be overlayed almost without any loss of saturation or hue.

Alpha variants are used automatically within components so no configuration is required. However, if you’d like to use them manually in your own styles you can do so by using Tokens.

Choosing an accent color

There is a number of accents to choose from. Visit the component playground page to explore how each accent color feels.

Choosing a gray color

The theme will automatically pair your accent color with a gray shade that compliments it.

You can specify an alternative if you’d prefer a different look. The difference may seem subtle, but it is impactful on pages with a lot of text or in dense UIs. You can choose between a pure gray or a number of tinted grays.

Using color tokens

All colors are available as CSS variables in case you need to build custom components. See the token reference page for a complete list.

Aliasing colors

You may prefer to use generic color names to refer to the color shades that you want to use. For example, it is common to refer to crimson, jade, and indigo as red, green, and blue respectively.

In this case, you can remap Radix Themes tokens in place of one another and reclaim the color names you want to use:

/* Your styles.css */
.radix-themes {
  --red-1: var(--ruby-1);
  --red-2: var(--ruby-2);
  --red-3: var(--ruby-3);
  --red-4: var(--ruby-4);
  --red-5: var(--ruby-5);
  --red-6: var(--ruby-6);
  --red-7: var(--ruby-7);
  --red-8: var(--ruby-8);
  --red-9: var(--ruby-9);
  --red-10: var(--ruby-10);
  --red-11: var(--ruby-11);
  --red-12: var(--ruby-12);
  --red-a1: var(--ruby-a1);
  --red-a2: var(--ruby-a2);
  --red-a3: var(--ruby-a3);
  --red-a4: var(--ruby-a4);
  --red-a5: var(--ruby-a5);
  --red-a6: var(--ruby-a6);
  --red-a7: var(--ruby-a7);
  --red-a8: var(--ruby-a8);
  --red-a9: var(--ruby-a9);
  --red-a10: var(--ruby-a10);
  --red-a11: var(--ruby-a11);
  --red-a12: var(--ruby-a12);
}

In this example, using the red color in Radix Themes components and tokens would now reference the original ruby scale.