RecolorOpen Recolor

A vivid medium blue, black text passes AA

Tailwind sky-400

In Tailwind CSS 4.3.3, sky-400 is defined as oklch(74.6% 0.16 232.661); as the nearest sRGB hex that is #00bcff, or rgb(0 188 255). Black text on it reaches 9.64:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#00bcffsky-400
From the theme file of Tailwind CSS 4.3.3 (--color-sky-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(74.6% 0.16 232.661)
Hex#00bcff, the nearest color in sRGB
RGBrgb(0 188 255)
HSLhsl(196 100% 50%)
OKLCH of the hexoklch(74.8% 0.155 233.3)
CSS variablevar(--color-sky-400)
Nearest CSS namedeepskyblue #00bfff, 0.008 away in OKLab
White text2.18:1: AA fails, AAA fails, large text fails
Black text9.64:1: AA passes, AAA passes, large text passes

About sky-400

In OKLCH, sky-400 has a lightness of 74.6%, a chroma of 0.160 and a hue of 232.7 degrees, which makes it a vivid medium blue. The step up to sky-300 is 8.2 points of lightness, and the step down to sky-500 6.1 points.

Its HSL lightness, 50%, says little about how light sky-400 looks; OKLCH, made to match the eye, measures 74.6%, 25 points away. Sky-400 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #00bcff, gives up 0.005 of chroma and moves 0.2 points of lightness and 0.6 degrees of hue; a Display P3 screen shows the full value.

For text, sky-400 wants black: 9.64:1 clears even AAA's 7:1, and white at 2.18:1 fails AA. On the sky scale black text works down to sky-600, which leaves sky-400 2 shades of margin.

The CSS keyword deepskyblue (#00bfff) is almost the same color: 0.008 apart in OKLab, under the step most people notice.

Tints and shades

  1. #e1f5ff
  2. #c2eaff
  3. #a2dfff
  4. #80d4ff
  5. #57c8ff
  6. #00bcff
  7. #0093c8
  8. #006c94
  9. #004763
  10. #002536
  11. #00080f

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. #00bcff
  2. #006295
  3. #b4f1ff
  4. #5599c3
  5. #002e44

Locked as the first of five swatches, sky-400 gets #006295, #b4f1ff, #5599c3, #002e44 from Recolor's generator, a monochromatic palette, one hue in five lightnesses. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using sky-400

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

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

Common questions

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

No. White text measures 2.18:1 on sky-400, under AA's 4.5:1; black text measures 9.64:1 and passes. The lightest sky shade for white text is sky-700.

Is Tailwind sky-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-sky-400: oklch(74.6% 0.16 232.661); #00bcff is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: deepskyblue (#00bfff) is 0.008 away in OKLab, too close to tell apart by eye.

Sources