RecolorOpen Recolor

A medium gray, white text passes AA

Tailwind neutral-500

In Tailwind CSS 4.3.3, neutral-500 is defined as oklch(55.6% 0 none); in hex that is #737373, or rgb(115 115 115). White text on it reaches 4.74:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#737373neutral-500
From the theme file of Tailwind CSS 4.3.3 (--color-neutral-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(55.6% 0 none)
Hex#737373
RGBrgb(115 115 115)
HSLhsl(0 0% 45%)
CSS variablevar(--color-neutral-500)
Nearest CSS namedimgray #696969, 0.035 away in OKLab
White text4.74:1: AA passes, AAA fails, large text passes
Black text4.43:1: AA fails, AAA fails, large text passes

About neutral-500

In OKLCH, neutral-500 has a lightness of 55.6%, a chroma of 0.000 and no hue, which makes it a medium gray. The step up to neutral-400 is 15.2 points of lightness, and the step down to neutral-600 11.7 points.

Its lightness is 45% in HSL and 55.6% in OKLCH, 11 points apart; only the second tracks how light it looks. The value lies inside sRGB, the gamut of a hex code, so neutral-500 converts to #737373 without losing chroma.

With white text, neutral-500 passes AA at 4.74:1. Black text, at 4.43:1, does not. Going down the neutral scale, white text first reaches AA here; one shade lighter, neutral-400 gives it 2.58:1.

Among the CSS keywords, dimgray (#696969) comes closest at 0.035 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #e6e6e6
  2. #cecece
  3. #b6b6b6
  4. #9f9f9f
  5. #898989
  6. #737373
  7. #595959
  8. #404040
  9. #282828
  10. #131313
  11. #030303

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. #737373
  2. #ffdcd9
  3. #695b1d
  4. #f1accc
  5. #0c1d2b

Locked as the first of five swatches, neutral-500 gets #ffdcd9, #695b1d, #f1accc, #0c1d2b from Recolor's generator, a free palette, hues spread around the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using neutral-500

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

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

Common questions

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

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

Is Tailwind neutral-500 defined in OKLCH?

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

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

No. The nearest CSS named color is dimgray (#696969), 0.035 away in OKLab.

Sources