Radix Mauve

Radix UI's mauve scale — 12 semantically labeled steps published in both light and dark variants. A warm, near-purple gray. Pairs well with purple, pink, and red-leaning hues. Step 1 is app background, step 9 is the solid brand color, step 12 is high-contrast text. The same step number means the same semantic role across light and dark, with different hex values per mode.

24 swatches 14 light roles 14 dark roles radixneutraldesign-systemscaledual-mode

Swatches

mauve-1-light
#FDFCFD
App background.
mauve-2-light
#FAF9FB
Subtle background.
mauve-3-light
#F2EFF3
UI element background.
mauve-4-light
#EAE7EC
Hovered UI element background.
mauve-5-light
#E3DFE6
Active / selected UI element background.
mauve-6-light
#DBD8E0
Subtle borders and separators.
mauve-7-light
#D0CDD7
UI element border and focus rings.
mauve-8-light
#BCBAC7
Hovered UI element border.
mauve-9-light
#8E8C99
Solid background — the brand color step.
mauve-10-light
#84828E
Hovered solid background.
mauve-11-light
#65636D
Low-contrast text.
mauve-12-light
#211F26
High-contrast text.
mauve-1-dark
#121113
App background.
mauve-2-dark
#1A191B
Subtle background.
mauve-3-dark
#232225
UI element background.
mauve-4-dark
#2B292D
Hovered UI element background.
mauve-5-dark
#323035
Active / selected UI element background.
mauve-6-dark
#3C393F
Subtle borders and separators.
mauve-7-dark
#49474E
UI element border and focus rings.
mauve-8-dark
#625F69
Hovered UI element border.
mauve-9-dark
#6F6D78
Solid background — the brand color step.
mauve-10-dark
#7C7A85
Hovered solid background.
mauve-11-dark
#B5B2BC
Low-contrast text.
mauve-12-dark
#EEEEF0
High-contrast text.

Mode role mappings

Light mode (14 roles)

accent → mauve-8-light
accent-hover → mauve-7-light
background → mauve-1-light
error → mauve-12-light
primary → mauve-9-light
primary-hover → mauve-10-light
success → mauve-9-light
surface → mauve-2-light
surface-elevated → mauve-3-light
text-primary → mauve-12-light
text-secondary → mauve-11-light
text-tertiary → mauve-9-light
warning → mauve-9-light
warning-hover → mauve-10-light

Dark mode (14 roles)

accent → mauve-8-dark
accent-hover → mauve-7-dark
background → mauve-1-dark
error → mauve-12-dark
primary → mauve-9-dark
primary-hover → mauve-10-dark
success → mauve-9-dark
surface → mauve-2-dark
surface-elevated → mauve-3-dark
text-primary → mauve-12-dark
text-secondary → mauve-11-dark
text-tertiary → mauve-9-dark
warning → mauve-9-dark
warning-hover → mauve-10-dark

Provenance

Source
https://www.radix-ui.com/colors/docs/palette-composition/scales
License
MIT
Attribution
Radix Colors, Copyright WorkOS, Inc., MIT licensed. Imported from the radix-ui/colors repository on GitHub.
Imported
2026-05-17 (upstream version 3.0.0)
Notes
Radix publishes distinct hex values for each scale in light and dark mode. This atom carries both as -light and -dark suffixed swatches; modes.light.roles points at -light swatches and modes.dark.roles at -dark swatches. Mauve is a neutral, so every semantic role — including text — is drawn from the mauve scale itself.