HexeesDigital color, made useful.
← Back to color catalog

Living interface scale

Radix Green, read as growth rings.

A source-verified twelve-step green scale, from quiet canvas to high-contrast text. Follow every documented role through one compact working table instead of a wall of copy buttons.

Scale steps
01—12
Documented roles
12
Version
3.0.0
Green growth rings / source order 01—12
  1. 01#FBFEFC
  2. 02#F4FBF6
  3. 03#E6F6EB
  4. 04#D6F1DF
  5. 05#C4E8D1
  6. 06#ADDDC0
  7. 07#8ECEAA
  8. 08#5BB98B
  9. 09#30A46C
  10. 10#2B9A66
  11. 11#218358
  12. 12#193B2D

Pinned provenance

The exact opaque light Green export, frozen at 3.0.0.

This reference contains only Green 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
License
MIT

Working field table

Twelve steps, arranged by interface job.

Source order is preserved. Each row combines the documented role, exact sRGB value and calculated black-or-white text contrast.

App background

green-1

Radix Green 1
RGB
rgb(251 254 252)
Black text
20.68:1
White text
1.02:1
More formats
Inspect canonical color

Subtle background

green-2

Radix Green 2
RGB
rgb(244 251 246)
Black text
19.98:1
White text
1.05:1
More formats
Inspect canonical color

Component background

green-3

Radix Green 3
RGB
rgb(230 246 235)
Black text
18.75:1
White text
1.12:1
More formats
Inspect canonical color

Hovered component

green-4

Radix Green 4
RGB
rgb(214 241 223)
Black text
17.51:1
White text
1.20:1
More formats
Inspect canonical color

Active component

green-5

Radix Green 5
RGB
rgb(196 232 209)
Black text
15.81:1
White text
1.33:1
More formats
Inspect canonical color

Subtle border

green-6

Radix Green 6
RGB
rgb(173 221 192)
Black text
13.88:1
White text
1.51:1
More formats
Inspect canonical color

Interactive border

green-7

Radix Green 7
RGB
rgb(142 206 170)
Black text
11.56:1
White text
1.82:1
More formats
Inspect canonical color

Strong border or focus ring

green-8

Radix Green 8
RGB
rgb(91 185 139)
Black text
8.76:1
White text
2.40:1
More formats
Inspect canonical color

Solid background

green-9

Radix Green 9
RGB
rgb(48 164 108)
Black text
6.65:1
White text
3.16:1
More formats
Inspect canonical color

Hovered solid background

green-10

Radix Green 10
RGB
rgb(43 154 102)
Black text
5.92:1
White text
3.55:1
More formats
Inspect canonical color

Low-contrast text

green-11

Radix Green 11
RGB
rgb(33 131 88)
Black text
4.45:1
White text
4.72:1
More formats
Inspect canonical color

High-contrast text

green-12

Radix Green 12
RGB
rgb(25 59 45)
Black text
1.70:1
White text
12.32:1
More formats
Inspect canonical color

Catalog scope

A complete scale without index bloat.

The collection is indexable only when all twelve values match the frozen manifest. Individual token pages remain noindex; Green 9 keeps its existing canonical identity.

Documented roles and calculated text ratios are starting points, not guarantees. Test actual type, adjacent surfaces, borders, keyboard focus and component states.

Open the contrast checker →Compare Radix Sage →