RecolorOpen Recolor

A vivid dark blue, white text passes AA

Tailwind blue-700

The hex code of Tailwind blue-700 is #1447e6 (rgb(20 71 230)), from its Tailwind CSS 4.3.3 value oklch(48.8% 0.243 264.376). White text on it reaches 6.83:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#1447e6blue-700
From the theme file of Tailwind CSS 4.3.3 (--color-blue-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(48.8% 0.243 264.376)
Hex#1447e6
RGBrgb(20 71 230)
HSLhsl(225 84% 49%)
CSS variablevar(--color-blue-700)
Nearest CSS nameblue #0000ff, 0.079 away in OKLab
White text6.83:1: AA passes, AAA fails, large text passes
Black text3.07:1: AA fails, AAA fails, large text passes

About blue-700

Read as numbers, blue-700 is lightness 48.8%, chroma 0.243 and hue 264.4 degrees; read by eye, it is a vivid dark blue. Its neighbors on the blue scale are blue-600, 5.8 points lighter, and blue-800, 6.4 points darker.

Here HSL's lightness, 49%, lands near OKLCH's 48.8%, which is not true of every color. No gamut mapping is needed here: oklch(48.8% 0.243 264.376) sits inside sRGB and #1447e6 matches it.

White is the ink for blue-700: 6.83:1 passes AA for body text, where black stops at 3.07:1. On the blue scale white text works from blue-600 to blue-950; blue-700 has 1 shade of margin.

No CSS keyword matches it; blue (#0000ff) is the nearest, 0.079 away in OKLab, a clear step off.

Tints and shades

  1. #d5e3ff
  2. #adc7fd
  3. #85aaf9
  4. #5f8df4
  5. #396dee
  6. #1447e6
  7. #0d36b4
  8. #072585
  9. #031659
  10. #010830
  11. #00010c

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. #1447e6
  2. #dfbea9
  3. #272312
  4. #f8dbf2
  5. #6a9683

Around blue-700 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #dfbea9, #272312, #f8dbf2, #6a9683, drawn from a seed fixed by its hex. Open it in Recolor.

Using blue-700

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

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

Common questions

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

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

Is Tailwind blue-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-blue-700: oklch(48.8% 0.243 264.376); #1447e6 is its conversion to sRGB.

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

No. The nearest CSS named color is blue (#0000ff), 0.079 away in OKLab.

Sources