Radix Color Palette Test

Test your custom Radix color palettes with different card variants. Switch between palettes to see the semantic color system in action.

Color Palette

Radix Color Scale (1-12)

Step 1

App BG

Step 2

Subtle BG

Step 3

UI BG

Step 4

Hover BG

Step 5

Active BG

Step 6

Borders

Step 7

UI Border

Step 8

Hover Border

Step 9

Accent

Step 10

Hover Accent

Step 11

Low Text

Step 12

High Text

Card Variants

Default Card

This is a default card variant using semantic colors. The colors automatically adapt to the selected palette.

Accent Color

Bordered Card

This is a bordered card variant using semantic colors. The colors automatically adapt to the selected palette.

Accent Color

Gradient Card

This is a gradient card variant using semantic colors. The colors automatically adapt to the selected palette.

Accent Color

Interactive Card

This is a interactive card variant using semantic colors. The colors automatically adapt to the selected palette.

Accent Color

Elevated Card

This is a elevated card variant using semantic colors. The colors automatically adapt to the selected palette.

Accent Color

Accent Card

This is a accent card variant using semantic colors. The colors automatically adapt to the selected palette.

Accent Color

Surface Card

This is a surface card variant using semantic colors. The colors automatically adapt to the selected palette.

Accent Color

Semantic Colors

Subtle Background

--color-card-accent-subtle

Accent Background

--color-card-accent

Emphasis Background

--color-card-accent-emphasis

Surface Background

--card-surface

Current Palette: Custom Teal

Your custom Radix teal palette

data-palette="default"