Radix Tomato
Radix UI's tomato scale — 12 semantically labeled steps published in both light and dark variants. A bold warm orange-red, very close to tomato. 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
tomato-1-light
#FFFCFC
App background.
tomato-2-light
#FFF8F7
Subtle background.
tomato-3-light
#FEEBE7
UI element background.
tomato-4-light
#FFDCD3
Hovered UI element background.
tomato-5-light
#FFCDC2
Active / selected UI element background.
tomato-6-light
#FDBDAF
Subtle borders and separators.
tomato-7-light
#F5A898
UI element border and focus rings.
tomato-8-light
#EC8E7B
Hovered UI element border.
tomato-9-light
#E54D2E
Solid background — the brand color step.
tomato-10-light
#DD4425
Hovered solid background.
tomato-11-light
#D13415
Low-contrast text.
tomato-12-light
#5C271F
High-contrast text.
tomato-1-dark
#181111
App background.
tomato-2-dark
#1F1513
Subtle background.
tomato-3-dark
#391714
UI element background.
tomato-4-dark
#4E1511
Hovered UI element background.
tomato-5-dark
#5E1C16
Active / selected UI element background.
tomato-6-dark
#6E2920
Subtle borders and separators.
tomato-7-dark
#853A2D
UI element border and focus rings.
tomato-8-dark
#AC4D39
Hovered UI element border.
tomato-9-dark
#E54D2E
Solid background — the brand color step.
tomato-10-dark
#EC6142
Hovered solid background.
tomato-11-dark
#FF977D
Low-contrast text.
tomato-12-dark
#FBD3CB
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
→ tomato-8-light accent-hover
→ tomato-7-light background
→ tomato-1-light error
→ tomato-12-light primary
→ tomato-9-light primary-hover
→ tomato-10-light success
→ tomato-9-light surface
→ tomato-2-light surface-elevated
→ tomato-3-light text-primary
→ slate-12-light text-secondary
→ slate-11-light text-tertiary
→ tomato-9-light warning
→ tomato-9-light warning-hover
→ tomato-10-light Dark mode (14 roles)
accent
→ tomato-8-dark accent-hover
→ tomato-7-dark background
→ tomato-1-dark error
→ tomato-12-dark primary
→ tomato-9-dark primary-hover
→ tomato-10-dark success
→ tomato-9-dark surface
→ tomato-2-dark surface-elevated
→ tomato-3-dark text-primary
→ slate-12-dark text-secondary
→ slate-11-dark text-tertiary
→ tomato-9-dark warning
→ tomato-9-dark warning-hover
→ tomato-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. Tomato 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.