RecolorOpen Recolor

A grayish dark blue, white text passes AA

Tailwind slate-700

Tailwind slate-700 is oklch(37.2% 0.044 257.287) in Tailwind CSS 4.3.3, which is #314158 in hex and rgb(49 65 88). White text on it reaches 10.36:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#314158slate-700
From the theme file of Tailwind CSS 4.3.3 (--color-slate-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(37.2% 0.044 257.287)
Hex#314158
RGBrgb(49 65 88)
HSLhsl(215 28% 27%)
CSS variablevar(--color-slate-700)
Nearest CSS namedarkslategray #2f4f4f, 0.053 away in OKLab
White text10.36:1: AA passes, AAA passes, large text passes
Black text2.03:1: AA fails, AAA fails, large text fails

About slate-700

Tailwind slate-700 is a grayish dark blue: OKLCH lightness 37.2%, chroma 0.044, hue 257.3 degrees. On Tailwind's slate scale it sits between slate-600 at 44.6% and slate-800 at 27.9%.

HSL calls its lightness 27%, OKLCH 37.2%: 10 points between a formula and a measure of what the eye sees. Its value fits inside sRGB, so #314158 is the same color, not an approximation.

White text on slate-700 measures 10.36:1, past the 7:1 of WCAG AAA, while black text manages only 2.03:1. White text passes on every slate shade from slate-500 down, so slate-700 is 2 shades past the line.

The nearest CSS named color, darkslategray (#2f4f4f), is 0.053 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #d9dde1
  2. #b5bbc5
  3. #929ba8
  4. #707c8d
  5. #4f5e72
  6. #314158
  7. #243143
  8. #18222f
  9. #0c131d
  10. #04060c
  11. #000101

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. #314158
  2. #e5aba9
  3. #30222f
  4. #f9edc5
  5. #69836d

Recolor's generator, with slate-700 locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #e5aba9, #30222f, #f9edc5, #69836d. Open it in Recolor.

Using slate-700

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

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

Common questions

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

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

Is Tailwind slate-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-slate-700: oklch(37.2% 0.044 257.287); #314158 is its conversion to sRGB.

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

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

Sources