RecolorOpen Recolor

A vivid light pink, black text passes AA

Tailwind red-300

Tailwind red-300 is oklch(80.8% 0.114 19.571) in Tailwind CSS 4.3.3, which is #ffa2a2 as the nearest sRGB hex and rgb(255 162 162). Black text on it reaches 10.94:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#ffa2a2red-300
From the theme file of Tailwind CSS 4.3.3 (--color-red-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(80.8% 0.114 19.571)
Hex#ffa2a2, the nearest color in sRGB
RGBrgb(255 162 162)
HSLhsl(0 100% 82%)
OKLCH of the hexoklch(80.5% 0.111 19.8)
CSS variablevar(--color-red-300)
Nearest CSS namelightsalmon #ffa07a, 0.050 away in OKLab
White text1.92:1: AA fails, AAA fails, large text fails
Black text10.94:1: AA passes, AAA passes, large text passes

About red-300

Tailwind red-300 is a vivid light pink: OKLCH lightness 80.8%, chroma 0.114, hue 19.6 degrees. On Tailwind's red scale it sits between red-200 at 88.5% and red-400 at 70.4%.

Here HSL's lightness, 82%, lands near OKLCH's 80.8%, which is not true of every color. Its value lies outside sRGB, the colors a hex code can name: #ffa2a2 is what CSS Color 4's gamut mapping makes of it, chroma 0.111 instead of 0.114, moving 0.3 points of lightness and 0.2 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on red-300 measures 10.94:1, past the 7:1 of WCAG AAA, while white text manages only 1.92:1. On the red scale black text works down to red-500, which leaves red-300 2 shades of margin.

The closest CSS named color is lightsalmon (#ffa07a), 0.050 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #fff0ef
  2. #ffe0df
  3. #ffd1d0
  4. #ffc2c0
  5. #ffb2b1
  6. #ffa2a2
  7. #c87e7e
  8. #945c5c
  9. #633c3c
  10. #361f1f
  11. #0f0606

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. #ffa2a2
  2. #311720
  3. #d1626d
  4. #ffd3bf
  5. #684937

Recolor's generator, with red-300 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #311720, #d1626d, #ffd3bf, #684937. Open it in Recolor.

Using red-300

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

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

Common questions

Does white text pass WCAG AA on Tailwind red-300?

No. White text measures 1.92:1 on red-300, under AA's 4.5:1; black text measures 10.94:1 and passes. The lightest red shade for white text is red-600.

Is Tailwind red-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-red-300: oklch(80.8% 0.114 19.571); #ffa2a2 is its nearest sRGB color, since the value lies outside sRGB.

Is there a CSS named color for Tailwind red-300?

No. The nearest CSS named color is lightsalmon (#ffa07a), 0.050 away in OKLab.

Sources