RecolorOpen Recolor

A light bluish gray, black text passes AA

Tailwind gray-300

Tailwind gray-300 is oklch(87.2% 0.01 258.338) in Tailwind CSS 4.3.3, which is #d1d5dc in hex and rgb(209 213 220). Black text on it reaches 14.26:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#d1d5dcgray-300
From the theme file of Tailwind CSS 4.3.3 (--color-gray-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(87.2% 0.01 258.338)
Hex#d1d5dc
RGBrgb(209 213 220)
HSLhsl(218 14% 84%)
CSS variablevar(--color-gray-300)
Nearest CSS namelightgray #d3d3d3, 0.012 away in OKLab
White text1.47:1: AA fails, AAA fails, large text fails
Black text14.26:1: AA passes, AAA passes, large text passes

About gray-300

Tailwind gray-300 is a light bluish gray: OKLCH lightness 87.2%, chroma 0.010, hue 258.3 degrees. On Tailwind's gray scale it sits between gray-200 at 92.8% and gray-400 at 70.7%.

Here HSL's lightness, 84%, lands near OKLCH's 87.2%, which is not true of every color. Its value fits inside sRGB, so #d1d5dc is the same color, not an approximation.

Black text on gray-300 measures 14.26:1, past the 7:1 of WCAG AAA, while white text manages only 1.47:1. On the gray scale black text works down to gray-400, which leaves gray-300 1 shade of margin.

The CSS keyword lightgray (#d3d3d3) is almost the same color: 0.012 apart in OKLab, under the step most people notice.

Tints and shades

  1. #f9f7f8
  2. #f3f0f1
  3. #ede8ea
  4. #e7e1e2
  5. #e1d9db
  6. #d1d5dc
  7. #aca4a6
  8. #7e797a
  9. #545051
  10. #2d2b2b
  11. #0b0a0a

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. #d1d5dc
  2. #5a4486
  3. #afc157
  4. #2d2143
  5. #8a65c0

Recolor's generator, with gray-300 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #5a4486, #afc157, #2d2143, #8a65c0. Open it in Recolor.

Using gray-300

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

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

Common questions

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

No. White text measures 1.47:1 on gray-300, under AA's 4.5:1; black text measures 14.26:1 and passes. The lightest gray shade for white text is gray-500.

Is Tailwind gray-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-gray-300: oklch(87.2% 0.01 258.338); #d1d5dc is its conversion to sRGB.

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

Yes, nearly: lightgray (#d3d3d3) is 0.012 away in OKLab, too close to tell apart by eye.

Sources