RecolorOpen Recolor

A grayish dark blue, white text passes AA

Tailwind slate-600

The hex code of Tailwind slate-600 is #45556c (rgb(69 85 108)), from its Tailwind CSS 4.3.3 value oklch(44.6% 0.043 257.281). White text on it reaches 7.58:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#45556cslate-600
From the theme file of Tailwind CSS 4.3.3 (--color-slate-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(44.6% 0.043 257.281)
Hex#45556c
RGBrgb(69 85 108)
HSLhsl(215 22% 35%)
CSS variablevar(--color-slate-600)
Nearest CSS namedarkslategray #2f4f4f, 0.059 away in OKLab
White text7.58:1: AA passes, AAA passes, large text passes
Black text2.77:1: AA fails, AAA fails, large text fails

About slate-600

Read as numbers, slate-600 is lightness 44.6%, chroma 0.043 and hue 257.3 degrees; read by eye, it is a grayish dark blue. Its neighbors on the slate scale are slate-500, 10.8 points lighter, and slate-700, 7.4 points darker.

Its lightness is 35% in HSL and 44.6% in OKLCH, 10 points apart; only the second tracks how light it looks. No gamut mapping is needed here: oklch(44.6% 0.043 257.281) sits inside sRGB and #45556c matches it.

White on slate-600 reads at 7.58:1, enough for AAA body text; black reaches 2.77:1 and should stay off it. On the slate scale white text works from slate-500 to slate-950; slate-600 has 1 shade of margin.

No CSS keyword matches it; darkslategray (#2f4f4f) is the nearest, 0.059 away in OKLab, a clear step off.

Tints and shades

  1. #dde1e5
  2. #bdc3cc
  3. #9da6b3
  4. #7f8a9b
  5. #616f83
  6. #45556c
  7. #344153
  8. #242e3b
  9. #151c25
  10. #070b11
  11. #010102

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. #45556c
  2. #6fc0f9
  3. #071938
  4. #e8edff
  5. #9887b5

Around slate-600 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #6fc0f9, #071938, #e8edff, #9887b5, drawn from a seed fixed by its hex. Open it in Recolor.

Using slate-600

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

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

Common questions

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

Yes. White text measures 7.58:1 on slate-600, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind slate-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-slate-600: oklch(44.6% 0.043 257.281); #45556c is its conversion to sRGB.

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

No. The nearest CSS named color is darkslategray (#2f4f4f), 0.059 away in OKLab.

Sources