Made by ScaleRadix Homepage
Scale UI Radix
DocumentationDocumentationComponents CatalogComponents CatalogPlayroomPlayroom
Radix PrimitivesFont Awesome Icons
Guides

Color

Understanding the color system and its application in your theme.

Radix Themes comes with a number of color scales, each with their own light, dark and alpha variants. Under the hood, the color system is powered by Radix Colors, we override the default colors indigo and gray to match our Scale brand but all Radix Themes colors are also available for you to use if needed.

Accents

Accent color is the most dominant color in your theme. It is used for accent buttons, links and other interactive elements. accentColor is specified directly on the Theme component and by default it's set to indigo (accent):

<Theme>

  <MyApp />

</Theme>

Available accent colors

There is a range of accent colors to choose from:

Gray
Gold
Bronze
Brown
Yellow
Amber
Orange
Tomato
Red
Ruby
Crimson
Pink
Plum
Purple
Violet
Iris
Indigo (accent)
Blue
Cyan
Teal
Jade
Green
Grass
Lime
Mint
Sky

Accent scale anatomy

Each accent is a 12-step scale that includes a solid and a transparent variant of each color. For example, here’s the indigo color scale (accent):

1
2
3
4
5
6
7
8
9
10
11
12

Accent scale tokens

Accent color tokens can be accessed using CSS variables. You can use these tokens to style your custom components, ensuring they are accessible and consistent with the rest of your theme.

/* Backgrounds */

var(--accent-1);

var(--accent-2);



/* Interactive components */

var(--accent-3);

var(--accent-4);

var(--accent-5);



/* Borders and separators */

var(--accent-6);

var(--accent-7);

var(--accent-8);



/* Solid colors */

var(--accent-9);

var(--accent-10);



/* Accessible text */

var(--accent-11);

var(--accent-12);



/* Functional colors */

var(--accent-surface);

var(--accent-indicator);

var(--accent-track);

var(--accent-contrast);

Grays

You can also choose between a pure gray or a number of tinted grays. Your accent color will be automatically paired with a gray shade that compliments it. However, you can also specify a custom grayColor directly on the Theme component:

<Theme graycolor="neutral">

  <MyApp />

</Theme>

Available gray colors

There is 6 grays to choose from. The difference may seem subtle, but it is impactful especially on pages with a lot of text or in dense UIs.

Gray
Mauve
Slate
Sage
Olive
Sand

Gray scale anatomy

Grays are based on the same 12-step color scale that includes a solid and a transparent variant of each color. For example, here’s the slate color scale:

1
2
3
4
5
6
7
8
9
10
11
12

Gray scale tokens

Gray color tokens can be accessed using CSS variables. You can use these tokens to style your custom components, ensuring they are accessible and consistent with the rest of your theme.

/* Backgrounds */

var(--gray-1);

var(--gray-2);



/* Interactive components */

var(--gray-3);

var(--gray-4);

var(--gray-5);



/* Borders and separators */

var(--gray-6);

var(--gray-7);

var(--gray-8);



/* Solid colors */

var(--gray-9);

var(--gray-10);



/* Accessible text */

var(--gray-11);

var(--gray-12);



/* Functional colors */

var(--gray-surface);

var(--gray-indicator);

var(--gray-track);

var(--gray-contrast);

Color overrides

When available, the color prop on the components can be used to override the theme accent. Nested components will automatically inherit the new accent color.

There are new commits.

There are new commits.

{

  /** By default indigo (accent) is the accentColor **/

}

<Theme>

  <Flex align="start" direction={{ initial: 'column', sm: 'row' }} gap="4">

    <Callout.Root>

      <Callout.Icon>

        <InfoCircledIcon />

      </Callout.Icon>

      <Callout.Text>

        <Flex as="span" align="center" gap="4">

          <Text>There are new commits.</Text>

          <Button variant="surface" size="1" my="-2">

            Refresh

          </Button>

        </Flex>

      </Callout.Text>

    </Callout.Root>



    {/** We use the gray (neutral) as the accentColor for this component only **/}

    <Callout.Root color="neutral">

      <Callout.Icon>

        <InfoCircledIcon />

      </Callout.Icon>

      <Callout.Text>

        <Flex as="span" align="center" gap="4">

          <Text>There are new commits.</Text>

          <Button variant="surface" size="1" my="-2">

            Refresh

          </Button>

        </Flex>

      </Callout.Text>

    </Callout.Root>

  </Flex>

</Theme>;

Individual color tokens

Individual colors can be accessed directly using similar CSS variables by their corresponding names. For example, the reds are accessed via --red-1, --red-2, and so on up to --red-12.

Focus and selection

Radix Themes automatically adjusts the focus and selection colors depending on the accent color of the current component. Most of the time, setting the color prop will intelligently change the focus and selection colors to avoid a mismatch of conflicting hues:

Complete your account setup in settingsComplete your account setup in settingsComplete your account setup in settings
<Theme>

  <Flex direction="column" gap="4">

    <Text>

      Complete your account setup in <Link href="#">settings</Link>

    </Text>

    <Text color="neutral">

      Complete your account setup in <Link href="#">settings</Link>

    </Text>

    <Text color="error">

      Complete your account setup in <Link href="#">settings</Link>

    </Text>

  </Flex>

</Theme>

Focus scale tokens

Focus color tokens can be accessed using CSS variables that follow a similar naming structure like the other scales, e.g. --focus-1, --focus-2, and so on up to --focus-12.

Most of the components use --focus-8 for the focus outline color.

Alpha colors

Every color has an alpha variant which is designed to appear visually the same when placed over the page background. This is a powerful tool that allows colors to look naturally when overlay over another background. All numerical color steps have a corresponding alpha variant.

/* Solid colors */

var(--red-1);

var(--red-2);

...

var(--red-12);



/* Alpha colors */

var(--red-a1);

var(--red-a2);

...

var(--red-a12);

Alpha colors are used automatically within Radix Themes components no additional configuration is required.

Backgrounds

A number of background colors are used to create a sense of visual hierarchy in Radix Themes UIs. These colors are used for backgrounds, cards, and other surfaces.

/* Page background */

var(--color-background);



/* Panel backgrounds, such as cards, tables, popovers, dropdown menus, etc. */

var(--color-panel-solid);

var(--color-panel-translucent);



/* Form component backgrounds, such as text fields, checkboxes, select, etc. */

var(--color-surface);



/* Dialog overlays */

var(--color-overlay);

Panel background

The panelBackground prop controls whether panelled elements use a solid or a translucent background color. The default translucent value creates a subtle overlay effect:

<Theme panelBackground="translucent">

  <MyApp />

</Theme>

Sign up

Forgot password?

While solid is useful when you'd prefer to present information unobstructed.

<Theme panelBackground="solid">

  <MyApp />

</Theme>

Sign up

Forgot password?

Customization

Scale UI Radix colors can be customized by overriding the corresponding CSS variables of the token system, to achieve this you need to delete this line import '@scale/scaleui-radix/dist/styles.css' from your code and crate new CSS files similar to the ones in this folder to override the default colors.

If you need any extra guidance to create the theme for your project please ask in the #scaleui-radix-design channel in Slack for help.

NextGetting started
Edit this page on GitHub.