RecolorOpen Recolor

A vivid medium red, black text passes AA

Tailwind rose-400

The hex code of Tailwind rose-400 is #ff637e (rgb(255 99 126)), from its Tailwind CSS 4.3.3 value oklch(71.2% 0.194 13.428). Black text on it reaches 7.34:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#ff637erose-400
From the theme file of Tailwind CSS 4.3.3 (--color-rose-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(71.2% 0.194 13.428)
Hex#ff637e, the nearest color in sRGB
RGBrgb(255 99 126)
HSLhsl(350 100% 69%)
OKLCH of the hexoklch(70.6% 0.190 13.0)
CSS variablevar(--color-rose-400)
Nearest CSS namelightcoral #f08080, 0.060 away in OKLab
White text2.86:1: AA fails, AAA fails, large text fails
Black text7.34:1: AA passes, AAA passes, large text passes

About rose-400

Read as numbers, rose-400 is lightness 71.2%, chroma 0.194 and hue 13.4 degrees; read by eye, it is a vivid medium red. Its neighbors on the rose scale are rose-300, 9.8 points lighter, and rose-500, 6.7 points darker.

HSL and OKLCH agree on how light it is, 69% and 71.2%. A hex code cannot hold rose-400 exactly: the value is outside sRGB, and #ff637e is the CSS Color 4 gamut mapping of it, chroma lowered by 0.004, 0.6 points of lightness and 0.4 degrees of hue away from the value.

Black on rose-400 reads at 7.34:1, enough for AAA body text; white reaches 2.86:1 and should stay off it. Black text passes on every rose shade from rose-50 to rose-600, 2 shades darker than rose-400.

The nearest CSS named color, lightcoral (#f08080), is 0.060 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #ffe7e9
  2. #ffced3
  3. #ffb5bd
  4. #ff9ca8
  5. #ff8193
  6. #ff637e
  7. #c84c61
  8. #943646
  9. #63212d
  10. #360f15
  11. #0f0203

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. #ff637e
  2. #271619
  3. #d9abaf
  4. #624445
  5. #fedcdd

Around rose-400 as swatch 1, Recolor's generator made a monochromatic palette, one hue in five lightnesses: #271619, #d9abaf, #624445, #fedcdd, drawn from a seed fixed by its hex. Open it in Recolor.

Using rose-400

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

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

Common questions

Does white text pass WCAG AA on Tailwind rose-400?

No. White text measures 2.86:1 on rose-400, under AA's 4.5:1; black text measures 7.34:1 and passes. The lightest rose shade for white text is rose-600.

Is Tailwind rose-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-rose-400: oklch(71.2% 0.194 13.428); #ff637e is its nearest sRGB color, since the value lies outside sRGB.

Is there a CSS named color for Tailwind rose-400?

No. The nearest CSS named color is lightcoral (#f08080), 0.060 away in OKLab.

Sources