Radix Indigo

Radix UI's indigo scale — 12 semantically labeled steps published in both light and dark variants. A deeper, more violet-leaning blue. 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

indigo-1-light
#FDFDFE
App background.
indigo-2-light
#F7F9FF
Subtle background.
indigo-3-light
#EDF2FE
UI element background.
indigo-4-light
#E1E9FF
Hovered UI element background.
indigo-5-light
#D2DEFF
Active / selected UI element background.
indigo-6-light
#C1D0FF
Subtle borders and separators.
indigo-7-light
#ABBDF9
UI element border and focus rings.
indigo-8-light
#8DA4EF
Hovered UI element border.
indigo-9-light
#3E63DD
Solid background — the brand color step.
indigo-10-light
#3358D4
Hovered solid background.
indigo-11-light
#3A5BC7
Low-contrast text.
indigo-12-light
#1F2D5C
High-contrast text.
indigo-1-dark
#11131F
App background.
indigo-2-dark
#141726
Subtle background.
indigo-3-dark
#182449
UI element background.
indigo-4-dark
#1D2E62
Hovered UI element background.
indigo-5-dark
#253974
Active / selected UI element background.
indigo-6-dark
#304384
Subtle borders and separators.
indigo-7-dark
#3A4F97
UI element border and focus rings.
indigo-8-dark
#435DB1
Hovered UI element border.
indigo-9-dark
#3E63DD
Solid background — the brand color step.
indigo-10-dark
#5472E4
Hovered solid background.
indigo-11-dark
#9EB1FF
Low-contrast text.
indigo-12-dark
#D6E1FF
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 → indigo-8-light
accent-hover → indigo-7-light
background → indigo-1-light
error → indigo-12-light
primary → indigo-9-light
primary-hover → indigo-10-light
success → indigo-9-light
surface → indigo-2-light
surface-elevated → indigo-3-light
text-primary → slate-12-light
text-secondary → slate-11-light
text-tertiary → indigo-9-light
warning → indigo-9-light
warning-hover → indigo-10-light

Dark mode (14 roles)

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