RecolorOpen Recolor

A vivid medium pink, black text passes AA

Tailwind pink-400

In Tailwind CSS 4.3.3, pink-400 is defined as oklch(71.8% 0.202 349.761); in hex that is #fb64b6, or rgb(251 100 182). Black text on it reaches 7.60:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#fb64b6pink-400
From the theme file of Tailwind CSS 4.3.3 (--color-pink-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(71.8% 0.202 349.761)
Hex#fb64b6
RGBrgb(251 100 182)
HSLhsl(327 95% 69%)
CSS variablevar(--color-pink-400)
Nearest CSS namehotpink #ff69b4, 0.014 away in OKLab
White text2.76:1: AA fails, AAA fails, large text fails
Black text7.60:1: AA passes, AAA passes, large text passes

About pink-400

In OKLCH, pink-400 has a lightness of 71.8%, a chroma of 0.202 and a hue of 349.8 degrees, which makes it a vivid medium pink. The step up to pink-300 is 10.5 points of lightness, and the step down to pink-500 6.2 points.

Here HSL's lightness, 69%, lands near OKLCH's 71.8%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so pink-400 converts to #fb64b6 without losing chroma.

For text, pink-400 wants black: 7.60:1 clears even AAA's 7:1, and white at 2.76:1 fails AA. On the pink scale black text works down to pink-600, which leaves pink-400 2 shades of margin.

The CSS keyword hotpink (#ff69b4) is almost the same color: 0.014 apart in OKLab, under the step most people notice.

Tints and shades

  1. #ffe7f3
  2. #ffcee6
  3. #ffb6da
  4. #ff9cce
  5. #ff81c2
  6. #fb64b6
  7. #c54d8e
  8. #923768
  9. #612244
  10. #350f24
  11. #0e0207

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. #fb64b6
  2. #391e2c
  3. #719870
  4. #74f3fe
  5. #416d33

Locked as the first of five swatches, pink-400 gets #391e2c, #719870, #74f3fe, #416d33 from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using pink-400

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

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

Common questions

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

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

Is Tailwind pink-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-pink-400: oklch(71.8% 0.202 349.761); #fb64b6 is its conversion to sRGB.

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

Yes, nearly: hotpink (#ff69b4) is 0.014 away in OKLab, too close to tell apart by eye.

Sources