#F8FAFC: Tailwind slate-50 codes, contrast and shades

Tailwind CSS 2 had this color as blueGray-50, one of the extra grays you had to import from tailwindcss/colors. Tailwind 3 renamed blueGray to slate and turned the whole palette on by default, and #F8FAFC became slate-50.

Tailwind 4 rewrote its colors in OKLCH, and slate-50 is now oklch(98.4% 0.003 247.858). That converts back to #F8FAFC, the same hex, so this is one color an upgrade doesn't change.

It works as a page background behind white cards, and as the fill for sidebars, table stripes and code blocks. The gap to white is tiny, though: white and #F8FAFC are only 1.05:1 apart. A white card on it needs a border or a shadow to stand out. APCA, a newer method that isn't part of any WCAG standard, scores black text Lc 102.9 and white text Lc 0.0, so both methods agree that only dark text belongs here.

Use #F8FAFC for large, quiet areas: page backgrounds, panels, table stripes and hover states on white. Black text on it passes AAA at any size, at 20.07:1. Don't use it for text or icons on white, where it all but vanishes at 1.05:1.

The shade scale keeps the blue tint of slate. White text first passes AA on the fifth darker step, #727475, at 4.70:1, so the lower half of the scale works for dark buttons and headers. The first three darker steps still take black text at AAA, which makes them good borders and pressed states. Click a shade to open it in the Color Picker.