RecolorOpen Recolor

A vivid medium pink, white text passes AA

Tailwind pink-700

In Tailwind CSS 4.3.3, pink-700 is defined as oklch(52.5% 0.223 3.958); as the nearest sRGB hex that is #c6005c, or rgb(198 0 92). White text on it reaches 5.91:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#c6005cpink-700
From the theme file of Tailwind CSS 4.3.3 (--color-pink-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(52.5% 0.223 3.958)
Hex#c6005c, the nearest color in sRGB
RGBrgb(198 0 92)
HSLhsl(332 100% 39%)
OKLCH of the hexoklch(53.2% 0.214 4.8)
CSS variablevar(--color-pink-700)
Nearest CSS namemediumvioletred #c71585, 0.062 away in OKLab
White text5.91:1: AA passes, AAA fails, large text passes
Black text3.56:1: AA fails, AAA fails, large text passes

About pink-700

In OKLCH, pink-700 has a lightness of 52.5%, a chroma of 0.223 and a hue of 4.0 degrees, which makes it a vivid medium pink. The step up to pink-600 is 6.7 points of lightness, and the step down to pink-800 6.6 points.

HSL calls its lightness 39%, OKLCH 52.5%: 14 points between a formula and a measure of what the eye sees. Pink-700 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #c6005c, gives up 0.009 of chroma and moves 0.7 points of lightness and 0.9 degrees of hue; a Display P3 screen shows the full value.

With white text, pink-700 passes AA at 5.91:1. Black text, at 3.56:1, does not. White text passes on every pink shade from pink-600 down, so pink-700 is 1 shade past the line.

The nearest CSS named color, mediumvioletred (#c71585), is 0.062 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #fbdce2
  2. #f5b9c6
  3. #ed96aa
  4. #e2718f
  5. #d54975
  6. #c6005c
  7. #9b0046
  8. #720032
  9. #4b001f
  10. #28000d
  11. #090002

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. #c6005c
  2. #e3b5bd
  3. #2d151c
  4. #5c918a
  5. #ffeaf2

Locked as the first of five swatches, pink-700 gets #e3b5bd, #2d151c, #5c918a, #ffeaf2 from Recolor's generator, a complementary palette, built on the hue opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using pink-700

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

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

Common questions

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

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

Is Tailwind pink-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-pink-700: oklch(52.5% 0.223 3.958); #c6005c is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is mediumvioletred (#c71585), 0.062 away in OKLab.

Sources