# Radix Colors

> Ready-made color scales for interfaces, with light and dark versions

- Category: UI components (`components`)
- Official: https://radix-ui.com/colors/docs/overview/usage
- Wunderlust: https://wunderlust.xyz/r/radix-colors
- Image: https://wunderlust.xyz/media/radix-colors-og.jpg
- Video preview: https://wunderlust.xyz/media/radix-colors.webm
- Added: 2026-11-05

## What it is

Radix Colors is a set of color scales available as JavaScript objects and CSS files, named by scale and step (blue4, --blue-3).

## What it’s for

To build an interface palette and get dark mode with scales designed in pairs.

## Benefits

- Separate light and dark scales for dark themes
- Works with plain CSS, styled-components, emotion and vanilla-extract
- Import only the scales you use

## Caveats

- The page that was checked has no license information

## Similar on Wunderlust

- [daisyUI](https://wunderlust.xyz/r/daisyui.md): Tailwind CSS plugin with ready-made components and themes, in pure CSS
- [Realtime Colors](https://wunderlust.xyz/r/realtime-colors.md): Tests a color palette and typography on a sample page in real time
- [React Bits](https://wunderlust.xyz/r/react-bits.md): A library of animated React components: text, backgrounds and microinteractions
- [Flowbite](https://wunderlust.xyz/r/flowbite.md): Library of interface components for assembling screens
- [HeroUI](https://wunderlust.xyz/r/heroui.md): React component library for assembling interfaces from ready-made parts
- [OriginKit](https://wunderlust.xyz/r/originkit.md): Free library of animated components for websites