RecolorOpen Recolor

A pale green, black text passes AA

Tailwind emerald-200

The hex code of Tailwind emerald-200 is #a4f4cf (rgb(164 244 207)), from its Tailwind CSS 4.3.3 value oklch(90.5% 0.093 164.15). Black text on it reaches 16.42:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#a4f4cfemerald-200
From the theme file of Tailwind CSS 4.3.3 (--color-emerald-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(90.5% 0.093 164.15)
Hex#a4f4cf
RGBrgb(164 244 207)
HSLhsl(152 78% 80%)
CSS variablevar(--color-emerald-200)
Nearest CSS nameaquamarine #7fffd4, 0.039 away in OKLab
White text1.28:1: AA fails, AAA fails, large text fails
Black text16.42:1: AA passes, AAA passes, large text passes

About emerald-200

Read as numbers, emerald-200 is lightness 90.5%, chroma 0.093 and hue 164.2 degrees; read by eye, it is a pale green. Its neighbors on the emerald scale are emerald-100, 4.5 points lighter, and emerald-300, 6.0 points darker.

HSL calls its lightness 80%, OKLCH 90.5%: 10 points between a formula and a measure of what the eye sees. No gamut mapping is needed here: oklch(90.5% 0.093 164.15) sits inside sRGB and #a4f4cf matches it.

Black on emerald-200 reads at 16.42:1, enough for AAA body text; white reaches 1.28:1 and should stay off it. Black text passes on every emerald shade from emerald-50 to emerald-600, 4 shades darker than emerald-200.

Of the named colors, aquamarine (#7fffd4) is the nearest, 0.039 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #f1fdf7
  2. #e2fcef
  3. #d4fae7
  4. #c4f8df
  5. #b5f6d7
  6. #a4f4cf
  7. #80bfa2
  8. #5d8d77
  9. #3d5e4f
  10. #1f332a
  11. #060d0a

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. #a4f4cf
  2. #9d6e76
  3. #002e11
  4. #8fd0e0
  5. #6d610c

Around emerald-200 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #9d6e76, #002e11, #8fd0e0, #6d610c, drawn from a seed fixed by its hex. Open it in Recolor.

Using emerald-200

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

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

Common questions

Does white text pass WCAG AA on Tailwind emerald-200?

No. White text measures 1.28:1 on emerald-200, under AA's 4.5:1; black text measures 16.42:1 and passes. The lightest emerald shade for white text is emerald-700.

Is Tailwind emerald-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-emerald-200: oklch(90.5% 0.093 164.15); #a4f4cf is its conversion to sRGB.

Is there a CSS named color for Tailwind emerald-200?

No. The nearest CSS named color is aquamarine (#7fffd4), 0.039 away in OKLab.

Sources