HexeesDigital color, made useful.
← Back to color catalog

Interface signal blueprint

Radix Blue, mapped as an interface signal.

A source-verified twelve-step blue scale, plotted from canvas to high-contrast text. Inspect each documented role, exact sRGB value and calculated contrast without flattening the system into a wall of swatches.

Scale steps
01—12
Documented roles
12
Version
3.0.0
Blue signal trace / source order 01—12
  1. 01#FBFDFFApp background
  2. 02#F4FAFFSubtle background
  3. 03#E6F4FEComponent background
  4. 04#D5EFFFHovered component
  5. 05#C2E5FFActive component
  6. 06#ACD8FCSubtle border
  7. 07#8EC8F6Interactive border
  8. 08#5EB1EFStrong border or focus ring
  9. 09#0090FFSolid background
  10. 10#0588F0Hovered solid background
  11. 11#0D74CELow-contrast text
  12. 12#113264High-contrast text

Pinned provenance

The exact opaque light Blue export, frozen at 3.0.0.

This page contains only Blue 1–12 from the opaque light sRGB export of @radix-ui/colors 3.0.0. Dark mode, alpha and P3 values are outside this reference.

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

Calibration table

Twelve steps. One explicit job each.

Official source order is preserved. Every row combines its documented scale role with exact sRGB and calculated black-or-white text contrast.

App background

blue-1

Radix Blue 1
RGB
rgb(251 253 255)
Black text
20.60:1
White text
1.02:1
More formats
Inspect canonical color

Subtle background

blue-2

Radix Blue 2
RGB
rgb(244 250 255)
Black text
19.96:1
White text
1.05:1
More formats
Inspect canonical color

Component background

blue-3

Radix Blue 3
RGB
rgb(230 244 254)
Black text
18.74:1
White text
1.12:1
More formats
Inspect canonical color

Hovered component

blue-4

Radix Blue 4
RGB
rgb(213 239 255)
Black text
17.62:1
White text
1.19:1
More formats
Inspect canonical color

Active component

blue-5

Radix Blue 5
RGB
rgb(194 229 255)
Black text
15.95:1
White text
1.32:1
More formats
Inspect canonical color

Subtle border

blue-6

Radix Blue 6
RGB
rgb(172 216 252)
Black text
13.98:1
White text
1.50:1
More formats
Inspect canonical color

Interactive border

blue-7

Radix Blue 7
RGB
rgb(142 200 246)
Black text
11.74:1
White text
1.79:1
More formats
Inspect canonical color

Strong border or focus ring

blue-8

Radix Blue 8
RGB
rgb(94 177 239)
Black text
9.01:1
White text
2.33:1
More formats
Inspect canonical color

Solid background

blue-9

Radix Blue 9
RGB
rgb(0 144 255)
Black text
6.43:1
White text
3.26:1
More formats
Inspect canonical color

Hovered solid background

blue-10

Radix Blue 10
RGB
rgb(5 136 240)
Black text
5.79:1
White text
3.63:1
More formats
Inspect canonical color

Low-contrast text

blue-11

Radix Blue 11
RGB
rgb(13 116 206)
Black text
4.41:1
White text
4.77:1
More formats
Inspect canonical color

High-contrast text

blue-12

Radix Blue 12
RGB
rgb(17 50 100)
Black text
1.66:1
White text
12.62:1
More formats
Inspect canonical color

Catalog scope

One complete scale, without index bloat.

The collection is indexable only when all twelve source values match the frozen manifest. Individual token pages remain noindex; Blue 9 keeps its existing canonical identity while the other eleven retain Radix provenance.

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

Open the contrast checker →Compare Radix Slate →