Color Palettes

Beautiful color palettes that work seamlessly with the shadcn design system, based on the Radix UI color scales. Each palette provides a complete set of semantic color tokens that automatically adapt to light and dark modes.

Choose a color palette to apply to your project

Or enter a hex color to generate a custom palette

Copy the color palette as CSS

shadcn color system

The shadcn design system uses semantic color tokens that provide consistent theming across components. Each color token serves a specific purpose in your interface, with most colors having a paired foreground token for optimal text contrast.

A
background/ background-foreground
Main app background
A
card/ card-foreground
Card components
A
popover/ popover-foreground
Popover & dropdown
A
primary/ primary-foreground
Primary actions
A
secondary/ secondary-foreground
Secondary actions
A
muted/ muted-foreground
Subtle backgrounds
A
accent/ accent-foreground
Hover states
A
destructive/ destructive-foreground
Errors & warnings
border
All borders
input
Input borders
ring
Focus rings

Radix UI color system

Radix UI provides a set of 31 color scales. Each scale is designed to work in both light and dark themes, and has 12 steps. This includes six neutral families — slate, gray, mauve, sage, olive, sand — each with a subtle temperature bias so neutrals harmonize with cool or warm primaries. See palette composition for recommended pairings between primary colors and neutrals.

Backgrounds
Interactive components
Borders
Solid colors
Accessible text
1
2
3
4
5
6
7
8
9
10
11
12

Each step in Radix UI's color scales is defined for a specific use case. As an overview, step 1 - 3 were designed for backgrounds, 4 - 5 were designed for interactive components, 6 - 8 were designed for borders, 9 - 10 were designed for solid colors, and 11 - 12 were designed for text.