01
#FDFDF9App background
yellow-1
- RGB
- rgb(253 253 249)
- Black text
- 20.59:1
- White text
- 1.02:1
← Back to palette directory
Attention calibration
Yellow, calibrated—not guessed.
A source-verified twelve-step yellow scale for quiet surfaces, borders, solid attention states and readable foregrounds, arranged in exact source order.
- Scale steps
- 01—12
- Color space
- sRGB
- Version
- 3.0.0
Review requiredText and icon carry the message; yellow changes emphasis.
Attention- 01App background
#FDFDF9 - 02Subtle background
#FEFCE9 - 03Component background
#FFFAB8 - 04Hovered component
#FFF394 - 05Active component
#FFE770 - 06Subtle border
#F3D768 - 07Interactive border
#E4C767 - 08Strong border or focus ring
#D5AE39 - 09Solid background
#FFE629 - 10Hovered solid background
#FFDC00 - 11Low-contrast text
#9E6C00 - 12High-contrast text
#473B1F
Steps 9 and 10 are solid anchors designed for dark foregrounds. Verify the real component rather than assuming yellow is readable.
Pinned provenance
The exact opaque light Yellow export, frozen at 3.0.0.
This reference contains only Yellow 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.
Measured token board
Twelve roles. Exact values. No mystery yellow.
Each card keeps the official step, role and sRGB value together with calculated black and white text contrast and copy-ready output.
Inspect color ↗
02
#FEFCE9Subtle background
yellow-2
- RGB
- rgb(254 252 233)
- Black text
- 20.31:1
- White text
- 1.03:1
More formats
03
#FFFAB8Component background
yellow-3
- RGB
- rgb(255 250 184)
- Black text
- 19.62:1
- White text
- 1.07:1
More formats
04
#FFF394Hovered component
yellow-4
- RGB
- rgb(255 243 148)
- Black text
- 18.50:1
- White text
- 1.14:1
More formats
05
#FFE770Active component
yellow-5
- RGB
- rgb(255 231 112)
- Black text
- 16.92:1
- White text
- 1.24:1
More formats
06
#F3D768Subtle border
yellow-6
- RGB
- rgb(243 215 104)
- Black text
- 14.73:1
- White text
- 1.43:1
More formats
07
#E4C767Interactive border
yellow-7
- RGB
- rgb(228 199 103)
- Black text
- 12.66:1
- White text
- 1.66:1
More formats
08
#D5AE39Strong border or focus ring
yellow-8
- RGB
- rgb(213 174 57)
- Black text
- 9.94:1
- White text
- 2.11:1
More formats
09
#FFE629Solid background
yellow-9
- RGB
- rgb(255 230 41)
- Black text
- 16.60:1
- White text
- 1.26:1
More formats
10
#FFDC00Hovered solid background
yellow-10
- RGB
- rgb(255 220 0)
- Black text
- 15.49:1
- White text
- 1.36:1
More formats
11
#9E6C00Low-contrast text
yellow-11
- RGB
- rgb(158 108 0)
- Black text
- 4.60:1
- White text
- 4.57:1
More formats
12
#473B1FHigh-contrast text
yellow-12
- RGB
- rgb(71 59 31)
- Black text
- 1.91:1
- White text
- 10.98:1
More formats
Attention needs structure
Color can signal. It cannot explain.
The hub is indexable only while all twelve published values match the frozen manifest. Individual token pages remain noindex so the complete scale is the useful search destination.
Pair yellow with explicit text, an icon and programmatic state. Test text, borders, focus indicators and adjacent surfaces in the final interface.