RecolorOpen Recolor

A vivid medium red, black and white text both pass AA

Tailwind rose-600

In Tailwind CSS 4.3.3, rose-600 is defined as oklch(58.6% 0.253 17.585); as the nearest sRGB hex that is #ec003f, or rgb(236 0 63). Black text on it reaches 4.64:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#ec003frose-600
From the theme file of Tailwind CSS 4.3.3 (--color-rose-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(58.6% 0.253 17.585)
Hex#ec003f, the nearest color in sRGB
RGBrgb(236 0 63)
HSLhsl(344 100% 46%)
OKLCH of the hexoklch(59.7% 0.240 19.7)
CSS variablevar(--color-rose-600)
Nearest CSS namecrimson #dc143c, 0.031 away in OKLab
White text4.53:1: AA passes, AAA fails, large text passes
Black text4.64:1: AA passes, AAA fails, large text passes

About rose-600

In OKLCH, rose-600 has a lightness of 58.6%, a chroma of 0.253 and a hue of 17.6 degrees, which makes it a vivid medium red. The step up to rose-500 is 5.9 points of lightness, and the step down to rose-700 7.2 points.

HSL calls its lightness 46%, OKLCH 58.6%: 12 points between a formula and a measure of what the eye sees. Rose-600 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #ec003f, gives up 0.013 of chroma and moves 1.1 points of lightness and 2.1 degrees of hue; a Display P3 screen shows the full value.

Black and white text both clear 4.5:1 on rose-600, at 4.64:1 and 4.53:1: a rare middle ground where either ink meets WCAG AA. Rose-600 is where the rose scale turns over: lighter shades need black text, darker ones white, and this one takes either.

Among the CSS keywords, crimson (#dc143c) comes closest at 0.031 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #ffdfde
  2. #ffbebd
  3. #ff9d9e
  4. #fc7a7e
  5. #f5515f
  6. #ec003f
  7. #b9002f
  8. #890020
  9. #5b0012
  10. #310006
  11. #0d0001

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. #ec003f
  2. #361517
  3. #f0d7d5
  4. #65423f
  5. #ffa9a5

Locked as the first of five swatches, rose-600 gets #361517, #f0d7d5, #65423f, #ffa9a5 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 rose-600

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

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

Common questions

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

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

Is Tailwind rose-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-rose-600: oklch(58.6% 0.253 17.585); #ec003f is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources