Composing a color palette

<Description> A guide to composing a color palette with Radix Colors. </Description>

Choosing a brand scale

Radix provides a number of scales you could use for your brand or accent color.

Scales designed for white foreground text:

<ColorGrayPairsComplementary />

Custom brand colors

Radix Colors are not intended to be customised. They’re designed to be accessible, well-balanced, and harmonious. Any customisation would likely break these features.

If you need custom brand colors, we recommend adding custom scales alongside Radix scales.

For example, you could use Radix Colors for your gray scale and your semantic scales, then add custom brand/accent colors.

Choosing a gray scale

Radix Colors provides a pure gray and a few tinted gray scales.

<ColorGrays />

• gray is pure gray
• mauve is based on a purple hue
• slate is based on a blue hue
• sage is based on a green hue
• olive is based on a lime hue
• sand is based on a yellow hue

Neutral pairing

If you want a neutral vibe, or you want to keep things simple, gray will work well with any hue or palette.

Natural pairing

Alternatively, choose the gray scale which is saturated with the hue closest to your accent hue. The difference is subtle, but this will create a more colorful and harmonius vibe.

<ColorGrayPairs /> <Note> Note: If your project uses a lot of colorful UI components like Badge, be careful when using saturated grays for your app background, especially in dark mode. Colorful UI components may clash with your saturated gray background color. </Note>

Choosing semantic scales

For most projects, you will need colors to communicate semantic meaning. Here are some common pairings that work well in Western culture.

• Error: red, ruby, tomato, crimson
• Success: green, teal, jade, grass, mint
• Warning: yellow, amber, orange
• Info: blue, indigo, sky, cyan

In many cases, you might eventually need most of the scales, for one reason or another. Your app may support multiplayer mode, where you assign a color to each user. Your app may have a labelling feature, where your users assign a color to a task. Your app may use badges to communicate “pending” or “rejected” states.

Radix Colors are well-balanced, and designed to work in harmony. So for product communication, most color pairings will work.

Choosing text scales

Steps 11 and 12 are designed for low-contrast text and high-contrast text respectively. Depending on the vibe you want, you can use your accent scale or your gray scale.

Using your accent scale will result in a more colorful vibe.

{

<Box my="5"> <Text as="p" size="7" align="center" weight="bold" style={{ color: "var(--blue-12)" }} > This text is Blue 12 </Text> </Box>

}

Using your gray scale will result in a more functional vibe.

{

<Box my="5"> <Text as="p" size="7" align="center" weight="bold" style={{ color: "var(--slate-12)" }} > This text is Slate 12 </Text> </Box>

}

The difference may seem subtle, but it can make a huge difference with a whole page of text.

You may want to experiment with using your accent scale for text in your marketing sites, and your gray scale for text in your apps.