01
#FEFCFBApp background
orange-1
Radix Orange 1- RGB
rgb(254 252 251)- Black text
- 20.53:1
- White text
- 1.02:1
← Back to color catalog
Warning signal lab
Radix Orange, built for signals.
A source-verified twelve-step orange scale arranged from quiet surfaces through borders and solid warning accents to readable foreground text.
- Scale steps
- 01—12
- Documented roles
- 12
- Version
- 3.0.0
Payment needs attentionThe icon and label preserve meaning without color.
Review- 01App background
#FEFCFB - 02Subtle background
#FFF7ED - 03Component background
#FFEFD6 - 04Hovered component
#FFDFB5 - 05Active component
#FFD19A - 06Subtle border
#FFC182 - 07Interactive border
#F5AE73 - 08Strong border or focus ring
#EC9455 - 09Solid background
#F76B15 - 10Hovered solid background
#EF5F00 - 11Low-contrast text
#CC4E00 - 12High-contrast text
#582D1D
Step 9 is the solid orange anchor. A warning still needs an icon, a label and programmatic state—not color alone.
Pinned provenance
The exact opaque light Orange export, frozen at 3.0.0.
This reference contains only Orange 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 signal ledger
Twelve tokens, one measured progression.
Source order is preserved across surfaces, borders, solid accents and text. Each compact card exposes exact sRGB data and calculated black-or-white text contrast.
Canvas and surfaces · 01—05
Inspect canonical color
02
#FFF7EDSubtle background
orange-2
Tailwind Orange 50- RGB
rgb(255 247 237)- Black text
- 19.78:1
- White text
- 1.06:1
More formats
03
#FFEFD6Component background
orange-3
Radix Orange 3- RGB
rgb(255 239 214)- Black text
- 18.57:1
- White text
- 1.13:1
More formats
04
#FFDFB5Hovered component
orange-4
Radix Orange 4- RGB
rgb(255 223 181)- Black text
- 16.47:1
- White text
- 1.27:1
More formats
05
#FFD19AActive component
orange-5
Radix Orange 5- RGB
rgb(255 209 154)- Black text
- 14.84:1
- White text
- 1.42:1
More formats
Borders and controls · 06—08
06
#FFC182Subtle border
orange-6
Radix Orange 6- RGB
rgb(255 193 130)- Black text
- 13.20:1
- White text
- 1.59:1
More formats
07
#F5AE73Interactive border
orange-7
Radix Orange 7- RGB
rgb(245 174 115)- Black text
- 11.18:1
- White text
- 1.88:1
More formats
08
#EC9455Strong border or focus ring
orange-8
Radix Orange 8- RGB
rgb(236 148 85)- Black text
- 8.93:1
- White text
- 2.35:1
More formats
Solid signal and text · 09—12
09
#F76B15Solid background
orange-9
Radix Orange 9- RGB
rgb(247 107 21)- Black text
- 7.07:1
- White text
- 2.97:1
More formats
10
#EF5F00Hovered solid background
orange-10
Radix Orange 10- RGB
rgb(239 95 0)- Black text
- 6.31:1
- White text
- 3.33:1
More formats
11
#CC4E00Low-contrast text
orange-11
Radix Orange 11- RGB
rgb(204 78 0)- Black text
- 4.66:1
- White text
- 4.51:1
More formats
12
#582D1DHigh-contrast text
orange-12
Radix Orange 12- RGB
rgb(88 45 29)- Black text
- 1.81:1
- White text
- 11.61:1
More formats
Use with evidence
Orange draws attention; structure carries meaning.
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, borders, focus indicators and adjacent surfaces in the finished interface. Pair warning color with an icon, explicit text and programmatic status.