RecolorOpen Recolor

A light warm gray, black text passes AA

Tailwind stone-300

Tailwind stone-300 is oklch(86.9% 0.005 56.366) in Tailwind CSS 4.3.3, which is #d6d3d1 in hex and rgb(214 211 209). Black text on it reaches 14.10:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#d6d3d1stone-300
From the theme file of Tailwind CSS 4.3.3 (--color-stone-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(86.9% 0.005 56.366)
Hex#d6d3d1
RGBrgb(214 211 209)
HSLhsl(24 6% 83%)
CSS variablevar(--color-stone-300)
Nearest CSS namelightgray #d3d3d3, 0.005 away in OKLab
White text1.49:1: AA fails, AAA fails, large text fails
Black text14.10:1: AA passes, AAA passes, large text passes

About stone-300

Tailwind stone-300 is a light warm gray: OKLCH lightness 86.9%, chroma 0.005, hue 56.4 degrees. On Tailwind's stone scale it sits between stone-200 at 92.3% and stone-400 at 70.9%.

HSL and OKLCH agree on how light it is, 83% and 86.9%. Its value fits inside sRGB, so #d6d3d1 is the same color, not an approximation.

Black text on stone-300 measures 14.10:1, past the 7:1 of WCAG AAA, while white text manages only 1.49:1. Black text passes on every stone shade from stone-50 to stone-400, 1 shade darker than stone-300.

Its nearest CSS named color, lightgray (#d3d3d3), is 0.005 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #f8f7f8
  2. #f1f0f0
  3. #eae9e9
  4. #e4e1e2
  5. #dddadb
  6. #d6d3d1
  7. #a8a5a6
  8. #7c797a
  9. #525051
  10. #2c2b2b
  11. #0a0a0a

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. #d6d3d1
  2. #00617e
  3. #e8bbab
  4. #371d2e
  5. #6f75be

Recolor's generator, with stone-300 locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #00617e, #e8bbab, #371d2e, #6f75be. Open it in Recolor.

Using stone-300

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

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

Common questions

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

No. White text measures 1.49:1 on stone-300, under AA's 4.5:1; black text measures 14.10:1 and passes. The lightest stone shade for white text is stone-500.

Is Tailwind stone-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-stone-300: oklch(86.9% 0.005 56.366); #d6d3d1 is its conversion to sRGB.

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

Yes, nearly: lightgray (#d3d3d3) is 0.005 away in OKLab, too close to tell apart by eye.

Sources