RecolorOpen Recolor

A vivid medium teal, white text passes AA

Tailwind cyan-700

Tailwind cyan-700 is oklch(52% 0.105 223.128) in Tailwind CSS 4.3.3, which is #007595 as the nearest sRGB hex and rgb(0 117 149). White text on it reaches 5.28:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#007595cyan-700
From the theme file of Tailwind CSS 4.3.3 (--color-cyan-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(52% 0.105 223.128)
Hex#007595, the nearest color in sRGB
RGBrgb(0 117 149)
HSLhsl(193 100% 29%)
OKLCH of the hexoklch(52.3% 0.099 225.3)
CSS variablevar(--color-cyan-700)
Nearest CSS nameteal #008080, 0.055 away in OKLab
White text5.28:1: AA passes, AAA fails, large text passes
Black text3.98:1: AA fails, AAA fails, large text passes

About cyan-700

Tailwind cyan-700 is a vivid medium teal: OKLCH lightness 52.0%, chroma 0.105, hue 223.1 degrees. On Tailwind's cyan scale it sits between cyan-600 at 60.9% and cyan-800 at 45.0%.

Its HSL lightness, 29%, says little about how light cyan-700 looks; OKLCH, made to match the eye, measures 52.0%, 23 points away. Its value lies outside sRGB, the colors a hex code can name: #007595 is what CSS Color 4's gamut mapping makes of it, chroma 0.099 instead of 0.105, moving 0.3 points of lightness and 2.2 degrees of hue. A wide-gamut screen shows the stronger original.

White text on cyan-700 reaches 5.28:1, enough for WCAG AA body text but short of AAA's 7:1; black text gets 3.98:1. Going down the cyan scale, white text first reaches AA here; one shade lighter, cyan-600 gives it 3.62:1.

No CSS keyword matches it; teal (#008080) is the nearest, 0.055 away in OKLab, a clear step off.

Tints and shades

  1. #dae7ed
  2. #b5d0db
  3. #90b9ca
  4. #6ba2b8
  5. #438ba7
  6. #007595
  7. #005a74
  8. #004154
  9. #002937
  10. #00131b
  11. #000305

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. #007595
  2. #ebbbbf
  3. #3a2606
  4. #0094c9
  5. #a8ecff

Recolor's generator, with cyan-700 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #ebbbbf, #3a2606, #0094c9, #a8ecff. Open it in Recolor.

Using cyan-700

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

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

Common questions

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

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

Is Tailwind cyan-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-cyan-700: oklch(52% 0.105 223.128); #007595 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is teal (#008080), 0.055 away in OKLab.

Sources