RecolorOpen Recolor

A vivid medium blue, black text passes AA

Tailwind sky-500

The hex code of Tailwind sky-500 is #00a6f4 (rgb(0 166 244)), from its Tailwind CSS 4.3.3 value oklch(68.5% 0.169 237.323). Black text on it reaches 7.76:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#00a6f4sky-500
From the theme file of Tailwind CSS 4.3.3 (--color-sky-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(68.5% 0.169 237.323)
Hex#00a6f4, the nearest color in sRGB
RGBrgb(0 166 244)
HSLhsl(199 100% 48%)
OKLCH of the hexoklch(69.2% 0.160 240.4)
CSS variablevar(--color-sky-500)
Nearest CSS namecornflowerblue #6495ed, 0.060 away in OKLab
White text2.71:1: AA fails, AAA fails, large text fails
Black text7.76:1: AA passes, AAA passes, large text passes

About sky-500

Read as numbers, sky-500 is lightness 68.5%, chroma 0.169 and hue 237.3 degrees; read by eye, it is a vivid medium blue. Its neighbors on the sky scale are sky-400, 6.1 points lighter, and sky-600, 9.7 points darker.

HSL puts its lightness at 48% and OKLCH at 68.5%, 21 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. A hex code cannot hold sky-500 exactly: the value is outside sRGB, and #00a6f4 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.009, 0.7 points of lightness and 3.1 degrees of hue away from the value.

Black on sky-500 reads at 7.76:1, enough for AAA body text; white reaches 2.71:1 and should stay off it. Black text passes on every sky shade from sky-50 to sky-600, 1 shade darker than sky-500.

The nearest CSS named color, cornflowerblue (#6495ed), is 0.060 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #dff1ff
  2. #bee3fe
  3. #9dd4fc
  4. #7ac5fa
  5. #51b6f7
  6. #00a6f4
  7. #0081bf
  8. #005e8d
  9. #003e5e
  10. #002033
  11. #00060d

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. #00a6f4
  2. #0d2436
  3. #88d0fd
  4. #005e98
  5. #ffe6ce

Around sky-500 as swatch 1, Recolor's generator made a complementary palette, built on the hue opposite: #0d2436, #88d0fd, #005e98, #ffe6ce, drawn from a seed fixed by its hex. Open it in Recolor.

Using sky-500

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

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

Common questions

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

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

Is Tailwind sky-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-sky-500: oklch(68.5% 0.169 237.323); #00a6f4 is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources