# Radix Colors

> Twelve step palettes where every step has a defined job

Category: Design systems and tokens (https://aiarabicdev.com/design-systems)
Canonical page: https://aiarabicdev.com/design-systems/radix-colors
Tags: design-systems, color, accessibility, tokens, dark-mode

Radix Colors is a palette system of twelve step scales, designed so each step has a specific purpose: this step is a subtle background, this one is a border, this one is accessible text. Light and dark scales are matched, and it is only colour.

## Facts

- Licence: MIT
- Language: CSS
- Cost: Free and open source
- Self hostable: yes
- Added: 2026-08-23
- Last checked: 2026-08-23

## Links

- Website: https://www.radix-ui.com/colors
- Source: https://github.com/radix-ui/colors

## Why numbered steps with jobs work

Most palettes give you nine shades and no guidance, so choosing between 600 and 700 becomes a taste decision repeated hundreds of times inconsistently. Radix assigns a role to each step, which turns those decisions into lookups.

The result is that a component built on step three for its background and step eleven for its text is accessible by construction, in both light and dark mode, without checking.

## The limits

It is colour only. No spacing, no type, no components. That focus is why it composes with anything, including Tailwind, whose theme can be pointed at these scales directly.

The scales are also carefully balanced against each other, so dropping one arbitrary brand colour into the middle of a Radix palette breaks the guarantees. Generate a custom scale properly instead.

## Reach for it when

- you want colour decisions to be lookups rather than judgements
- light and dark mode must both be accessible without manual checking
- you need a palette that composes with any component library

## Watch out for

- colour only, so the rest of the system is still yours
- dropping an unscaled brand colour into it breaks the contrast guarantees
- twelve steps per scale is a lot of tokens to name and maintain

## Get started

Install:

```sh
pnpm add @radix-ui/colors
```

---

aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements.
New entries are announced at https://t.me/arabic_Intelligence