RecolorOpen Recolor

A pale blue, black text passes AA

Tailwind sky-100

In Tailwind CSS 4.3.3, sky-100 is defined as oklch(95.1% 0.026 236.824); in hex that is #dff2fe, or rgb(223 242 254). Black text on it reaches 18.27:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#dff2fesky-100
From the theme file of Tailwind CSS 4.3.3 (--color-sky-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(95.1% 0.026 236.824)
Hex#dff2fe
RGBrgb(223 242 254)
HSLhsl(203 94% 94%)
CSS variablevar(--color-sky-100)
Nearest CSS namealiceblue #f0f8ff, 0.028 away in OKLab
White text1.15:1: AA fails, AAA fails, large text fails
Black text18.27:1: AA passes, AAA passes, large text passes

About sky-100

In OKLCH, sky-100 has a lightness of 95.1%, a chroma of 0.026 and a hue of 236.8 degrees, which makes it a pale blue. The step up to sky-50 is 2.6 points of lightness, and the step down to sky-200 5.0 points.

HSL and OKLCH agree on how light it is, 94% and 95.1%. The value lies inside sRGB, the gamut of a hex code, so sky-100 converts to #dff2fe without losing chroma.

For text, sky-100 wants black: 18.27:1 clears even AAA's 7:1, and white at 1.15:1 fails AA. Black text passes on every sky shade from sky-50 to sky-600, 5 shades darker than sky-100.

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

Tints and shades

  1. #fafdff
  2. #f4fbff
  3. #eff9ff
  4. #eaf6fe
  5. #e4f4fe
  6. #dff2fe
  7. #afbec7
  8. #818c93
  9. #565e63
  10. #2e3336
  11. #0b0d0f

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. #dff2fe
  2. #9d6e7c
  3. #00271f
  4. #b6b2da
  5. #645e22

Locked as the first of five swatches, sky-100 gets #9d6e7c, #00271f, #b6b2da, #645e22 from Recolor's generator, a free palette, hues spread around the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using sky-100

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

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

Common questions

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

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

Is Tailwind sky-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-sky-100: oklch(95.1% 0.026 236.824); #dff2fe is its conversion to sRGB.

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

No. The nearest CSS named color is aliceblue (#f0f8ff), 0.028 away in OKLab.

Sources