RecolorOpen Recolor

A vivid dark blue, white text passes AA

Tailwind sky-900

Tailwind sky-900 is oklch(39.1% 0.09 240.876) in Tailwind CSS 4.3.3, which is #024a70 in hex and rgb(2 74 112). White text on it reaches 9.48:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#024a70sky-900
From the theme file of Tailwind CSS 4.3.3 (--color-sky-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(39.1% 0.09 240.876)
Hex#024a70
RGBrgb(2 74 112)
HSLhsl(201 96% 22%)
CSS variablevar(--color-sky-900)
Nearest CSS namedarkslategray #2f4f4f, 0.069 away in OKLab
White text9.48:1: AA passes, AAA passes, large text passes
Black text2.22:1: AA fails, AAA fails, large text fails

About sky-900

Tailwind sky-900 is a vivid dark blue: OKLCH lightness 39.1%, chroma 0.090, hue 240.9 degrees. On Tailwind's sky scale it sits between sky-800 at 44.3% and sky-950 at 29.3%.

HSL puts its lightness at 22% and OKLCH at 39.1%, 17 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. Its value fits inside sRGB, so #024a70 is the same color, not an approximation.

White text on sky-900 measures 9.48:1, past the 7:1 of WCAG AAA, while black text manages only 2.22:1. White text passes on every sky shade from sky-700 down, so sky-900 is 2 shades past the line.

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

Tints and shades

  1. #d5dfe7
  2. #acc0ce
  3. #85a1b7
  4. #5e839f
  5. #366687
  6. #024a70
  7. #013856
  8. #01273e
  9. #001727
  10. #000812
  11. #000102

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. #024a70
  2. #c2e1f6
  3. #7c8937
  4. #31151d
  5. #f1b2c6

Recolor's generator, with sky-900 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #c2e1f6, #7c8937, #31151d, #f1b2c6. Open it in Recolor.

Using sky-900

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

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

Common questions

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

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

Is Tailwind sky-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-sky-900: oklch(39.1% 0.09 240.876); #024a70 is its conversion to sRGB.

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

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

Sources