01
#FDFDFEApp background
indigo-1
Radix Indigo 1- RGB
rgb(253 253 254)- Black text
- 20.66:1
- White text
- 1.02:1
← Back to color catalog
Interaction route map
Radix Indigo, routed through the interface.
A source-verified twelve-step indigo scale mapped as one continuous interaction route—from quiet app surfaces, through borders and focus, to solid actions and readable text.
- Scale steps
- 01—12
- Documented roles
- 12
- Version
- 3.0.0
- 01
#FDFDFE - 02
#F7F9FF - 03
#EDF2FE - 04
#E1E9FF - 05
#D2DEFF - 06
#C1D0FF - 07
#ABBDF9 - 08
#8DA4EF - 09
#3E63DD - 10
#3358D4 - 11
#3A5BC7 - 12
#1F2D5C
Step 9 is the solid accent anchor. Steps 11 and 12 are intended for text; every real pairing still needs testing.
Pinned provenance
The exact opaque light Indigo export, frozen at 3.0.0.
This reference contains only Indigo 1–12 from the opaque light sRGB export of @radix-ui/colors 3.0.0. Dark, alpha and P3 variants are outside its scope.
Hexees is an independent reference and is not affiliated with or endorsed by WorkOS or Radix.
- Version
- @radix-ui/colors 3.0.0
- Source
- Versioned package export
- License
- MIT
Compact token ledger
Twelve stops, one usable route.
The source order is preserved across surface, border and action ranges. Each compact card exposes the exact sRGB value, intended role and calculated black-or-white text contrast.
Surfaces · 01—05
Inspect canonical color
02
#F7F9FFSubtle background
indigo-2
Radix Indigo 2- RGB
rgb(247 249 255)- Black text
- 19.95:1
- White text
- 1.05:1
More formats
03
#EDF2FEComponent background
indigo-3
Radix Indigo 3- RGB
rgb(237 242 254)- Black text
- 18.73:1
- White text
- 1.12:1
More formats
04
#E1E9FFHovered component
indigo-4
Radix Indigo 4- RGB
rgb(225 233 255)- Black text
- 17.30:1
- White text
- 1.21:1
More formats
05
#D2DEFFActive component
indigo-5
Radix Indigo 5- RGB
rgb(210 222 255)- Black text
- 15.63:1
- White text
- 1.34:1
More formats
Edges · 06—08
06
#C1D0FFSubtle border
indigo-6
Radix Indigo 6- RGB
rgb(193 208 255)- Black text
- 13.73:1
- White text
- 1.53:1
More formats
07
#ABBDF9Interactive border
indigo-7
Radix Indigo 7- RGB
rgb(171 189 249)- Black text
- 11.38:1
- White text
- 1.85:1
More formats
08
#8DA4EFStrong border or focus ring
indigo-8
Radix Indigo 8- RGB
rgb(141 164 239)- Black text
- 8.69:1
- White text
- 2.42:1
More formats
Accent and text · 09—12
09
#3E63DDSolid background
indigo-9
Radix Indigo 9- RGB
rgb(62 99 221)- Black text
- 4.03:1
- White text
- 5.21:1
More formats
10
#3358D4Hovered solid background
indigo-10
Radix Indigo 10- RGB
rgb(51 88 212)- Black text
- 3.49:1
- White text
- 6.02:1
More formats
11
#3A5BC7Low-contrast text
indigo-11
Radix Indigo 11- RGB
rgb(58 91 199)- Black text
- 3.50:1
- White text
- 6.00:1
More formats
12
#1F2D5CHigh-contrast text
indigo-12
Radix Indigo 12- RGB
rgb(31 45 92)- Black text
- 1.59:1
- White text
- 13.22:1
More formats
Use with evidence
A brand accent still needs state testing.
The collection is indexable only while all twelve published values match the frozen manifest. Individual token pages remain noindex so this complete route stays the useful destination.
Test actual text, focus rings, selected states and neighboring surfaces. Indigo alone cannot communicate selection or action; pair color with labels, shape, icons or another programmatic cue.