RecolorOpen Recolor

A vivid medium pink, black and white text both pass AA

Tailwind pink-600

Tailwind pink-600 is oklch(59.2% 0.249 0.584) in Tailwind CSS 4.3.3, which is #e60076 as the nearest sRGB hex and rgb(230 0 118). Black text on it reaches 4.63:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#e60076pink-600
From the theme file of Tailwind CSS 4.3.3 (--color-pink-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(59.2% 0.249 0.584)
Hex#e60076, the nearest color in sRGB
RGBrgb(230 0 118)
HSLhsl(329 100% 45%)
OKLCH of the hexoklch(59.8% 0.242 1.4)
CSS variablevar(--color-pink-600)
Nearest CSS namedeeppink #ff1493, 0.063 away in OKLab
White text4.54:1: AA passes, AAA fails, large text passes
Black text4.63:1: AA passes, AAA fails, large text passes

About pink-600

Tailwind pink-600 is a vivid medium pink: OKLCH lightness 59.2%, chroma 0.249, hue 0.6 degrees. On Tailwind's pink scale it sits between pink-500 at 65.6% and pink-700 at 52.5%.

Its lightness is 45% in HSL and 59.2% in OKLCH, 14 points apart; only the second tracks how light it looks. Its value lies outside sRGB, the colors a hex code can name: #e60076 is what CSS Color 4's gamut mapping makes of it, chroma 0.242 instead of 0.249, moving 0.6 points of lightness and 0.8 degrees of hue. A wide-gamut screen shows the stronger original.

Either ink works for body text on pink-600: black measures 4.63:1 and white 4.54:1, both just over the AA line of 4.5:1. On the pink scale this is the one shade that suits both inks; a step lighter only black works, a step darker only white.

No CSS keyword matches it; deeppink (#ff1493) is the nearest, 0.063 away in OKLab, a clear step off.

Tints and shades

  1. #ffdee7
  2. #ffbdcf
  3. #fd9cb8
  4. #f878a1
  5. #f04f8b
  6. #e60076
  7. #b4005b
  8. #850042
  9. #590029
  10. #300013
  11. #0c0003

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. #e60076
  2. #ffe5ee
  3. #00251d
  4. #88d9c9
  5. #923352

Recolor's generator, with pink-600 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #ffe5ee, #00251d, #88d9c9, #923352. Open it in Recolor.

Using pink-600

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

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

Common questions

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

Yes. White text measures 4.54:1 on pink-600, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind pink-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-pink-600: oklch(59.2% 0.249 0.584); #e60076 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is deeppink (#ff1493), 0.063 away in OKLab.

Sources