RecolorOpen Recolor

A pale blue, black text passes AA

Tailwind blue-100

The hex code of Tailwind blue-100 is #dbeafe (rgb(219 234 254)), from its Tailwind CSS 4.3.3 value oklch(93.2% 0.032 255.585). Black text on it reaches 17.21:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#dbeafeblue-100
From the theme file of Tailwind CSS 4.3.3 (--color-blue-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(93.2% 0.032 255.585)
Hex#dbeafe
RGBrgb(219 234 254)
HSLhsl(214 95% 93%)
CSS variablevar(--color-blue-100)
Nearest CSS namelavender #e6e6fa, 0.016 away in OKLab
White text1.22:1: AA fails, AAA fails, large text fails
Black text17.21:1: AA passes, AAA passes, large text passes

About blue-100

Read as numbers, blue-100 is lightness 93.2%, chroma 0.032 and hue 255.6 degrees; read by eye, it is a pale blue. Its neighbors on the blue scale are blue-50, 3.8 points lighter, and blue-200, 5.0 points darker.

Here HSL's lightness, 93%, lands near OKLCH's 93.2%, which is not true of every color. No gamut mapping is needed here: oklch(93.2% 0.032 255.585) sits inside sRGB and #dbeafe matches it.

Black on blue-100 reads at 17.21:1, enough for AAA body text; white reaches 1.22:1 and should stay off it. On the blue scale black text works down to blue-500, which leaves blue-100 4 shades of margin.

The CSS keyword lavender (#e6e6fa) is almost the same color: 0.016 apart in OKLab, under the step most people notice.

Tints and shades

  1. #f9fcff
  2. #f3f8ff
  3. #edf5ff
  4. #e7f1fe
  5. #e1eefe
  6. #dbeafe
  7. #acb7c7
  8. #7e8793
  9. #545a63
  10. #2d3136
  11. #0b0c0f

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. #dbeafe
  2. #7984d1
  3. #1e1a2e
  4. #d0b4d8
  5. #733c66

Around blue-100 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #7984d1, #1e1a2e, #d0b4d8, #733c66, drawn from a seed fixed by its hex. Open it in Recolor.

Using blue-100

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

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

Common questions

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

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

Is Tailwind blue-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-blue-100: oklch(93.2% 0.032 255.585); #dbeafe is its conversion to sRGB.

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

Yes, nearly: lavender (#e6e6fa) is 0.016 away in OKLab, too close to tell apart by eye.

Sources