RecolorOpen Recolor

A vivid light blue, black text passes AA

Tailwind blue-200

Tailwind blue-200 is oklch(88.2% 0.059 254.128) in Tailwind CSS 4.3.3, which is #bedbff as the nearest sRGB hex and rgb(190 219 255). Black text on it reaches 14.77:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#bedbffblue-200
From the theme file of Tailwind CSS 4.3.3 (--color-blue-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(88.2% 0.059 254.128)
Hex#bedbff, the nearest color in sRGB
RGBrgb(190 219 255)
HSLhsl(213 100% 87%)
OKLCH of the hexoklch(88.2% 0.059 254.0)
CSS variablevar(--color-blue-200)
Nearest CSS namelightblue #add8e6, 0.042 away in OKLab
White text1.42:1: AA fails, AAA fails, large text fails
Black text14.77:1: AA passes, AAA passes, large text passes

About blue-200

Tailwind blue-200 is a vivid light blue: OKLCH lightness 88.2%, chroma 0.059, hue 254.1 degrees. On Tailwind's blue scale it sits between blue-100 at 93.2% and blue-300 at 80.9%.

HSL and OKLCH agree on how light it is, 87% and 88.2%. Its value lies outside sRGB, the colors a hex code can name: #bedbff is what CSS Color 4's gamut mapping makes of it, chroma 0.059 instead of 0.059, moving 0.0 points of lightness and 0.2 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on blue-200 measures 14.77:1, past the 7:1 of WCAG AAA, while white text manages only 1.42:1. Black text passes on every blue shade from blue-50 to blue-500, 3 shades darker than blue-200.

The closest CSS named color is lightblue (#add8e6), 0.042 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #f4f9ff
  2. #e9f3ff
  3. #deedff
  4. #d4e7ff
  5. #c9e1ff
  6. #bedbff
  7. #94acc8
  8. #6d7e94
  9. #485463
  10. #262d36
  11. #080b0f

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. #bedbff
  2. #4b8ad5
  3. #182415
  4. #9ab4da
  5. #785154

Recolor's generator, with blue-200 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #4b8ad5, #182415, #9ab4da, #785154. Open it in Recolor.

Using blue-200

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

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

Common questions

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

No. White text measures 1.42:1 on blue-200, under AA's 4.5:1; black text measures 14.77:1 and passes. The lightest blue shade for white text is blue-600.

Is Tailwind blue-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-blue-200: oklch(88.2% 0.059 254.128); #bedbff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is lightblue (#add8e6), 0.042 away in OKLab.

Sources