RecolorOpen Recolor

A vivid medium blue, black text passes AA

Tailwind blue-500

Tailwind blue-500 is oklch(62.3% 0.214 259.815) in Tailwind CSS 4.3.3, which is #2b7fff as the nearest sRGB hex and rgb(43 127 255). Black text on it reaches 5.58:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#2b7fffblue-500
From the theme file of Tailwind CSS 4.3.3 (--color-blue-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(62.3% 0.214 259.815)
Hex#2b7fff, the nearest color in sRGB
RGBrgb(43 127 255)
HSLhsl(216 100% 58%)
OKLCH of the hexoklch(61.9% 0.207 259.2)
CSS variablevar(--color-blue-500)
Nearest CSS namedodgerblue #1e90ff, 0.043 away in OKLab
White text3.76:1: AA fails, AAA fails, large text passes
Black text5.58:1: AA passes, AAA fails, large text passes

About blue-500

Tailwind blue-500 is a vivid medium blue: OKLCH lightness 62.3%, chroma 0.214, hue 259.8 degrees. On Tailwind's blue scale it sits between blue-400 at 70.7% and blue-600 at 54.6%.

Here HSL's lightness, 58%, lands near OKLCH's 62.3%, which is not true of every color. Its value lies outside sRGB, the colors a hex code can name: #2b7fff is what CSS Color 4's gamut mapping makes of it, chroma 0.207 instead of 0.214, moving 0.4 points of lightness and 0.6 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on blue-500 reaches 5.58:1, enough for WCAG AA body text but short of AAA's 7:1; white text gets 3.76:1. Black text holds AA down to here on the blue scale; at blue-600 it falls to 4.00:1.

The closest CSS named color is dodgerblue (#1e90ff), 0.043 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #ddebff
  2. #bbd7ff
  3. #99c2ff
  4. #76adff
  5. #5397ff
  6. #2b7fff
  7. #1f62c8
  8. #144794
  9. #0a2d63
  10. #031636
  11. #00030f

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. #2b7fff
  2. #101d25
  3. #cae5ff
  4. #50588a
  5. #b5a7f3

Recolor's generator, with blue-500 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #101d25, #cae5ff, #50588a, #b5a7f3. Open it in Recolor.

Using blue-500

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

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

Common questions

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

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

Is Tailwind blue-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-blue-500: oklch(62.3% 0.214 259.815); #2b7fff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is dodgerblue (#1e90ff), 0.043 away in OKLab.

Sources