RecolorOpen Recolor

A medium bluish gray, white text passes AA

Tailwind gray-500

The hex code of Tailwind gray-500 is #6a7282 (rgb(106 114 130)), from its Tailwind CSS 4.3.3 value oklch(55.1% 0.027 264.364). White text on it reaches 4.84:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#6a7282gray-500
From the theme file of Tailwind CSS 4.3.3 (--color-gray-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(55.1% 0.027 264.364)
Hex#6a7282
RGBrgb(106 114 130)
HSLhsl(220 10% 46%)
CSS variablevar(--color-gray-500)
Nearest CSS namedimgray #696969, 0.040 away in OKLab
White text4.84:1: AA passes, AAA fails, large text passes
Black text4.34:1: AA fails, AAA fails, large text passes

About gray-500

Read as numbers, gray-500 is lightness 55.1%, chroma 0.027 and hue 264.4 degrees; read by eye, it is a medium bluish gray. Its neighbors on the gray scale are gray-400, 15.6 points lighter, and gray-600, 10.5 points darker.

Its lightness is 46% in HSL and 55.1% in OKLCH, 9 points apart; only the second tracks how light it looks. No gamut mapping is needed here: oklch(55.1% 0.027 264.364) sits inside sRGB and #6a7282 matches it.

White is the ink for gray-500: 4.84:1 passes AA for body text, where black stops at 4.34:1. Going down the gray scale, white text first reaches AA here; one shade lighter, gray-400 gives it 2.60:1.

Of the named colors, dimgray (#696969) is the nearest, 0.040 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #e5e6e9
  2. #cbced4
  3. #b2b6bf
  4. #999faa
  5. #818896
  6. #6a7282
  7. #525865
  8. #3a3f49
  9. #24282f
  10. #101216
  11. #020303

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. #6a7282
  2. #212a1e
  3. #8cc7a5
  4. #296b4e
  5. #ddf7ef

Around gray-500 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #212a1e, #8cc7a5, #296b4e, #ddf7ef, drawn from a seed fixed by its hex. Open it in Recolor.

Using gray-500

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

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

Common questions

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

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

Is Tailwind gray-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-gray-500: oklch(55.1% 0.027 264.364); #6a7282 is its conversion to sRGB.

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

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

Sources