RecolorOpen Recolor

A vivid light blue, black text passes AA

Tailwind blue-300

In Tailwind CSS 4.3.3, blue-300 is defined as oklch(80.9% 0.105 251.813); as the nearest sRGB hex that is #8ec5ff, or rgb(142 197 255). Black text on it reaches 11.58:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#8ec5ffblue-300
From the theme file of Tailwind CSS 4.3.3 (--color-blue-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(80.9% 0.105 251.813)
Hex#8ec5ff, the nearest color in sRGB
RGBrgb(142 197 255)
HSLhsl(211 100% 78%)
OKLCH of the hexoklch(80.7% 0.101 250.4)
CSS variablevar(--color-blue-300)
Nearest CSS namelightskyblue #87cefa, 0.028 away in OKLab
White text1.81:1: AA fails, AAA fails, large text fails
Black text11.58:1: AA passes, AAA passes, large text passes

About blue-300

In OKLCH, blue-300 has a lightness of 80.9%, a chroma of 0.105 and a hue of 251.8 degrees, which makes it a vivid light blue. The step up to blue-200 is 7.3 points of lightness, and the step down to blue-400 10.2 points.

Here HSL's lightness, 78%, lands near OKLCH's 80.9%, which is not true of every color. Blue-300 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #8ec5ff, gives up 0.004 of chroma and moves 0.2 points of lightness and 1.4 degrees of hue; a Display P3 screen shows the full value.

For text, blue-300 wants black: 11.58:1 clears even AAA's 7:1, and white at 1.81:1 fails AA. On the blue scale black text works down to blue-500, which leaves blue-300 2 shades of margin.

Among the CSS keywords, lightskyblue (#87cefa) comes closest at 0.028 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #ecf6ff
  2. #daecff
  3. #c7e2ff
  4. #b4d9ff
  5. #a1cfff
  6. #8ec5ff
  7. #6e9ac8
  8. #507194
  9. #344b63
  10. #192736
  11. #04090f

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. #8ec5ff
  2. #174c8a
  3. #fdefaa
  4. #0f2b45
  5. #d75716

Locked as the first of five swatches, blue-300 gets #174c8a, #fdefaa, #0f2b45, #d75716 from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using blue-300

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

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

Common questions

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

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

Is Tailwind blue-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-blue-300: oklch(80.9% 0.105 251.813); #8ec5ff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is lightskyblue (#87cefa), 0.028 away in OKLab.

Sources