RecolorOpen Recolor

A dark warm gray, white text passes AA

Tailwind stone-600

Tailwind stone-600 is oklch(44.4% 0.011 73.639) in Tailwind CSS 4.3.3, which is #57534d in hex and rgb(87 83 77). White text on it reaches 7.64:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#57534dstone-600
From the theme file of Tailwind CSS 4.3.3 (--color-stone-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(44.4% 0.011 73.639)
Hex#57534d
RGBrgb(87 83 77)
HSLhsl(36 6% 32%)
CSS variablevar(--color-stone-600)
Nearest CSS namedarkslategray #2f4f4f, 0.060 away in OKLab
White text7.64:1: AA passes, AAA passes, large text passes
Black text2.75:1: AA fails, AAA fails, large text fails

About stone-600

Tailwind stone-600 is a dark warm gray: OKLCH lightness 44.4%, chroma 0.011, hue 73.6 degrees. On Tailwind's stone scale it sits between stone-500 at 55.3% and stone-700 at 37.4%.

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

White text on stone-600 measures 7.64:1, past the 7:1 of WCAG AAA, while black text manages only 2.75:1. On the stone scale white text works from stone-500 to stone-950; stone-600 has 1 shade of margin.

No CSS keyword matches it; darkslategray (#2f4f4f) is the nearest, 0.060 away in OKLab, a clear step off.

Tints and shades

  1. #e1e0e0
  2. #c4c1c2
  3. #a8a4a5
  4. #8d8789
  5. #736c6d
  6. #57534d
  7. #443e3f
  8. #302b2d
  9. #1d1a1b
  10. #0c0a0b
  11. #020101

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. #57534d
  2. #c9c4e0
  3. #091d15
  4. #d9d8f9
  5. #b08061

Recolor's generator, with stone-600 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #c9c4e0, #091d15, #d9d8f9, #b08061. Open it in Recolor.

Using stone-600

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

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

Common questions

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

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

Is Tailwind stone-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-stone-600: oklch(44.4% 0.011 73.639); #57534d is its conversion to sRGB.

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

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

Sources