RecolorOpen Recolor

A light bluish gray, black text passes AA

Tailwind slate-300

The hex code of Tailwind slate-300 is #cad5e2 (rgb(202 213 226)), from its Tailwind CSS 4.3.3 value oklch(86.9% 0.022 252.894). Black text on it reaches 14.13:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#cad5e2slate-300
From the theme file of Tailwind CSS 4.3.3 (--color-slate-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(86.9% 0.022 252.894)
Hex#cad5e2
RGBrgb(202 213 226)
HSLhsl(212 29% 84%)
CSS variablevar(--color-slate-300)
Nearest CSS namelightgray #d3d3d3, 0.022 away in OKLab
White text1.49:1: AA fails, AAA fails, large text fails
Black text14.13:1: AA passes, AAA passes, large text passes

About slate-300

Read as numbers, slate-300 is lightness 86.9%, chroma 0.022 and hue 252.9 degrees; read by eye, it is a light bluish gray. Its neighbors on the slate scale are slate-200, 6.0 points lighter, and slate-400, 16.5 points darker.

HSL and OKLCH agree on how light it is, 84% and 86.9%. No gamut mapping is needed here: oklch(86.9% 0.022 252.894) sits inside sRGB and #cad5e2 matches it.

Black on slate-300 reads at 14.13:1, enough for AAA body text; white reaches 1.49:1 and should stay off it. Black text passes on every slate shade from slate-50 to slate-400, 1 shade darker than slate-300.

Of the named colors, lightgray (#d3d3d3) is the nearest, 0.022 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #f6f8fa
  2. #edf1f5
  3. #e4eaf0
  4. #dbe3ec
  5. #d3dce7
  6. #cad5e2
  7. #9ea7b1
  8. #747b83
  9. #4d5157
  10. #292b2f
  11. #090a0c

From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.

A palette around it

  1. #cad5e2
  2. #5a4c75
  3. #e4c388
  4. #192119
  5. #937941

Around slate-300 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #5a4c75, #e4c388, #192119, #937941, drawn from a seed fixed by its hex. Open it in Recolor.

Using slate-300

Pair it with text-black, 14.13:1; slate-300 as text on a black page measures the same ratio. In CSS it is var(--color-slate-300).

HTML
<a class="bg-slate-300 text-black" href="/start">Get started</a>
<p class="text-slate-300">Text in slate-300</p>

Common questions

Does white text pass WCAG AA on Tailwind slate-300?

No. White text measures 1.49:1 on slate-300, under AA's 4.5:1; black text measures 14.13:1 and passes. The lightest slate shade for white text is slate-500.

Is Tailwind slate-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-slate-300: oklch(86.9% 0.022 252.894); #cad5e2 is its conversion to sRGB.

Is there a CSS named color for Tailwind slate-300?

No. The nearest CSS named color is lightgray (#d3d3d3), 0.022 away in OKLab.

Sources