RecolorOpen Recolor

A vivid medium blue, white text passes AA

Tailwind blue-600

In Tailwind CSS 4.3.3, blue-600 is defined as oklch(54.6% 0.245 262.881); in hex that is #155dfc, or rgb(21 93 252). White text on it reaches 5.25:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#155dfcblue-600
From the theme file of Tailwind CSS 4.3.3 (--color-blue-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(54.6% 0.245 262.881)
Hex#155dfc
RGBrgb(21 93 252)
HSLhsl(221 97% 54%)
CSS variablevar(--color-blue-600)
Nearest CSS nameroyalblue #4169e1, 0.060 away in OKLab
White text5.25:1: AA passes, AAA fails, large text passes
Black text4.00:1: AA fails, AAA fails, large text passes

About blue-600

In OKLCH, blue-600 has a lightness of 54.6%, a chroma of 0.245 and a hue of 262.9 degrees, which makes it a vivid medium blue. The step up to blue-500 is 7.7 points of lightness, and the step down to blue-700 5.8 points.

HSL and OKLCH agree on how light it is, 54% and 54.6%. The value lies inside sRGB, the gamut of a hex code, so blue-600 converts to #155dfc without losing chroma.

With white text, blue-600 passes AA at 5.25:1. Black text, at 4.00:1, does not. It is the lightest blue shade that carries white body text; blue-500 falls short at 3.76:1.

The nearest CSS named color, royalblue (#4169e1), is 0.060 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #d8e7ff
  2. #b1ceff
  3. #8bb4ff
  4. #669aff
  5. #407dff
  6. #155dfc
  7. #0e47c6
  8. #073292
  9. #031f62
  10. #010d35
  11. #00020e

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. #155dfc
  2. #ffe6e5
  3. #2c1211
  4. #9ebff4
  5. #254d84

Locked as the first of five swatches, blue-600 gets #ffe6e5, #2c1211, #9ebff4, #254d84 from Recolor's generator, a triadic palette, three hues a third of the wheel apart. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using blue-600

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

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

Common questions

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

Yes. White text measures 5.25:1 on blue-600, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind blue-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-blue-600: oklch(54.6% 0.245 262.881); #155dfc is its conversion to sRGB.

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

No. The nearest CSS named color is royalblue (#4169e1), 0.060 away in OKLab.

Sources