Smoke color guide
The standard 'off-white' surface for cards and secondary panels. Just enough separation from white to read as a layer.
- Best for
- Card and panel backgrounds.
Accessibility
Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.
Colors that go with smoke
Combinations that hold up in a real layout rather than only on the colour wheel.
Smoke color harmonies
Smoke shades and tints
The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.
Smoke FAQ
What is the hex code for smoke?
Smoke is #F5F5F5. In other formats that is rgb(245, 245, 245), hsl(0, 0%, 96%), and approximately cmyk(0%, 0%, 0%, 4%) for print.
What colors go with smoke?
Charcoal, Royal Blue, White all pair well with smoke. Card and panel backgrounds.
Is smoke accessible for text?
Not on white: smoke reaches only 1.09:1 there, below the 4.5:1 WCAG AA threshold. Use it as a background with black text on top, or reserve it for large display type.
Should text on smoke be black or white?
Use black text. It gives the higher contrast ratio of the two against #F5F5F5.