RecolorOpen Recolor

A vivid light pink, black text passes AA

Tailwind pink-300

Tailwind pink-300 is oklch(82.3% 0.12 346.018) in Tailwind CSS 4.3.3, which is #fda5d5 in hex and rgb(253 165 213). Black text on it reaches 11.52:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#fda5d5pink-300
From the theme file of Tailwind CSS 4.3.3 (--color-pink-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(82.3% 0.12 346.018)
Hex#fda5d5
RGBrgb(253 165 213)
HSLhsl(327 96% 82%)
CSS variablevar(--color-pink-300)
Nearest CSS nameplum #dda0dd, 0.056 away in OKLab
White text1.82:1: AA fails, AAA fails, large text fails
Black text11.52:1: AA passes, AAA passes, large text passes

About pink-300

Tailwind pink-300 is a vivid light pink: OKLCH lightness 82.3%, chroma 0.120, hue 346.0 degrees. On Tailwind's pink scale it sits between pink-200 at 89.9% and pink-400 at 71.8%.

HSL and OKLCH agree on how light it is, 82% and 82.3%. Its value fits inside sRGB, so #fda5d5 is the same color, not an approximation.

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

The nearest CSS named color, plum (#dda0dd), is 0.056 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #fff0f8
  2. #ffe1f1
  3. #ffd2ea
  4. #ffc4e3
  5. #ffb4dc
  6. #fda5d5
  7. #c781a7
  8. #935e7b
  9. #623d51
  10. #361f2b
  11. #0e060a

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. #fda5d5
  2. #426956
  3. #ffe5fb
  4. #1f9d6e
  5. #3f1c2c

Recolor's generator, with pink-300 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #426956, #ffe5fb, #1f9d6e, #3f1c2c. Open it in Recolor.

Using pink-300

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

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

Common questions

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

No. White text measures 1.82:1 on pink-300, under AA's 4.5:1; black text measures 11.52:1 and passes. The lightest pink shade for white text is pink-600.

Is Tailwind pink-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-pink-300: oklch(82.3% 0.12 346.018); #fda5d5 is its conversion to sRGB.

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

No. The nearest CSS named color is plum (#dda0dd), 0.056 away in OKLab.

Sources