RecolorOpen Recolor

A vivid medium blue, white text passes AA

Tailwind sky-700

In Tailwind CSS 4.3.3, sky-700 is defined as oklch(50% 0.134 242.749); as the nearest sRGB hex that is #0069a8, or rgb(0 105 168). White text on it reaches 5.86:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#0069a8sky-700
From the theme file of Tailwind CSS 4.3.3 (--color-sky-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(50% 0.134 242.749)
Hex#0069a8, the nearest color in sRGB
RGBrgb(0 105 168)
HSLhsl(203 100% 33%)
OKLCH of the hexoklch(50.4% 0.128 245.5)
CSS variablevar(--color-sky-700)
Nearest CSS namesteelblue #4682b4, 0.089 away in OKLab
White text5.86:1: AA passes, AAA fails, large text passes
Black text3.59:1: AA fails, AAA fails, large text passes

About sky-700

In OKLCH, sky-700 has a lightness of 50.0%, a chroma of 0.134 and a hue of 242.7 degrees, which makes it a vivid medium blue. The step up to sky-600 is 8.8 points of lightness, and the step down to sky-800 5.7 points.

HSL puts its lightness at 33% and OKLCH at 50.0%, 17 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. Sky-700 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #0069a8, gives up 0.006 of chroma and moves 0.4 points of lightness and 2.7 degrees of hue; a Display P3 screen shows the full value.

With white text, sky-700 passes AA at 5.86:1. Black text, at 3.59:1, does not. It is the lightest sky shade that carries white body text; sky-600 falls short at 4.02:1.

The nearest CSS named color, steelblue (#4682b4), is 0.089 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #d9e6f1
  2. #b3cce3
  3. #8db3d5
  4. #679bc6
  5. #3f82b7
  6. #0069a8
  7. #005183
  8. #003a60
  9. #00243f
  10. #001020
  11. #000206

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. #0069a8
  2. #99d0e6
  3. #121e27
  4. #7890b7
  5. #f0f3ff

Locked as the first of five swatches, sky-700 gets #99d0e6, #121e27, #7890b7, #f0f3ff from Recolor's generator, an analogous palette, hues next to each other on the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using sky-700

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

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

Common questions

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

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

Is Tailwind sky-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-sky-700: oklch(50% 0.134 242.749); #0069a8 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is steelblue (#4682b4), 0.089 away in OKLab.

Sources