01
#FDFCFEApp background
violet-1
Radix Violet 1- RGB
rgb(253 252 254)- Black text
- 20.53:1
- White text
- 1.02:1
← Back to color catalog
Interface depth map
Radix Violet, layered by purpose.
A source-verified twelve-step violet scale arranged as interface depth: quiet canvas layers, component edges, a solid action anchor and readable foreground text.
- Scale steps
- 01—12
- Documented roles
- 12
- Version
- 3.0.0
- 01App background
#FDFCFE - 02Subtle background
#FAF8FF - 03Component background
#F4F0FE - 04Hovered component
#EBE4FF - 05Active component
#E1D9FF - 06Subtle border
#D4CAFE - 07Interactive border
#C2B5F5 - 08Strong border or focus ring
#AA99EC - 09Solid background
#6E56CF - 10Hovered solid background
#654DC4 - 11Low-contrast text
#6550B9 - 12High-contrast text
#2F265F
Step 9 is the solid accent layer. Steps 11 and 12 move into foreground text; test every real pairing.
Pinned provenance
The exact opaque light Violet export, frozen at 3.0.0.
This reference contains only Violet 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 layer ledger
Twelve layers, measured precisely.
Source order is preserved across surfaces, edges and foreground roles. Each compact card gives one direct HEX action, exact sRGB data and calculated black-or-white text contrast.
Canvas and surfaces · 01—05
Inspect canonical color
02
#FAF8FFSubtle background
violet-2
Radix Violet 2- RGB
rgb(250 248 255)- Black text
- 19.94:1
- White text
- 1.05:1
More formats
03
#F4F0FEComponent background
violet-3
Radix Violet 3- RGB
rgb(244 240 254)- Black text
- 18.74:1
- White text
- 1.12:1
More formats
04
#EBE4FFHovered component
violet-4
Radix Violet 4- RGB
rgb(235 228 255)- Black text
- 17.07:1
- White text
- 1.23:1
More formats
05
#E1D9FFActive component
violet-5
Radix Violet 5- RGB
rgb(225 217 255)- Black text
- 15.57:1
- White text
- 1.35:1
More formats
Edges and controls · 06—08
06
#D4CAFESubtle border
violet-6
Radix Violet 6- RGB
rgb(212 202 254)- Black text
- 13.68:1
- White text
- 1.54:1
More formats
07
#C2B5F5Interactive border
violet-7
Radix Violet 7- RGB
rgb(194 181 245)- Black text
- 11.22:1
- White text
- 1.87:1
More formats
08
#AA99ECStrong border or focus ring
violet-8
Radix Violet 8- RGB
rgb(170 153 236)- Black text
- 8.48:1
- White text
- 2.48:1
More formats
Action and foreground · 09—12
09
#6E56CFSolid background
violet-9
Radix Violet 9- RGB
rgb(110 86 207)- Black text
- 3.90:1
- White text
- 5.39:1
More formats
10
#654DC4Hovered solid background
violet-10
Radix Violet 10- RGB
rgb(101 77 196)- Black text
- 3.41:1
- White text
- 6.15:1
More formats
11
#6550B9Low-contrast text
violet-11
Radix Violet 11- RGB
rgb(101 80 185)- Black text
- 3.40:1
- White text
- 6.17:1
More formats
12
#2F265FHigh-contrast text
violet-12
Radix Violet 12- RGB
rgb(47 38 95)- Black text
- 1.56:1
- White text
- 13.43:1
More formats
Use with evidence
Depth is a system, not a color claim.
The collection is indexable only while all twelve published values match the frozen manifest. Individual token pages remain noindex so this complete scale stays the useful destination.
Test text, focus indicators, selected states and adjacent layers in the finished interface. Violet alone cannot communicate hierarchy or action; pair it with labels, shape and programmatic state.