RecolorOpen Recolor

A vivid medium red-orange, white text passes AA

Tailwind orange-700

The hex code of Tailwind orange-700 is #ca3500 (rgb(202 53 0)), from its Tailwind CSS 4.3.3 value oklch(55.3% 0.195 38.402). White text on it reaches 5.22:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#ca3500orange-700
From the theme file of Tailwind CSS 4.3.3 (--color-orange-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(55.3% 0.195 38.402)
Hex#ca3500, the nearest color in sRGB
RGBrgb(202 53 0)
HSLhsl(16 100% 40%)
OKLCH of the hexoklch(55.4% 0.192 35.5)
CSS variablevar(--color-orange-700)
Nearest CSS namecrimson #dc143c, 0.065 away in OKLab
White text5.22:1: AA passes, AAA fails, large text passes
Black text4.02:1: AA fails, AAA fails, large text passes

About orange-700

Read as numbers, orange-700 is lightness 55.3%, chroma 0.195 and hue 38.4 degrees; read by eye, it is a vivid medium red-orange. Its neighbors on the orange scale are orange-600, 9.3 points lighter, and orange-800, 8.3 points darker. Despite the name, orange-700 reads as a vivid medium red-orange: its hue lies between red and orange.

HSL puts its lightness at 40% and OKLCH at 55.3%, 16 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. A hex code cannot hold orange-700 exactly: the value is outside sRGB, and #ca3500 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.003, 0.1 points of lightness and 2.9 degrees of hue away from the value.

White is the ink for orange-700: 5.22:1 passes AA for body text, where black stops at 4.02:1. It is the lightest orange shade that carries white body text; orange-600 falls short at 3.58:1.

The nearest CSS named color, crimson (#dc143c), is 0.065 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #fbe0d8
  2. #f5c0b2
  3. #eda08c
  4. #e38066
  5. #d75e3f
  6. #ca3500
  7. #9e2700
  8. #741a00
  9. #4d0e00
  10. #290400
  11. #090100

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. #ca3500
  2. #36190f
  3. #e89e8b
  4. #754236
  5. #ffe3d9

Around orange-700 as swatch 1, Recolor's generator made a monochromatic palette, one hue in five lightnesses: #36190f, #e89e8b, #754236, #ffe3d9, drawn from a seed fixed by its hex. Open it in Recolor.

Using orange-700

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

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

Common questions

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

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

Is Tailwind orange-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-orange-700: oklch(55.3% 0.195 38.402); #ca3500 is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources