RecolorOpen Recolor

A dark blue, white text passes AA

Tailwind blue-900

In Tailwind CSS 4.3.3, blue-900 is defined as oklch(37.9% 0.146 265.522); in hex that is #1c398e, or rgb(28 57 142). White text on it reaches 10.37:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#1c398eblue-900
From the theme file of Tailwind CSS 4.3.3 (--color-blue-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(37.9% 0.146 265.522)
Hex#1c398e
RGBrgb(28 57 142)
HSLhsl(225 67% 33%)
CSS variablevar(--color-blue-900)
Nearest CSS namedarkslateblue #483d8b, 0.063 away in OKLab
White text10.37:1: AA passes, AAA passes, large text passes
Black text2.03:1: AA fails, AAA fails, large text fails

About blue-900

In OKLCH, blue-900 has a lightness of 37.9%, a chroma of 0.146 and a hue of 265.5 degrees, which makes it a dark blue. The step up to blue-800 is 4.5 points of lightness, and the step down to blue-950 9.7 points.

Here HSL's lightness, 33%, lands near OKLCH's 37.9%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so blue-900 converts to #1c398e without losing chroma.

For text, blue-900 wants white: 10.37:1 clears even AAA's 7:1, and black at 2.03:1 fails AA. On the blue scale white text works from blue-600 to blue-950; blue-900 has 3 shades of margin.

No CSS keyword matches it; darkslateblue (#483d8b) is the nearest, 0.063 away in OKLab, a clear step off.

Tints and shades

  1. #d5ddee
  2. #adbcdc
  3. #869bc9
  4. #607bb6
  5. #3d5aa2
  6. #1c398e
  7. #132b6e
  8. #0b1d50
  9. #051034
  10. #010519
  11. #000104

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. #1c398e
  2. #e3bc86
  3. #2b1a15
  4. #a1829c
  5. #bce7da

Locked as the first of five swatches, blue-900 gets #e3bc86, #2b1a15, #a1829c, #bce7da from Recolor's generator, a free palette, hues spread around the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using blue-900

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

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

Common questions

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

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

Is Tailwind blue-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-blue-900: oklch(37.9% 0.146 265.522); #1c398e is its conversion to sRGB.

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

No. The nearest CSS named color is darkslateblue (#483d8b), 0.063 away in OKLab.

Sources