RecolorOpen Recolor

A grayish dark blue, white text passes AA

Tailwind gray-600

Tailwind gray-600 is oklch(44.6% 0.03 256.802) in Tailwind CSS 4.3.3, which is #4a5565 in hex and rgb(74 85 101). White text on it reaches 7.56:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#4a5565gray-600
From the theme file of Tailwind CSS 4.3.3 (--color-gray-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(44.6% 0.03 256.802)
Hex#4a5565
RGBrgb(74 85 101)
HSLhsl(216 15% 34%)
CSS variablevar(--color-gray-600)
Nearest CSS namedarkslategray #2f4f4f, 0.056 away in OKLab
White text7.56:1: AA passes, AAA passes, large text passes
Black text2.78:1: AA fails, AAA fails, large text fails

About gray-600

Tailwind gray-600 is a grayish dark blue: OKLCH lightness 44.6%, chroma 0.030, hue 256.8 degrees. On Tailwind's gray scale it sits between gray-500 at 55.1% and gray-700 at 37.3%.

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

White text on gray-600 measures 7.56:1, past the 7:1 of WCAG AAA, while black text manages only 2.78:1. White text passes on every gray shade from gray-500 down, so gray-600 is 1 shade past the line.

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

Tints and shades

  1. #dee1e4
  2. #bfc3c9
  3. #a0a6af
  4. #828a96
  5. #656f7d
  6. #4a5565
  7. #38414e
  8. #272e37
  9. #171c22
  10. #080b0f
  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. #4a5565
  2. #d3c2af
  3. #251a0b
  4. #d4e2ca
  5. #7778b4

Recolor's generator, with gray-600 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #d3c2af, #251a0b, #d4e2ca, #7778b4. Open it in Recolor.

Using gray-600

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

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

Common questions

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

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

Is Tailwind gray-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-gray-600: oklch(44.6% 0.03 256.802); #4a5565 is its conversion to sRGB.

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

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

Sources