RecolorOpen Recolor

A vivid light blue, black text passes AA

Tailwind sky-300

Tailwind sky-300 is oklch(82.8% 0.111 230.318) in Tailwind CSS 4.3.3, which is #74d4ff as the nearest sRGB hex and rgb(116 212 255). Black text on it reaches 12.60:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#74d4ffsky-300
From the theme file of Tailwind CSS 4.3.3 (--color-sky-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(82.8% 0.111 230.318)
Hex#74d4ff, the nearest color in sRGB
RGBrgb(116 212 255)
HSLhsl(199 100% 73%)
OKLCH of the hexoklch(82.7% 0.109 229.2)
CSS variablevar(--color-sky-300)
Nearest CSS namelightskyblue #87cefa, 0.021 away in OKLab
White text1.67:1: AA fails, AAA fails, large text fails
Black text12.60:1: AA passes, AAA passes, large text passes

About sky-300

Tailwind sky-300 is a vivid light blue: OKLCH lightness 82.8%, chroma 0.111, hue 230.3 degrees. On Tailwind's sky scale it sits between sky-200 at 90.1% and sky-400 at 74.6%.

HSL calls its lightness 73%, OKLCH 82.8%: 10 points between a formula and a measure of what the eye sees. Its value lies outside sRGB, the colors a hex code can name: #74d4ff is what CSS Color 4's gamut mapping makes of it, chroma 0.109 instead of 0.111, moving 0.1 points of lightness and 1.1 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on sky-300 measures 12.60:1, past the 7:1 of WCAG AAA, while white text manages only 1.67:1. Black text passes on every sky shade from sky-50 to sky-600, 3 shades darker than sky-300.

The closest CSS named color is lightskyblue (#87cefa), 0.021 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #eaf8ff
  2. #d4f1ff
  3. #beeaff
  4. #a7e3ff
  5. #8fdcff
  6. #74d4ff
  7. #5aa6c8
  8. #407a94
  9. #295163
  10. #132b36
  11. #030a0f

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. #74d4ff
  2. #0c2836
  3. #548299
  4. #c4e0ef
  5. #375765

Recolor's generator, with sky-300 locked as swatch 1 and the seed taken from its hex, drew a monochromatic palette, one hue in five lightnesses: #0c2836, #548299, #c4e0ef, #375765. Open it in Recolor.

Using sky-300

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

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

Common questions

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

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

Is Tailwind sky-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-sky-300: oklch(82.8% 0.111 230.318); #74d4ff is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources