Radix Gray

Radix UI's gray scale — 12 semantically labeled steps published in both light and dark variants. A pure neutral gray with no chroma. The most chromatically restrained Radix neutral. 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

gray-1-light
#FCFCFC
App background.
gray-2-light
#F9F9F9
Subtle background.
gray-3-light
#F0F0F0
UI element background.
gray-4-light
#E8E8E8
Hovered UI element background.
gray-5-light
#E0E0E0
Active / selected UI element background.
gray-6-light
#D9D9D9
Subtle borders and separators.
gray-7-light
#CECECE
UI element border and focus rings.
gray-8-light
#BBBBBB
Hovered UI element border.
gray-9-light
#8D8D8D
Solid background — the brand color step.
gray-10-light
#838383
Hovered solid background.
gray-11-light
#646464
Low-contrast text.
gray-12-light
#202020
High-contrast text.
gray-1-dark
#111111
App background.
gray-2-dark
#191919
Subtle background.
gray-3-dark
#222222
UI element background.
gray-4-dark
#2A2A2A
Hovered UI element background.
gray-5-dark
#313131
Active / selected UI element background.
gray-6-dark
#3A3A3A
Subtle borders and separators.
gray-7-dark
#484848
UI element border and focus rings.
gray-8-dark
#606060
Hovered UI element border.
gray-9-dark
#6E6E6E
Solid background — the brand color step.
gray-10-dark
#7B7B7B
Hovered solid background.
gray-11-dark
#B4B4B4
Low-contrast text.
gray-12-dark
#EEEEEE
High-contrast text.

Mode role mappings

Light mode (14 roles)

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

Dark mode (14 roles)

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