RecolorOpen Recolor

A grayish medium blue, white text passes AA

Tailwind slate-500

In Tailwind CSS 4.3.3, slate-500 is defined as oklch(55.4% 0.046 257.417); in hex that is #62748e, or rgb(98 116 142). White text on it reaches 4.76:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#62748eslate-500
From the theme file of Tailwind CSS 4.3.3 (--color-slate-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(55.4% 0.046 257.417)
Hex#62748e
RGBrgb(98 116 142)
HSLhsl(215 18% 47%)
CSS variablevar(--color-slate-500)
Nearest CSS nameslategray #708090, 0.042 away in OKLab
White text4.76:1: AA passes, AAA fails, large text passes
Black text4.41:1: AA fails, AAA fails, large text passes

About slate-500

In OKLCH, slate-500 has a lightness of 55.4%, a chroma of 0.046 and a hue of 257.4 degrees, which makes it a grayish medium blue. The step up to slate-400 is 15.0 points of lightness, and the step down to slate-600 10.8 points.

HSL calls its lightness 47%, OKLCH 55.4%: 8 points between a formula and a measure of what the eye sees. The value lies inside sRGB, the gamut of a hex code, so slate-500 converts to #62748e without losing chroma.

With white text, slate-500 passes AA at 4.76:1. Black text, at 4.41:1, does not. It is the lightest slate shade that carries white body text; slate-400 falls short at 2.63:1.

Among the CSS keywords, slategray (#708090) comes closest at 0.042 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #e3e7ec
  2. #c8cfd8
  3. #adb7c5
  4. #94a0b3
  5. #7a8aa0
  6. #62748e
  7. #4b5a6e
  8. #354050
  9. #212934
  10. #0e1319
  11. #020304

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. #62748e
  2. #142138
  3. #dbedff
  4. #455776
  5. #a9c8ff

Locked as the first of five swatches, slate-500 gets #142138, #dbedff, #455776, #a9c8ff from Recolor's generator, a monochromatic palette, one hue in five lightnesses. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using slate-500

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

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

Common questions

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

Yes. White text measures 4.76:1 on slate-500, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind slate-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-slate-500: oklch(55.4% 0.046 257.417); #62748e is its conversion to sRGB.

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

No. The nearest CSS named color is slategray (#708090), 0.042 away in OKLab.

Sources