RecolorOpen Recolor

A very dark warm gray, white text passes AA

Tailwind stone-900

Tailwind stone-900 is oklch(21.6% 0.006 56.043) in Tailwind CSS 4.3.3, which is #1c1917 in hex and rgb(28 25 23). White text on it reaches 17.49:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#1c1917stone-900
From the theme file of Tailwind CSS 4.3.3 (--color-stone-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(21.6% 0.006 56.043)
Hex#1c1917
RGBrgb(28 25 23)
HSLhsl(24 10% 10%)
CSS variablevar(--color-stone-900)
Nearest CSS namemidnightblue #191970, 0.165 away in OKLab
White text17.49:1: AA passes, AAA passes, large text passes
Black text1.20:1: AA fails, AAA fails, large text fails

About stone-900

Tailwind stone-900 is a very dark warm gray: OKLCH lightness 21.6%, chroma 0.006, hue 56.0 degrees. On Tailwind's stone scale it sits between stone-800 at 26.8% and stone-950 at 14.7%.

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

White text on stone-900 measures 17.49:1, past the 7:1 of WCAG AAA, while black text manages only 1.20:1. White text passes on every stone shade from stone-500 down, so stone-900 is 4 shades past the line.

No CSS named color comes near it: the closest, midnightblue (#191970), is 0.165 away in OKLab.

Tints and shades

  1. #d4d4d4
  2. #abaaaa
  3. #848282
  4. #5f5c5d
  5. #3c3939
  6. #1c1917
  7. #141111
  8. #0b090a
  9. #050404
  10. #010101

From light to dark: 5 toward white and 4 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. #1c1917
  2. #b28092
  3. #b8feff
  4. #77543d
  5. #abd2d7

Recolor's generator, with stone-900 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #b28092, #b8feff, #77543d, #abd2d7. Open it in Recolor.

Using stone-900

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

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

Common questions

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

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

Is Tailwind stone-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-stone-900: oklch(21.6% 0.006 56.043); #1c1917 is its conversion to sRGB.

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

No. The nearest CSS named color is midnightblue (#191970), 0.165 away in OKLab.

Sources