Source: https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Custom palette Blog

Overview

Installation Usage Aliasing Custom palettes Releases

Palette composition

Scales Composing a palette Understanding the scale

Understanding the scale

Learn which scale step is the most appropriate for each use case.

Use cases

There are 12 steps in each scale. Each step was designed for at least one specific use case.

This table is a simple overview of the most common use case for each step. However, there are many exceptions and caveats to factor in, which are covered in further detail below.

| Step | Use Case | | --- | --- | | 1 | App background | | 2 | Subtle background | | 3 | UI element background | | 4 | Hovered UI element background | | 5 | Active / Selected UI element background | | 6 | Subtle borders and separators | | 7 | UI element border and focus rings | | 8 | Hovered UI element border | | 9 | Solid backgrounds | | 10 | Hovered solid backgrounds | | 11 | Low-contrast text | | 12 | High-contrast text |

Steps 1–2: Backgrounds

Steps 1 and 2 are designed for app backgrounds and subtle component backgrounds. You can use them interchangeably, depending on the vibe you're going for.

Appropriate applications include:

Main app background
Striped table background
Code block background
Card background
Sidebar background
Canvas area background

Steps 3–5: Component backgrounds

Steps 3, 4, and 5 are designed for UI component backgrounds.

Step 3 is for normal states.
Step 4 is for hover states.
Step 5 is for pressed or selected states.

Menu itemSecond menu itemThird menu item

If your component has a transparent background in its default state, you can use Step 3 for its hover state.

Steps 6–8: Borders

Steps 6, 7, and 8 are designed for borders.

Step 6 is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators.
Step 7 is designed for subtle borders on interactive components.
Step 8 is designed for stronger borders on interactive components and focus rings.

GoldBronzeBrownYellowAmberOrangeTomatoRedRubyCrimsonPinkPlumPurpleVioletIrisIndigoBlueCyanTealJadeGreenGrassLimeMintSky

Steps 9–10: Solid backgrounds

Steps 9 and 10 are designed for solid backgrounds.

Step 9 has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because 9 is the purest step, it has a wide range of applications:

Website/App backgrounds
Website section backgrounds
Header backgrounds
Component backgrounds
Graphics/Logos
Overlays
Coloured shadows
Accent borders

Step 10 is designed for component hover states, where step 9 is the component's normal state background.

GoldBronzeBrownYellowAmberOrangeTomatoRedRubyCrimsonPinkPlumPurpleVioletIrisIndigoBlueCyanTealJadeGreenGrassLimeMintSky

Steps 11–12: Text

Steps 11 and 12 are designed for text.

Step 11 is designed for low-contrast text.
Step 12 is designed for high-contrast text.

This text is Pink 11This text is Slate 11This text is Gray 11This text is Pink 12This text is Slate 12This text is Gray 12

PreviousComposing a palette

Edit this page on GitHub.