Chef’s Hat
#f3f4f5
Warmer off-white gray for Chef sections and headers
About Chef’s Hat
Chef's Hat sits so close to pure white that most people won't register it as gray at all. But it's the kind of color that works harder than it looks, it's got just enough neutral density to hold its ground on dark backgrounds without any temperature lean pulling it in one direction. It's not warmer than Cotton Ball, not cooler than Bubbles. It's the one you reach for when you need to disappear completely.
This works in interfaces where the background should be invisible: healthcare dashboards, financial applications, SaaS products where secondary elements need to stay out of the way. Body text in dark mode, form inputs, disabled states, secondary UI layers. It pairs equally well with warm grays or cool grays because there's nothing in it pushing back. No cyan whisper, no cream undertone, just a genuinely neutral near-white that lets your actual content do the talking.
The trade-off: that restraint means it needs stronger contrast or deliberate color neighbors to feel intentional. Use it alongside warmer or cooler accents and it'll read like a design decision. Surround it only with other near-whites and it'll vanish so completely you'll forget it's there.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.