RecolorOpen Recolor

A very dark blue, white text passes AA

Tailwind blue-950

The hex code of Tailwind blue-950 is #162456 (rgb(22 36 86)), from its Tailwind CSS 4.3.3 value oklch(28.2% 0.091 267.935). White text on it reaches 14.78:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#162456blue-950
From the theme file of Tailwind CSS 4.3.3 (--color-blue-950), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(28.2% 0.091 267.935)
Hex#162456
RGBrgb(22 36 86)
HSLhsl(227 59% 21%)
CSS variablevar(--color-blue-950)
Nearest CSS namemidnightblue #191970, 0.053 away in OKLab
White text14.78:1: AA passes, AAA passes, large text passes
Black text1.42:1: AA fails, AAA fails, large text fails

About blue-950

Read as numbers, blue-950 is lightness 28.2%, chroma 0.091 and hue 267.9 degrees; read by eye, it is a very dark blue. It closes the blue scale as its darkest shade, 9.7 points of lightness below blue-900.

HSL calls its lightness 21%, OKLCH 28.2%: 7 points between a formula and a measure of what the eye sees. No gamut mapping is needed here: oklch(28.2% 0.091 267.935) sits inside sRGB and #162456 matches it.

White on blue-950 reads at 14.78:1, enough for AAA body text; black reaches 1.42:1 and should stay off it. White text passes on every blue shade from blue-600 down, so blue-950 is 4 shades past the line.

The nearest CSS named color, midnightblue (#191970), is 0.053 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #d3d7e2
  2. #a9b1c5
  3. #808ca9
  4. #5a688d
  5. #364672
  6. #162456
  7. #0f1a42
  8. #08102e
  9. #03071c
  10. #01020b
  11. #000001

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. #162456
  2. #747ea5
  3. #fce5b2
  4. #445f93
  5. #d6c49b

Around blue-950 as swatch 1, Recolor's generator made a complementary palette, built on the hue opposite: #747ea5, #fce5b2, #445f93, #d6c49b, drawn from a seed fixed by its hex. Open it in Recolor.

Using blue-950

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

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

Common questions

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

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

Is Tailwind blue-950 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-blue-950: oklch(28.2% 0.091 267.935); #162456 is its conversion to sRGB.

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

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

Sources