RecolorOpen Recolor

A dark blue, white text passes AA

Tailwind blue-800

Tailwind blue-800 is oklch(42.4% 0.199 265.638) in Tailwind CSS 4.3.3, which is #193cb8 in hex and rgb(25 60 184). White text on it reaches 8.82:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#193cb8blue-800
From the theme file of Tailwind CSS 4.3.3 (--color-blue-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(42.4% 0.199 265.638)
Hex#193cb8
RGBrgb(25 60 184)
HSLhsl(227 76% 41%)
CSS variablevar(--color-blue-800)
Nearest CSS namemediumblue #0000cd, 0.079 away in OKLab
White text8.82:1: AA passes, AAA passes, large text passes
Black text2.38:1: AA fails, AAA fails, large text fails

About blue-800

Tailwind blue-800 is a dark blue: OKLCH lightness 42.4%, chroma 0.199, hue 265.6 degrees. On Tailwind's blue scale it sits between blue-700 at 48.8% and blue-900 at 37.9%.

HSL and OKLCH agree on how light it is, 41% and 42.4%. Its value fits inside sRGB, so #193cb8 is the same color, not an approximation.

White text on blue-800 measures 8.82:1, past the 7:1 of WCAG AAA, while black text manages only 2.38:1. White text passes on every blue shade from blue-600 down, so blue-800 is 2 shades past the line.

The nearest CSS named color, mediumblue (#0000cd), is 0.079 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #d5e0f6
  2. #acc0ec
  3. #84a1e1
  4. #5e81d4
  5. #3a61c7
  6. #193cb8
  7. #112d90
  8. #091f69
  9. #041145
  10. #010624
  11. #000107

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. #193cb8
  2. #ffd5d3
  3. #b0605f
  4. #161c2b
  5. #9dd29c

Recolor's generator, with blue-800 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #ffd5d3, #b0605f, #161c2b, #9dd29c. Open it in Recolor.

Using blue-800

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

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

Common questions

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

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

Is Tailwind blue-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-blue-800: oklch(42.4% 0.199 265.638); #193cb8 is its conversion to sRGB.

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

No. The nearest CSS named color is mediumblue (#0000cd), 0.079 away in OKLab.

Sources