Radix Slate

Radix UI's slate scale — 12 semantically labeled steps published in both light and dark variants. A cool, near-blue gray. Radix's default neutral for blue-adjacent UIs. 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

slate-1-light
#FCFCFD
App background.
slate-2-light
#F9F9FB
Subtle background.
slate-3-light
#F0F0F3
UI element background.
slate-4-light
#E8E8EC
Hovered UI element background.
slate-5-light
#E0E1E6
Active / selected UI element background.
slate-6-light
#D9D9E0
Subtle borders and separators.
slate-7-light
#CDCED6
UI element border and focus rings.
slate-8-light
#B9BBC6
Hovered UI element border.
slate-9-light
#8B8D98
Solid background — the brand color step.
slate-10-light
#80838D
Hovered solid background.
slate-11-light
#60646C
Low-contrast text.
slate-12-light
#1C2024
High-contrast text.
slate-1-dark
#111113
App background.
slate-2-dark
#18191B
Subtle background.
slate-3-dark
#212225
UI element background.
slate-4-dark
#272A2D
Hovered UI element background.
slate-5-dark
#2E3135
Active / selected UI element background.
slate-6-dark
#363A3F
Subtle borders and separators.
slate-7-dark
#43484E
UI element border and focus rings.
slate-8-dark
#5A6169
Hovered UI element border.
slate-9-dark
#696E77
Solid background — the brand color step.
slate-10-dark
#777B84
Hovered solid background.
slate-11-dark
#B0B4BA
Low-contrast text.
slate-12-dark
#EDEEF0
High-contrast text.

Mode role mappings

Light mode (14 roles)

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

Dark mode (14 roles)

accent → slate-8-dark
accent-hover → slate-7-dark
background → slate-1-dark
error → slate-12-dark
primary → slate-9-dark
primary-hover → slate-10-dark
success → slate-9-dark
surface → slate-2-dark
surface-elevated → slate-3-dark
text-primary → slate-12-dark
text-secondary → slate-11-dark
text-tertiary → slate-9-dark
warning → slate-9-dark
warning-hover → slate-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. Slate is a neutral, so every semantic role — including text — is drawn from the slate scale itself.