RecolorOpen Recolor

A vivid medium red, white text passes AA

Tailwind rose-700

The hex code of Tailwind rose-700 is #c70036 (rgb(199 0 54)), from its Tailwind CSS 4.3.3 value oklch(51.4% 0.222 16.935). White text on it reaches 6.03:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#c70036rose-700
From the theme file of Tailwind CSS 4.3.3 (--color-rose-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(51.4% 0.222 16.935)
Hex#c70036, the nearest color in sRGB
RGBrgb(199 0 54)
HSLhsl(344 100% 39%)
OKLCH of the hexoklch(52.5% 0.211 18.9)
CSS variablevar(--color-rose-700)
Nearest CSS namecrimson #dc143c, 0.047 away in OKLab
White text6.03:1: AA passes, AAA fails, large text passes
Black text3.48:1: AA fails, AAA fails, large text passes

About rose-700

Read as numbers, rose-700 is lightness 51.4%, chroma 0.222 and hue 16.9 degrees; read by eye, it is a vivid medium red. Its neighbors on the rose scale are rose-600, 7.2 points lighter, and rose-800, 5.9 points darker.

Its lightness is 39% in HSL and 51.4% in OKLCH, 12 points apart; only the second tracks how light it looks. A hex code cannot hold rose-700 exactly: the value is outside sRGB, and #c70036 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.011, 1.1 points of lightness and 2.0 degrees of hue away from the value.

White is the ink for rose-700: 6.03:1 passes AA for body text, where black stops at 3.48:1. On the rose scale white text works from rose-600 to rose-950; rose-700 has 1 shade of margin.

Of the named colors, crimson (#dc143c) is the nearest, 0.047 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #fcdcdc
  2. #f6b9b9
  3. #ed9697
  4. #e37277
  5. #d64a56
  6. #c70036
  7. #9c0028
  8. #72001b
  9. #4c000f
  10. #280005
  11. #090001

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. #c70036
  2. #b7a3f6
  3. #002f36
  4. #fbe3dd
  5. #479245

Around rose-700 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #b7a3f6, #002f36, #fbe3dd, #479245, drawn from a seed fixed by its hex. Open it in Recolor.

Using rose-700

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

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

Common questions

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

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

Is Tailwind rose-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-rose-700: oklch(51.4% 0.222 16.935); #c70036 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is crimson (#dc143c), 0.047 away in OKLab.

Sources