Colors

Accessible Neon color system for user interfaces

Our colors are based entirely on Radix Colors (opens in a new tab) in order to offer a complete color system for designing attractive and accessible applications and websites.

Scales

Gray

Gray Alpha

Gray Dark

Gray Dark Alpha

Warning

Warning Alpha

Warning Dark

Warning Dark Alpha

Danger

Danger Alpha

Danger Dark

Danger Dark Alpha

Info

Info Alpha

Info Dark

Info Dark Alpha

Success

Success Alpha

Success Dark

Success Dark Alpha

Purple

Purple Alpha

Purple Dark

Purple Dark Alpha

Orange

Orange Alpha

Orange Dark

Orange Dark Alpha

Brown

Brown Alpha

Brown Dark

Brown Dark Alpha

Pink

Pink Alpha

Pink Dark

Pink Dark Alpha

Overlays

These scales are designed for overlays and don’t change across light and dark theme.

Black Alpha

White Alpha

Understanding the scale

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

💡

You may want to use white for your app background in light mode, and Step 1 or 2 from a grey or coloured scale in dark mode

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.

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

💡

Steps 11 and 12—which are designed for text—are guaranteed to pass 4.5:1 contrast ratio on top of a step 3 background from the same scale.

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.

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.

💡

Most step 9 colors are designed for white foreground text. Yellow is designed for dark foreground text and steps 9 and 10.

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.

Introduction Theming