RecolorOpen Recolor

A light gray, black text passes AA

Tailwind neutral-300

The hex code of Tailwind neutral-300 is #d4d4d4 (rgb(212 212 212)), from its Tailwind CSS 4.3.3 value oklch(87% 0 none). Black text on it reaches 14.17:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#d4d4d4neutral-300
From the theme file of Tailwind CSS 4.3.3 (--color-neutral-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(87% 0 none)
Hex#d4d4d4
RGBrgb(212 212 212)
HSLhsl(0 0% 83%)
CSS variablevar(--color-neutral-300)
Nearest CSS namelightgray #d3d3d3, 0.003 away in OKLab
White text1.48:1: AA fails, AAA fails, large text fails
Black text14.17:1: AA passes, AAA passes, large text passes

About neutral-300

Read as numbers, neutral-300 is lightness 87.0%, chroma 0.000 and no hue; read by eye, it is a light gray. Its neighbors on the neutral scale are neutral-200, 5.2 points lighter, and neutral-400, 16.2 points darker.

Here HSL's lightness, 83%, lands near OKLCH's 87.0%, which is not true of every color. No gamut mapping is needed here: oklch(87% 0 none) sits inside sRGB and #d4d4d4 matches it.

Black on neutral-300 reads at 14.17:1, enough for AAA body text; white reaches 1.48:1 and should stay off it. On the neutral scale black text works down to neutral-400, which leaves neutral-300 1 shade of margin.

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

Tints and shades

  1. #f8f8f8
  2. #f1f1f1
  3. #e9e9e9
  4. #e2e2e2
  5. #dbdbdb
  6. #d4d4d4
  7. #a6a6a6
  8. #7a7a7a
  9. #515151
  10. #2b2b2b
  11. #0a0a0a

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. #d4d4d4
  2. #79516c
  3. #e2bbcf
  4. #430d23
  5. #c37374

Around neutral-300 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #79516c, #e2bbcf, #430d23, #c37374, drawn from a seed fixed by its hex. Open it in Recolor.

Using neutral-300

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

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

Common questions

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

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

Is Tailwind neutral-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-neutral-300: oklch(87% 0 none); #d4d4d4 is its conversion to sRGB.

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

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

Sources