RecolorOpen Recolor

A vivid dark pink, white text passes AA

Tailwind pink-900

Tailwind pink-900 is oklch(40.8% 0.153 2.432) in Tailwind CSS 4.3.3, which is #861043 in hex and rgb(134 16 67). White text on it reaches 9.68:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#861043pink-900
From the theme file of Tailwind CSS 4.3.3 (--color-pink-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(40.8% 0.153 2.432)
Hex#861043
RGBrgb(134 16 67)
HSLhsl(334 79% 29%)
CSS variablevar(--color-pink-900)
Nearest CSS namedarkred #8b0000, 0.075 away in OKLab
White text9.68:1: AA passes, AAA passes, large text passes
Black text2.17:1: AA fails, AAA fails, large text fails

About pink-900

Tailwind pink-900 is a vivid dark pink: OKLCH lightness 40.8%, chroma 0.153, hue 2.4 degrees. On Tailwind's pink scale it sits between pink-800 at 45.9% and pink-950 at 28.4%.

HSL calls its lightness 29%, OKLCH 40.8%: 11 points between a formula and a measure of what the eye sees. Its value fits inside sRGB, so #861043 is the same color, not an approximation.

White text on pink-900 measures 9.68:1, past the 7:1 of WCAG AAA, while black text manages only 2.17:1. White text passes on every pink shade from pink-600 down, so pink-900 is 3 shades past the line.

The nearest CSS named color, darkred (#8b0000), is 0.075 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #eed8dd
  2. #dcb1bc
  3. #c98c9c
  4. #b4677d
  5. #9e405f
  6. #861043
  7. #680a32
  8. #4b0523
  9. #300214
  10. #170107
  11. #040001

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. #861043
  2. #eeb4d7
  3. #3c1d24
  4. #ffe4e3
  5. #e44d00

Recolor's generator, with pink-900 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #eeb4d7, #3c1d24, #ffe4e3, #e44d00. Open it in Recolor.

Using pink-900

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

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

Common questions

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

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

Is Tailwind pink-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-pink-900: oklch(40.8% 0.153 2.432); #861043 is its conversion to sRGB.

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

No. The nearest CSS named color is darkred (#8b0000), 0.075 away in OKLab.

Sources