RecolorOpen Recolor

A light green, black text passes AA

Tailwind green-300

The hex code of Tailwind green-300 is #7bf1a8 (rgb(123 241 168)), from its Tailwind CSS 4.3.3 value oklch(87.1% 0.15 154.449). Black text on it reaches 14.99:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#7bf1a8green-300
From the theme file of Tailwind CSS 4.3.3 (--color-green-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(87.1% 0.15 154.449)
Hex#7bf1a8
RGBrgb(123 241 168)
HSLhsl(143 81% 71%)
CSS variablevar(--color-green-300)
Nearest CSS namelightgreen #90ee90, 0.029 away in OKLab
White text1.40:1: AA fails, AAA fails, large text fails
Black text14.99:1: AA passes, AAA passes, large text passes

About green-300

Read as numbers, green-300 is lightness 87.1%, chroma 0.150 and hue 154.4 degrees; read by eye, it is a light green. Its neighbors on the green scale are green-200, 5.4 points lighter, and green-400, 7.9 points darker.

HSL puts its lightness at 71% and OKLCH at 87.1%, 16 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. No gamut mapping is needed here: oklch(87.1% 0.15 154.449) sits inside sRGB and #7bf1a8 matches it.

Black on green-300 reads at 14.99:1, enough for AAA body text; white reaches 1.40:1 and should stay off it. Black text passes on every green shade from green-50 to green-600, 3 shades darker than green-300.

Of the named colors, lightgreen (#90ee90) is the nearest, 0.029 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #ecfdf1
  2. #d8fbe2
  3. #c3f9d4
  4. #adf7c5
  5. #96f4b7
  6. #7bf1a8
  7. #5fbd83
  8. #458c60
  9. #2c5d3f
  10. #153320
  11. #030d06

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. #7bf1a8
  2. #593975
  3. #ffa6c8
  4. #14241a
  5. #00a03a

Around green-300 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #593975, #ffa6c8, #14241a, #00a03a, drawn from a seed fixed by its hex. Open it in Recolor.

Using green-300

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

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

Common questions

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

No. White text measures 1.40:1 on green-300, under AA's 4.5:1; black text measures 14.99:1 and passes. The lightest green shade for white text is green-700.

Is Tailwind green-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-green-300: oklch(87.1% 0.15 154.449); #7bf1a8 is its conversion to sRGB.

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

No. The nearest CSS named color is lightgreen (#90ee90), 0.029 away in OKLab.

Sources