RecolorOpen Recolor

A vivid very dark pink, white text passes AA

Tailwind pink-950

In Tailwind CSS 4.3.3, pink-950 is defined as oklch(28.4% 0.109 3.907); in hex that is #510424, or rgb(81 4 36). White text on it reaches 15.08:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#510424pink-950
From the theme file of Tailwind CSS 4.3.3 (--color-pink-950), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(28.4% 0.109 3.907)
Hex#510424
RGBrgb(81 4 36)
HSLhsl(335 91% 17%)
CSS variablevar(--color-pink-950)
Nearest CSS namemaroon #800000, 0.118 away in OKLab
White text15.08:1: AA passes, AAA passes, large text passes
Black text1.39:1: AA fails, AAA fails, large text fails

About pink-950

In OKLCH, pink-950 has a lightness of 28.4%, a chroma of 0.109 and a hue of 3.9 degrees, which makes it a vivid very dark pink. Pink-950 is the last and darkest of the eleven pink shades, 12.4 points under pink-900.

Its lightness is 17% in HSL and 28.4% in OKLCH, 12 points apart; only the second tracks how light it looks. The value lies inside sRGB, the gamut of a hex code, so pink-950 converts to #510424 without losing chroma.

For text, pink-950 wants white: 15.08:1 clears even AAA's 7:1, and black at 1.39:1 fails AA. On the pink scale white text works from pink-600 to pink-950; pink-950 has 4 shades of margin.

CSS has no keyword in its neighborhood; maroon (#800000) is the nearest, a long 0.118 away in OKLab.

Tints and shades

  1. #e3d3d6
  2. #c7a8af
  3. #aa7f89
  4. #8d5865
  5. #6f3143
  6. #510424
  7. #3e021a
  8. #2b0110
  9. #1a0107
  10. #0a0002
  11. #010000

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. #510424
  2. #fad1dd
  3. #d44c75
  4. #ff9fb9
  5. #7e3853

Locked as the first of five swatches, pink-950 gets #fad1dd, #d44c75, #ff9fb9, #7e3853 from Recolor's generator, a monochromatic palette, one hue in five lightnesses. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using pink-950

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

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

Common questions

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

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

Is Tailwind pink-950 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-pink-950: oklch(28.4% 0.109 3.907); #510424 is its conversion to sRGB.

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

No. The nearest CSS named color is maroon (#800000), 0.118 away in OKLab.

Sources