Radix Yellow
Radix UI's yellow scale — 12 semantically labeled steps published in both light and dark variants. A bright pure yellow. 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
yellow-1-light
#FDFDF9
App background.
yellow-2-light
#FEFCE9
Subtle background.
yellow-3-light
#FFFAB8
UI element background.
yellow-4-light
#FFF394
Hovered UI element background.
yellow-5-light
#FFE770
Active / selected UI element background.
yellow-6-light
#F3D768
Subtle borders and separators.
yellow-7-light
#E4C767
UI element border and focus rings.
yellow-8-light
#D5AE39
Hovered UI element border.
yellow-9-light
#FFE629
Solid background — the brand color step.
yellow-10-light
#FFDC00
Hovered solid background.
yellow-11-light
#9E6C00
Low-contrast text.
yellow-12-light
#473B1F
High-contrast text.
yellow-1-dark
#14120B
App background.
yellow-2-dark
#1B180F
Subtle background.
yellow-3-dark
#2D2305
UI element background.
yellow-4-dark
#362B00
Hovered UI element background.
yellow-5-dark
#433500
Active / selected UI element background.
yellow-6-dark
#524202
Subtle borders and separators.
yellow-7-dark
#665417
UI element border and focus rings.
yellow-8-dark
#836A21
Hovered UI element border.
yellow-9-dark
#FFE629
Solid background — the brand color step.
yellow-10-dark
#FFFF57
Hovered solid background.
yellow-11-dark
#F5E147
Low-contrast text.
yellow-12-dark
#F6EEB4
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
→ yellow-8-light accent-hover
→ yellow-7-light background
→ yellow-1-light error
→ yellow-12-light primary
→ yellow-9-light primary-hover
→ yellow-10-light success
→ yellow-9-light surface
→ yellow-2-light surface-elevated
→ yellow-3-light text-primary
→ slate-12-light text-secondary
→ slate-11-light text-tertiary
→ yellow-9-light warning
→ yellow-9-light warning-hover
→ yellow-10-light Dark mode (14 roles)
accent
→ yellow-8-dark accent-hover
→ yellow-7-dark background
→ yellow-1-dark error
→ yellow-12-dark primary
→ yellow-9-dark primary-hover
→ yellow-10-dark success
→ yellow-9-dark surface
→ yellow-2-dark surface-elevated
→ yellow-3-dark text-primary
→ slate-12-dark text-secondary
→ slate-11-dark text-tertiary
→ yellow-9-dark warning
→ yellow-9-dark warning-hover
→ yellow-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. Yellow 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.