Radix Purple
Radix UI's purple scale — 12 semantically labeled steps published in both light and dark variants. A balanced red-violet, the canonical purple. 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.
28 swatches 14 light roles 14 dark roles
Swatches
purple-1-light
#FEFCFE
App background.
purple-2-light
#FBF7FE
Subtle background.
purple-3-light
#F7EDFE
UI element background.
purple-4-light
#F2E2FC
Hovered UI element background.
purple-5-light
#EAD5F9
Active / selected UI element background.
purple-6-light
#E0C4F4
Subtle borders and separators.
purple-7-light
#D1AFEC
UI element border and focus rings.
purple-8-light
#BE93E4
Hovered UI element border.
purple-9-light
#8E4EC6
Solid background — the brand color step.
purple-10-light
#8347B9
Hovered solid background.
purple-11-light
#8145B5
Low-contrast text.
purple-12-light
#402060
High-contrast text.
purple-1-dark
#18111B
App background.
purple-2-dark
#1E1523
Subtle background.
purple-3-dark
#301C3B
UI element background.
purple-4-dark
#3D224E
Hovered UI element background.
purple-5-dark
#48295C
Active / selected UI element background.
purple-6-dark
#54346B
Subtle borders and separators.
purple-7-dark
#664282
UI element border and focus rings.
purple-8-dark
#8457AA
Hovered UI element border.
purple-9-dark
#8E4EC6
Solid background — the brand color step.
purple-10-dark
#9A5CD0
Hovered solid background.
purple-11-dark
#D19DFF
Low-contrast text.
purple-12-dark
#ECD9FA
High-contrast text.
slate-11-light
#60646C
Neutral text imported from Radix Slate for legibility on the chromatic scale's mid-tone backgrounds. Step 11 is low-contrast text.
slate-12-light
#1C2024
Neutral text imported from Radix Slate for legibility on the chromatic scale's mid-tone backgrounds. Step 12 is high-contrast text.
slate-11-dark
#B0B4BA
Neutral text imported from Radix Slate for legibility on the chromatic scale's mid-tone backgrounds. Step 11 is low-contrast text.
slate-12-dark
#EDEEF0
Neutral text imported from Radix Slate for legibility on the chromatic scale's mid-tone backgrounds. Step 12 is high-contrast text.
Mode role mappings
Light mode (14 roles)
accent
→ purple-8-light accent-hover
→ purple-7-light background
→ purple-1-light error
→ purple-12-light primary
→ purple-9-light primary-hover
→ purple-10-light success
→ purple-9-light surface
→ purple-2-light surface-elevated
→ purple-3-light text-primary
→ slate-12-light text-secondary
→ slate-11-light text-tertiary
→ purple-9-light warning
→ purple-9-light warning-hover
→ purple-10-light Dark mode (14 roles)
accent
→ purple-8-dark accent-hover
→ purple-7-dark background
→ purple-1-dark error
→ purple-12-dark primary
→ purple-9-dark primary-hover
→ purple-10-dark success
→ purple-9-dark surface
→ purple-2-dark surface-elevated
→ purple-3-dark text-primary
→ slate-12-dark text-secondary
→ slate-11-dark text-tertiary
→ purple-9-dark warning
→ purple-9-dark warning-hover
→ purple-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-18(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. Purple is a chromatic hue and makes a poor neutral for body text, so steps 11 and 12 of Radix Slate are imported as supplementary swatches and used for text-primary and text-secondary in both modes.