RecolorOpen Recolor

A vivid medium pink, black text passes AA

Tailwind pink-500

The hex code of Tailwind pink-500 is #f6339a (rgb(246 51 154)), from its Tailwind CSS 4.3.3 value oklch(65.6% 0.241 354.308). Black text on it reaches 5.86:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#f6339apink-500
From the theme file of Tailwind CSS 4.3.3 (--color-pink-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(65.6% 0.241 354.308)
Hex#f6339a
RGBrgb(246 51 154)
HSLhsl(328 92% 58%)
CSS variablevar(--color-pink-500)
Nearest CSS namedeeppink #ff1493, 0.024 away in OKLab
White text3.58:1: AA fails, AAA fails, large text passes
Black text5.86:1: AA passes, AAA fails, large text passes

About pink-500

Read as numbers, pink-500 is lightness 65.6%, chroma 0.241 and hue 354.3 degrees; read by eye, it is a vivid medium pink. Its neighbors on the pink scale are pink-400, 6.2 points lighter, and pink-600, 6.4 points darker.

HSL calls its lightness 58%, OKLCH 65.6%: 7 points between a formula and a measure of what the eye sees. No gamut mapping is needed here: oklch(65.6% 0.241 354.308) sits inside sRGB and #f6339a matches it.

Black is the ink for pink-500: 5.86:1 passes AA for body text, where white stops at 3.58:1. Black text passes on every pink shade from pink-50 to pink-600, 1 shade darker than pink-500.

Of the named colors, deeppink (#ff1493) is the nearest, 0.024 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #ffe2ee
  2. #ffc4dc
  3. #ffa5cb
  4. #ff85bb
  5. #fc62aa
  6. #f6339a
  7. #c12678
  8. #8f1957
  9. #5f0d39
  10. #34041d
  11. #0e0105

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. #f6339a
  2. #ffd2e5
  3. #00241e
  4. #d89fb7
  5. #006047

Around pink-500 as swatch 1, Recolor's generator made a complementary palette, built on the hue opposite: #ffd2e5, #00241e, #d89fb7, #006047, drawn from a seed fixed by its hex. Open it in Recolor.

Using pink-500

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

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

Common questions

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

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

Is Tailwind pink-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-pink-500: oklch(65.6% 0.241 354.308); #f6339a is its conversion to sRGB.

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

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

Sources