---
name: Radix Colors
slug: radix-colors
url: "https://dontmakeitugly.com/resources/radix-colors"
website: "https://www.radix-ui.com/colors"
github: "https://github.com/radix-ui/colors"
docs: "https://www.radix-ui.com/colors/docs/overview/installation"
npm: "https://www.npmjs.com/package/@radix-ui/colors"
type: asset-library
categories:
  - assets
  - tools
tags:
  - colours
  - palettes
  - dark-mode
  - css-variables
  - accessibility
  - tokens
frameworks:
  - agnostic
  - tailwind
pricing: free
license: MIT
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - documentation
  - github
  - npm
installCommand: "npm install @radix-ui/colors"
difficulty: intermediate
staffPick: true
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# Radix Colors

Colour scales designed for real UI, with light and dark modes that actually match.

- Type: Asset library
- Categories: Assets, Tools
- Pricing: Free · License: MIT
- Open source: yes
- Works with: Framework agnostic, Tailwind CSS, CSS variables

## What it is

Radix Colors is a system of 12-step colour scales (30 colours, each with light, dark, alpha and P3 variants) where each step has a defined purpose: backgrounds, borders, solid fills, text. Because every scale follows the same structure, swapping accent colours or themes just works.

## Why it's here

The most useful thing about it is the documentation of what each step is for. Once you know step 9 is the solid colour and step 11 is text, dark mode stops being guesswork. Works with any framework; it's just CSS variables.

## Best for

- colour systems
- dark mode
- accessible palettes
- design tokens

## Links

- Website: https://www.radix-ui.com/colors
- Docs: https://www.radix-ui.com/colors/docs/overview/installation
- GitHub: https://github.com/radix-ui/colors
- npm: https://www.npmjs.com/package/@radix-ui/colors

## Can my agent use this?

Yes. Docs explain the meaning of each step; ask your agent to use Radix Colors scales and to follow the documented step usage for backgrounds, borders and text.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: Docs, GitHub, npm.
Install: `npm install @radix-ui/colors`

## Prompt to hand your agent

```text
Use Radix Colors as a design and implementation reference for this project.

What it is: Colour scales designed for real UI, with light and dark modes that actually match.

Website: https://www.radix-ui.com/colors
Documentation: https://www.radix-ui.com/colors/docs/overview/installation
GitHub: https://github.com/radix-ui/colors
npm: https://www.npmjs.com/package/@radix-ui/colors
Install: npm install @radix-ui/colors

Use it specifically for:
- colour systems
- dark mode
- accessible palettes
- design tokens

How you can access it: Docs, GitHub, npm.
Works with: Framework agnostic, Tailwind CSS.
License: MIT. Respect it.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [UI Colors](https://dontmakeitugly.com/resources/uicolors.md): Turn one brand colour into a full Tailwind-style shade scale.
- [tweakcn](https://dontmakeitugly.com/resources/tweakcn.md): A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app.
- [Dark Mode Design](https://dontmakeitugly.com/resources/dark-mode-design.md): A gallery of websites that get dark interfaces right.
- [Iconify](https://dontmakeitugly.com/resources/iconify.md): One API and one component for two hundred thousand icons from every major set.

## In collections

- [Make your shadcn app look less generic](https://dontmakeitugly.com/collections/less-generic-shadcn.md)

Radix Colors is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.