RecolorOpen Recolor

A vivid medium blue, black text passes AA

Tailwind blue-400

The hex code of Tailwind blue-400 is #51a2ff (rgb(81 162 255)), from its Tailwind CSS 4.3.3 value oklch(70.7% 0.165 254.624). Black text on it reaches 7.96:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#51a2ffblue-400
From the theme file of Tailwind CSS 4.3.3 (--color-blue-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(70.7% 0.165 254.624)
Hex#51a2ff, the nearest color in sRGB
RGBrgb(81 162 255)
HSLhsl(212 100% 66%)
OKLCH of the hexoklch(70.4% 0.158 253.6)
CSS variablevar(--color-blue-400)
Nearest CSS namecornflowerblue #6495ed, 0.039 away in OKLab
White text2.64:1: AA fails, AAA fails, large text fails
Black text7.96:1: AA passes, AAA passes, large text passes

About blue-400

Read as numbers, blue-400 is lightness 70.7%, chroma 0.165 and hue 254.6 degrees; read by eye, it is a vivid medium blue. Its neighbors on the blue scale are blue-300, 10.2 points lighter, and blue-500, 8.4 points darker.

HSL and OKLCH agree on how light it is, 66% and 70.7%. A hex code cannot hold blue-400 exactly: the value is outside sRGB, and #51a2ff is the CSS Color 4 gamut mapping of it, chroma lowered by 0.007, 0.3 points of lightness and 1.0 degrees of hue away from the value.

Black on blue-400 reads at 7.96:1, enough for AAA body text; white reaches 2.64:1 and should stay off it. Black text passes on every blue shade from blue-50 to blue-500, 1 shade darker than blue-400.

Of the named colors, cornflowerblue (#6495ed) is the nearest, 0.039 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #e3f0ff
  2. #c7e1ff
  3. #abd2ff
  4. #8ec2ff
  5. #71b2ff
  6. #51a2ff
  7. #3e7ec8
  8. #2b5c94
  9. #1a3c63
  10. #0a1f36
  11. #01060f

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. #51a2ff
  2. #05192f
  3. #def1ff
  4. #713f41
  5. #ddb2b2

Around blue-400 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #05192f, #def1ff, #713f41, #ddb2b2, drawn from a seed fixed by its hex. Open it in Recolor.

Using blue-400

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

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

Common questions

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

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

Is Tailwind blue-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-blue-400: oklch(70.7% 0.165 254.624); #51a2ff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is cornflowerblue (#6495ed), 0.039 away in OKLab.

Sources