Radix Teal

Radix UI's teal scale — 12 semantically labeled steps published in both light and dark variants. A cool blue-green, between cyan and jade. 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 radixcooldesign-systemscaledual-mode

Swatches

teal-1-light
#FAFEFD
App background.
teal-2-light
#F3FBF9
Subtle background.
teal-3-light
#E0F8F3
UI element background.
teal-4-light
#CCF3EA
Hovered UI element background.
teal-5-light
#B8EAE0
Active / selected UI element background.
teal-6-light
#A1DED2
Subtle borders and separators.
teal-7-light
#83CDC1
UI element border and focus rings.
teal-8-light
#53B9AB
Hovered UI element border.
teal-9-light
#12A594
Solid background — the brand color step.
teal-10-light
#0D9B8A
Hovered solid background.
teal-11-light
#008573
Low-contrast text.
teal-12-light
#0D3D38
High-contrast text.
teal-1-dark
#0D1514
App background.
teal-2-dark
#111C1B
Subtle background.
teal-3-dark
#0D2D2A
UI element background.
teal-4-dark
#023B37
Hovered UI element background.
teal-5-dark
#084843
Active / selected UI element background.
teal-6-dark
#145750
Subtle borders and separators.
teal-7-dark
#1C6961
UI element border and focus rings.
teal-8-dark
#207E73
Hovered UI element border.
teal-9-dark
#12A594
Solid background — the brand color step.
teal-10-dark
#0EB39E
Hovered solid background.
teal-11-dark
#0BD8B6
Low-contrast text.
teal-12-dark
#ADF0DD
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 → teal-8-light
accent-hover → teal-7-light
background → teal-1-light
error → teal-12-light
primary → teal-9-light
primary-hover → teal-10-light
success → teal-9-light
surface → teal-2-light
surface-elevated → teal-3-light
text-primary → slate-12-light
text-secondary → slate-11-light
text-tertiary → teal-9-light
warning → teal-9-light
warning-hover → teal-10-light

Dark mode (14 roles)

accent → teal-8-dark
accent-hover → teal-7-dark
background → teal-1-dark
error → teal-12-dark
primary → teal-9-dark
primary-hover → teal-10-dark
success → teal-9-dark
surface → teal-2-dark
surface-elevated → teal-3-dark
text-primary → slate-12-dark
text-secondary → slate-11-dark
text-tertiary → teal-9-dark
warning → teal-9-dark
warning-hover → teal-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. Teal 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.