Radix Grass
Radix UI's grass scale — 12 semantically labeled steps published in both light and dark variants. A balanced natural green, between jade and lime. 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
grass-1-light
#FBFEFB
App background.
grass-2-light
#F5FBF5
Subtle background.
grass-3-light
#E9F6E9
UI element background.
grass-4-light
#DAF1DB
Hovered UI element background.
grass-5-light
#C9E8CA
Active / selected UI element background.
grass-6-light
#B2DDB5
Subtle borders and separators.
grass-7-light
#94CE9A
UI element border and focus rings.
grass-8-light
#65BA74
Hovered UI element border.
grass-9-light
#46A758
Solid background — the brand color step.
grass-10-light
#3E9B4F
Hovered solid background.
grass-11-light
#2A7E3B
Low-contrast text.
grass-12-light
#203C25
High-contrast text.
grass-1-dark
#0E1511
App background.
grass-2-dark
#141A15
Subtle background.
grass-3-dark
#1B2A1E
UI element background.
grass-4-dark
#1D3A24
Hovered UI element background.
grass-5-dark
#25482D
Active / selected UI element background.
grass-6-dark
#2D5736
Subtle borders and separators.
grass-7-dark
#366740
UI element border and focus rings.
grass-8-dark
#3E7949
Hovered UI element border.
grass-9-dark
#46A758
Solid background — the brand color step.
grass-10-dark
#53B365
Hovered solid background.
grass-11-dark
#71D083
Low-contrast text.
grass-12-dark
#C2F0C2
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
→ grass-8-light accent-hover
→ grass-7-light background
→ grass-1-light error
→ grass-12-light primary
→ grass-9-light primary-hover
→ grass-10-light success
→ grass-9-light surface
→ grass-2-light surface-elevated
→ grass-3-light text-primary
→ slate-12-light text-secondary
→ slate-11-light text-tertiary
→ grass-9-light warning
→ grass-9-light warning-hover
→ grass-10-light Dark mode (14 roles)
accent
→ grass-8-dark accent-hover
→ grass-7-dark background
→ grass-1-dark error
→ grass-12-dark primary
→ grass-9-dark primary-hover
→ grass-10-dark success
→ grass-9-dark surface
→ grass-2-dark surface-elevated
→ grass-3-dark text-primary
→ slate-12-dark text-secondary
→ slate-11-dark text-tertiary
→ grass-9-dark warning
→ grass-9-dark warning-hover
→ grass-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. Grass 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.