1
#FCFCFCApp background
gray-1
Radix Gray 1- RGB
rgb(252 252 252)- Black text
- 20.47:1
- White text
- 1.03:1
← Back to color catalog
Neutral interface calibration
One gray rail. Twelve deliberate UI roles.
Read Radix Gray as a continuous interface system—from quiet page backgrounds through component states and borders to solid fills and text. Copy exact values without flattening their intended roles.
- Scale steps
- 1 → 12
- Role groups
- 5
- Version
- 3.0.0
Source and scope
The exact opaque light Gray export, frozen at 3.0.0.
This reference contains only Gray 1–12 from the opaque light sRGB export of @radix-ui/colors 3.0.0. Tinted neutral families, dark mode, alpha and P3 values are deliberately outside this page.
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
Tonal instrument
Move by role, not by guessing a prettier gray.
Each step keeps its official source order and documented use category. The black and white text ratios are calculated references for that exact pair, not blanket accessibility approval.
2
#F9F9F9Subtle background
gray-2
Radix Gray 2- RGB
rgb(249 249 249)- Black text
- 19.95:1
- White text
- 1.05:1
3
#F0F0F0Component background
gray-3
Radix Gray 3- RGB
rgb(240 240 240)- Black text
- 18.43:1
- White text
- 1.14:1
4
#E8E8E8Hovered component
gray-4
Radix Gray 4- RGB
rgb(232 232 232)- Black text
- 17.14:1
- White text
- 1.23:1
5
#E0E0E0Active component
gray-5
Material Grey 300- RGB
rgb(224 224 224)- Black text
- 15.91:1
- White text
- 1.32:1
6
#D9D9D9Subtle border
gray-6
Radix Gray 6- RGB
rgb(217 217 217)- Black text
- 14.88:1
- White text
- 1.41:1
7
#CECECEInteractive border
gray-7
Radix Gray 7- RGB
rgb(206 206 206)- Black text
- 13.34:1
- White text
- 1.57:1
8
#BBBBBBStrong border or focus ring
gray-8
Radix Gray 8- RGB
rgb(187 187 187)- Black text
- 10.94:1
- White text
- 1.92:1
9
#8D8D8DSolid background
gray-9
Radix Gray 9- RGB
rgb(141 141 141)- Black text
- 6.33:1
- White text
- 3.32:1
10
#838383Hovered solid background
gray-10
Radix Gray 10- RGB
rgb(131 131 131)- Black text
- 5.54:1
- White text
- 3.79:1
11
#646464Low-contrast text
gray-11
Radix Gray 11- RGB
rgb(100 100 100)- Black text
- 3.55:1
- White text
- 5.92:1
12
#202020High-contrast text
gray-12
Radix Gray 12- RGB
rgb(32 32 32)- Black text
- 1.29:1
- White text
- 16.29:1
Canonical reuse
Gray 5 reuses an existing reviewed color.
The exact #E0E0E0 value already belongs to the indexed Material Grey 300 record. Hexees links gray-5 to that canonical page and keeps the other eleven Radix-owned detail records noindex.
Test actual typography, borders, focus indicators, adjacent surfaces and interactive states. Radix roles and calculated ratios do not guarantee that a finished component conforms to WCAG.
Open the contrast checker →Compare Radix solid accents →