RecolorOpen Recolor

A grayish medium blue, black text passes AA

Tailwind slate-400

Tailwind slate-400 is oklch(70.4% 0.04 256.788) in Tailwind CSS 4.3.3, which is #90a1b9 in hex and rgb(144 161 185). Black text on it reaches 7.98:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#90a1b9slate-400
From the theme file of Tailwind CSS 4.3.3 (--color-slate-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(70.4% 0.04 256.788)
Hex#90a1b9
RGBrgb(144 161 185)
HSLhsl(215 23% 65%)
CSS variablevar(--color-slate-400)
Nearest CSS namedarkgray #a9a9a9, 0.051 away in OKLab
White text2.63:1: AA fails, AAA fails, large text fails
Black text7.98:1: AA passes, AAA passes, large text passes

About slate-400

Tailwind slate-400 is a grayish medium blue: OKLCH lightness 70.4%, chroma 0.040, hue 256.8 degrees. On Tailwind's slate scale it sits between slate-300 at 86.9% and slate-500 at 55.4%.

Here HSL's lightness, 65%, lands near OKLCH's 70.4%, which is not true of every color. Its value fits inside sRGB, so #90a1b9 is the same color, not an approximation.

Black text on slate-400 measures 7.98:1, past the 7:1 of WCAG AAA, while white text manages only 2.63:1. Black text holds AA down to here on the slate scale; at slate-500 it falls to 4.41:1.

No CSS keyword matches it; darkgray (#a9a9a9) is the nearest, 0.051 away in OKLab, a clear step off.

Tints and shades

  1. #eceff3
  2. #d9dfe7
  3. #c6cfdc
  4. #b4c0d0
  5. #a2b0c5
  6. #90a1b9
  7. #707d90
  8. #515b6a
  9. #343c46
  10. #1a1e24
  11. #040507

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. #90a1b9
  2. #362611
  3. #d0bba0
  4. #36577f
  5. #cee1fb

Recolor's generator, with slate-400 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #362611, #d0bba0, #36577f, #cee1fb. Open it in Recolor.

Using slate-400

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

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

Common questions

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

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

Is Tailwind slate-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-slate-400: oklch(70.4% 0.04 256.788); #90a1b9 is its conversion to sRGB.

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

No. The nearest CSS named color is darkgray (#a9a9a9), 0.051 away in OKLab.

Sources