#3B82F6: Tailwind blue-500 color codes, contrast and shades

Tailwind CSS 2 shipped a new color palette with #3B82F6 as its blue-500, and Tailwind 3 kept the same value. Tailwind 3 also used it for focus rings: the plain ring class drew a see-through blue-500 unless you picked another color.

Tailwind 4 moved its colors to OKLCH, and blue-500 changed with it. Version 4 writes it as oklch(62.3% 0.214 259.815), while #3B82F6 is oklch(62.31% 0.188 259.81). The chroma went from 0.188 to 0.214, so the new blue is more vivid. That much chroma is outside sRGB, so it takes a wide gamut screen to show it in full. The closest hex is #2B7FFF. Tailwind 4 also changed the default ring color to currentColor, so focus rings in an upgraded project stop being blue unless you set a ring color.

Text on #3B82F6 is a case where the two contrast methods disagree. WCAG 2 gives black text 5.71:1 and white text 3.68:1. So black passes AA at any size, and white only passes for large text: 24px and up, or about 18.66px bold. APCA, a newer method that isn't part of any WCAG standard, reads it the other way around. White text scores Lc -69.4, and black text only Lc 40.2, under the Lc 45 APCA suggests even for large headlines.

WCAG 2.2 still decides pass or fail, so if you need white text to pass, go one step darker. Tailwind 3's blue-600, #2563EB, gives white text 5.17:1 and passes AA. So does #2168DA, the first darker step in the shade scale, at 5.18:1.

Use #3B82F6 for fills, icons, borders and large headings, and put black text on it when the text has to pass WCAG AA. As link or body text on a white page it only reaches 3.68:1, which fails AA for normal text, so pick a darker blue there. For buttons with white labels, #2168DA or Tailwind 3's blue-600 (#2563EB) keeps the look and passes.

The shade scale keeps the OKLCH chroma and hue of #3B82F6 and moves the lightness in even steps toward white and toward black. A step sRGB can't show loses chroma until it fits, so its hue stays put. Black text passes AA on every lighter step, and white text passes on every darker one. Click a shade to open it in the Color Picker.