Cool neutral calibration

Slate, measured from canvas haze to typographic ink.

A blue-tinted neutral scale for interface depth. Follow the twelve official steps from page backgrounds through component states and borders to solid surfaces and text.

Scale steps: 01—12
Documented roles: 12
Version: 3.0.0

Pinned provenance

The exact opaque light Slate export, frozen at 3.0.0.

This page contains only Slate 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
Source: Versioned package export
License: MIT

Typesetter’s instrument

Choose a role before choosing a shade.

The official order is preserved. Contrast figures describe only black or white text on that exact opaque value; they do not certify a finished component.

01#FCFCFD

App background

slate-1

Radix Slate 1

RGB: rgb(252 252 253)
Black text: 20.48:1
White text: 1.03:1

Inspect canonical color

02#F9F9FB

Subtle background

slate-2

Radix Slate 2

RGB: rgb(249 249 251)
Black text: 19.97:1
White text: 1.05:1

Inspect canonical color

03#F0F0F3

Component background

slate-3

Radix Slate 3

RGB: rgb(240 240 243)
Black text: 18.46:1
White text: 1.14:1

Inspect canonical color

04#E8E8EC

Hovered component

slate-4

Radix Slate 4

RGB: rgb(232 232 236)
Black text: 17.19:1
White text: 1.22:1

Inspect canonical color

05#E0E1E6

Active component

slate-5

Radix Slate 5

RGB: rgb(224 225 230)
Black text: 16.08:1
White text: 1.31:1

Inspect canonical color

06#D9D9E0

Subtle border

slate-6

Radix Slate 6

RGB: rgb(217 217 224)
Black text: 14.95:1
White text: 1.40:1

Inspect canonical color

07#CDCED6

Interactive border

slate-7

Radix Slate 7

RGB: rgb(205 206 214)
Black text: 13.40:1
White text: 1.57:1

Inspect canonical color

08#B9BBC6

Strong border or focus ring

slate-8

Radix Slate 8

RGB: rgb(185 187 198)
Black text: 10.99:1
White text: 1.91:1

Inspect canonical color

09#8B8D98

Solid background

slate-9

Radix Slate 9

RGB: rgb(139 141 152)
Black text: 6.36:1
White text: 3.30:1

Inspect canonical color

10#80838D

Hovered solid background

slate-10

Radix Slate 10

RGB: rgb(128 131 141)
Black text: 5.55:1
White text: 3.78:1

Inspect canonical color

11#60646C

Low-contrast text

slate-11

Radix Slate 11

RGB: rgb(96 100 108)
Black text: 3.54:1
White text: 5.94:1

Inspect canonical color

12#1C2024

High-contrast text

slate-12

Radix Slate 12

RGB: rgb(28 32 36)
Black text: 1.28:1
White text: 16.39:1

Inspect canonical color

Catalog scope

Twelve source values. No duplicate canonicals.

Production reconciliation found no existing exact-HEX canonical for this scale, so each Slate token retains its Radix provenance. Individual detail pages stay noindex while this complete collection is discoverable.

Test real typography, adjacent surfaces, borders, focus indicators and states. A token role and a calculated ratio are not an accessibility guarantee.

Open the contrast checker →Compare Radix Gray →