Composing a color palette

A guide to composing a color palette with Radix Colors.

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:

bronze

gold

brown

orange

tomato

red

ruby

crimson

pink

plum

purple

violet

iris

indigo

blue

cyan

teal

jade

green

grass

Scales designed for dark foreground text:

sky

mint

lime

yellow

amber

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.

gray

mauve

slate

sage

olive

sand

  • 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.

mauve

tomato

red

ruby

crimson

pink

plum

purple

violet

slate

iris

indigo

blue

sky

cyan

sage

mint

teal

jade

green

olive

grass

lime

sand

yellow

amber

orange

brown

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.

This text is Blue 12

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

This text is Slate 12

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.