RecolorOpen Recolor

A vivid light magenta, black text passes AA

Tailwind fuchsia-300

The hex code of Tailwind fuchsia-300 is #f4a8ff (rgb(244 168 255)), from its Tailwind CSS 4.3.3 value oklch(83.3% 0.145 321.434). Black text on it reaches 11.89:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#f4a8fffuchsia-300
From the theme file of Tailwind CSS 4.3.3 (--color-fuchsia-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(83.3% 0.145 321.434)
Hex#f4a8ff, the nearest color in sRGB
RGBrgb(244 168 255)
HSLhsl(292 100% 83%)
OKLCH of the hexoklch(83.3% 0.143 322.3)
CSS variablevar(--color-fuchsia-300)
Nearest CSS nameplum #dda0dd, 0.062 away in OKLab
White text1.77:1: AA fails, AAA fails, large text fails
Black text11.89:1: AA passes, AAA passes, large text passes

About fuchsia-300

Read as numbers, fuchsia-300 is lightness 83.3%, chroma 0.145 and hue 321.4 degrees; read by eye, it is a vivid light magenta. Its neighbors on the fuchsia scale are fuchsia-200, 7.0 points lighter, and fuchsia-400, 9.3 points darker.

Here HSL's lightness, 83%, lands near OKLCH's 83.3%, which is not true of every color. A hex code cannot hold fuchsia-300 exactly: the value is outside sRGB, and #f4a8ff is the CSS Color 4 gamut mapping of it, chroma lowered by 0.002, 0.0 points of lightness and 0.8 degrees of hue away from the value.

Black on fuchsia-300 reads at 11.89:1, enough for AAA body text; white reaches 1.77:1 and should stay off it. On the fuchsia scale black text works down to fuchsia-600, which leaves fuchsia-300 3 shades of margin.

No CSS keyword matches it; plum (#dda0dd) is the nearest, 0.062 away in OKLab, a clear step off.

Tints and shades

  1. #fef1ff
  2. #fce3ff
  3. #fbd4ff
  4. #f9c6ff
  5. #f7b7ff
  6. #f4a8ff
  7. #bf83c8
  8. #8d6094
  9. #5e3f63
  10. #332036
  11. #0d060f

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. #f4a8ff
  2. #2a1c3a
  3. #9e72a3
  4. #ffd1eb
  5. #644c54

Around fuchsia-300 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #2a1c3a, #9e72a3, #ffd1eb, #644c54, drawn from a seed fixed by its hex. Open it in Recolor.

Using fuchsia-300

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

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

Common questions

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

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

Is Tailwind fuchsia-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-fuchsia-300: oklch(83.3% 0.145 321.434); #f4a8ff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is plum (#dda0dd), 0.062 away in OKLab.

Sources