RecolorOpen Recolor

A vivid dark pink, white text passes AA

Tailwind pink-800

The hex code of Tailwind pink-800 is #a3004c (rgb(163 0 76)), from its Tailwind CSS 4.3.3 value oklch(45.9% 0.187 3.815). White text on it reaches 7.89:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#a3004cpink-800
From the theme file of Tailwind CSS 4.3.3 (--color-pink-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(45.9% 0.187 3.815)
Hex#a3004c, the nearest color in sRGB
RGBrgb(163 0 76)
HSLhsl(332 100% 32%)
OKLCH of the hexoklch(46.1% 0.185 4.1)
CSS variablevar(--color-pink-800)
Nearest CSS namebrown #a52a2a, 0.072 away in OKLab
White text7.89:1: AA passes, AAA passes, large text passes
Black text2.66:1: AA fails, AAA fails, large text fails

About pink-800

Read as numbers, pink-800 is lightness 45.9%, chroma 0.187 and hue 3.8 degrees; read by eye, it is a vivid dark pink. Its neighbors on the pink scale are pink-700, 6.6 points lighter, and pink-900, 5.1 points darker.

Its lightness is 32% in HSL and 45.9% in OKLCH, 14 points apart; only the second tracks how light it looks. A hex code cannot hold pink-800 exactly: the value is outside sRGB, and #a3004c is the CSS Color 4 gamut mapping of it, chroma lowered by 0.002, 0.2 points of lightness and 0.3 degrees of hue away from the value.

White on pink-800 reads at 7.89:1, enough for AAA body text; black reaches 2.66:1 and should stay off it. On the pink scale white text works from pink-600 to pink-950; pink-800 has 2 shades of margin.

No CSS keyword matches it; brown (#a52a2a) is the nearest, 0.072 away in OKLab, a clear step off.

Tints and shades

  1. #f4d9df
  2. #e8b4bf
  3. #da8fa1
  4. #c96a83
  5. #b74267
  6. #a3004c
  7. #7f003a
  8. #5d0028
  9. #3c0018
  10. #1f0009
  11. #060001

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. #a3004c
  2. #d3bbc5
  3. #322527
  4. #ab7f79
  5. #ffd1ba

Around pink-800 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #d3bbc5, #322527, #ab7f79, #ffd1ba, drawn from a seed fixed by its hex. Open it in Recolor.

Using pink-800

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

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

Common questions

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

Yes. White text measures 7.89:1 on pink-800, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind pink-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-pink-800: oklch(45.9% 0.187 3.815); #a3004c is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is brown (#a52a2a), 0.072 away in OKLab.

Sources