RecolorOpen Recolor

A dark gray, white text passes AA

Tailwind neutral-700

Tailwind neutral-700 is oklch(37.1% 0 none) in Tailwind CSS 4.3.3, which is #404040 in hex and rgb(64 64 64). White text on it reaches 10.37:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#404040neutral-700
From the theme file of Tailwind CSS 4.3.3 (--color-neutral-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(37.1% 0 none)
Hex#404040
RGBrgb(64 64 64)
HSLhsl(0 0% 25%)
CSS variablevar(--color-neutral-700)
Nearest CSS namedarkslategray #2f4f4f, 0.049 away in OKLab
White text10.37:1: AA passes, AAA passes, large text passes
Black text2.03:1: AA fails, AAA fails, large text fails

About neutral-700

Tailwind neutral-700 is a dark gray: OKLCH lightness 37.1%, chroma 0.000, no hue. On Tailwind's neutral scale it sits between neutral-600 at 43.9% and neutral-800 at 26.9%.

Its lightness is 25% in HSL and 37.1% in OKLCH, 12 points apart; only the second tracks how light it looks. Its value fits inside sRGB, so #404040 is the same color, not an approximation.

White text on neutral-700 measures 10.37:1, past the 7:1 of WCAG AAA, while black text manages only 2.03:1. On the neutral scale white text works from neutral-500 to neutral-950; neutral-700 has 2 shades of margin.

The closest CSS named color is darkslategray (#2f4f4f), 0.049 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #dcdcdc
  2. #bbbbbb
  3. #9a9a9a
  4. #7a7a7a
  5. #5c5c5c
  6. #404040
  7. #303030
  8. #212121
  9. #131313
  10. #060606
  11. #010101

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. #404040
  2. #cdfadd
  3. #be72aa
  4. #18251d
  5. #a6baa8

Recolor's generator, with neutral-700 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #cdfadd, #be72aa, #18251d, #a6baa8. Open it in Recolor.

Using neutral-700

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

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

Common questions

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

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

Is Tailwind neutral-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-neutral-700: oklch(37.1% 0 none); #404040 is its conversion to sRGB.

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

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

Sources