Why designers skip pure white, and six pairings to use instead
Pure white is the default every website builder hands you, and it's the one decision most sites never go back and question. Swapping it for something a fraction warmer or cooler changes how a whole page feels without touching anything else. Visitors do notice: the page reads as calmer, or warmer, or more deliberate. What they don't do is trace it back to the background color, which is exactly what you want from it.
Here are six off-white website palettes with hex codes. Each one pairs an off-white background with a contrasting dark: Cloudy & Soft Charcoal, Ivory & Dark Coffee, Linen & Dusty Blue, Milky & Graphite, Pearl & Warm Gray, and Sandy White & Deep Olive. Below each one is a note on its undertone and what the dark color can and can't do.
| Palette | Colors | Off-white undertone | Dark color role |
|---|---|---|---|
| Cloudy & Soft Charcoal | #E8E8E8 · #2D2D2D | Neutral, no tint | Works everywhere, body text included |
| Ivory & Dark Coffee | #FDFAF1 · #3C2F2F | Warm | Works everywhere, body text included |
| Linen & Dusty Blue | #F4EFE7 · #8C9DAD | Warm | Sections and accents only |
| Milky & Graphite | #FDFEF5 · #333333 | Barely tinted | Works everywhere, body text included |
| Pearl & Warm Gray | #F0F4F7 · #898682 | Cool | Headings and accents only |
| Sandy White & Deep Olive | #F4F1EA · #3D4D39 | Warm | Works everywhere, body text included |
What Is an Off-White Color?
Pure white is #FFFFFF. In hex, those three pairs stand for red, green and blue, and in pure white all three are turned up as far as they go. It's the brightest thing a screen can display, and it has no character at all, because no one color is doing more than the others.
An off-white is the same idea with the dial moved. Either everything comes down a little, which gives you a soft gray, or one of the three channels drops below the others, which gives the white a temperature.
That's all an undertone is. Look at Ivory, #FDFAF1: red is 253, green 250, blue 241. Blue is lowest, and when blue is lowest you get warmth, a faint yellow cast. Pearl, #F0F4F7, does the opposite: blue is the highest of the three, so it reads cool and faintly silver.
Cloudy, #E8E8E8, is the odd one out. All three channels are identical, so there's no tint at all. It isn't a warm white or a cool white. It's pure white turned down about a fifth.
You can read any off-white this way. Lowest number tells you the temperature.
Why Use Off-White Instead of Pure White
It gives you white back. This is the big one. If your page background is already pure white, you have nothing brighter to reach for. Make the background off-white and suddenly a white card lifts off the page, a white panel reads as raised, and you've gained a whole tool.
Product photos keep their edges. Most product photography is shot against a plain white background. Put those images on a pure white page and you can't see where the photo stops and the page starts, so the objects float loose with nothing holding them. On an off-white page, each photo reads as its own rectangle.
Large bright areas get easier to look at. A full screen of #FFFFFF at normal brightness is the most light a monitor can throw. Pulling it down even slightly takes the glare off, and it shows most on long pages of text and in dark rooms.
It carries a mood before anything else does. Warm white reads as paper, linen, something made by hand. Cool white reads as clinical, precise, expensive in a different way. You get that character for free, before you've chosen a brand color or a typeface.
Paper is never white either. Which is why an off-white page reads as a printed thing, and a pure white one reads as a screen.
Cloudy & Soft Charcoal: Neutral Gray and Near-Black
Cloudy #E8E8E8 · Soft Charcoal #2D2D2D
The light on an overcast afternoon. Neither color here has a temperature, so nothing on the page picks up a cast from the background and nothing competes with your photographs. It's the most gallery-like of the six, and the quietest.
Cloudy is also the darkest off-white in the set, which is what makes a white card lift off it so clearly.
In use: Soft Charcoal carries everything, body text included. It's a shade softer than true black, so long stretches of reading don't feel as hard.
Best for: portfolios, photography, architecture, anything where images do the work and the page should get out of the way.
Pearl & Warm Gray: Cool White and Mid Gray
Pearl #F0F4F7 · Warm Gray #898682
Cool morning light on stone. Pearl is the only cool background in the set, faintly silver, and the warm gray beside it is what stops the whole thing tipping into cold. Precise rather than cosy.
In use: Warm Gray is mid-toned, so it's a headings-and-accents color rather than a body text one. You'll want something darker for paragraphs.
Best for: medical and dental, finance, technology, anywhere clean and precise beats warm.
Sandy White & Deep Olive: Beige White and Dark Green
Sandy White #F4F1EA · Deep Olive #3D4D39
A whitewashed wall with something green growing against it. The sand is warm enough to read as genuinely beige rather than just not-white, and the olive is deep enough to hold it down. Unhurried, a little Mediterranean.
In use: Deep Olive handles body text. Reaching for a dark green rather than a black or a brown is what keeps this out of standard beige territory.
Best for: garden and plant brands, natural skincare, restaurants, slow-living and craft.
Ivory & Dark Coffee: Warm White and Brown-Black
Ivory #FDFAF1 · Dark Coffee #3C2F2F
Old paper and strong espresso. The warmth runs through both colors rather than stopping at the background, so the page reads as something that's been around a while, the way a well-used kitchen does. Comfortable rather than new.
In use: Dark Coffee is a brown-black rather than a neutral one, and it's dark enough to carry body text.
Best for: interiors, bakeries and food, skincare, anything organic or hand-made.
Linen & Dusty Blue: Warm White and Muted Blue
Linen #F4EFE7 · Dusty Blue #8C9DAD
Laundry drying in sea air. The linen is soft and domestic, the blue is cool and a little distant, and the two pulling against each other is what keeps this from going sentimental. It's the only pairing here where the colors disagree about temperature.
In use: Dusty Blue is too light to carry paragraphs on the linen. Use it for section backgrounds, buttons, borders and large display type, and pick something genuinely dark for reading text.
Best for: coastal and travel brands, therapists and wellness, baby and children's brands.
Milky & Graphite: Near-White and Neutral Dark Gray
Milky #FDFEF5 · Graphite #333333
The quietest pairing in the set. Milky barely registers as a color at all, and most visitors will notice only that the page isn't glaring at them. What you get is a feeling of space before you've put anything on it.
The trade-off is that Milky sits so close to pure white that a white card won't lift off it, so the white-as-accent move isn't available here.
In use: Graphite is a true neutral dark, no temperature in either direction, and it carries everything.
Best for: minimal brands, consultancies, SaaS, anywhere the design should feel invisible.
What May Break When You Switch to Off-White
Pick an off-white background and you create a problem you didn't have before: everything on your site that's genuinely pure white now shows up as a bright patch.
The usual culprits:
Logos saved as JPEG. A JPEG can't be transparent, so it carries a white rectangle with it. Save logos as PNG or SVG instead.
Embedded forms and booking widgets. Most arrive with white backgrounds of their own and need styling to match.
Maps and third-party embeds, which often can't be styled at all.
Product photos on a white sweep, which is usually the effect you want, but not always.
Unstyled form fields, which default to white in most browsers.
It's worth loading your site once after the switch and looking for rectangles. They're obvious when you know to look and invisible when you don't.
Frequently Asked Questions
What is an off-white color? Any very light color that isn't pure #FFFFFF. Either all three color channels come down together, giving a light gray, or one channel sits lower than the others, giving the white a warm or cool cast.
What is the hex code for off-white? There isn't one, and the places that tell you otherwise don't agree with each other. Off-white is a family rather than a single color. Any very light shade that isn't pure #FFFFFF belongs to it, which is how the six on this page can all be off-whites and all be different.
What's the difference between off-white, ivory, cream and beige? Off-white is the category. It covers anything close enough to white to still read as white, whether it leans warm, cool or neither. Ivory, cream and beige are particular warm shades inside that category, and they differ by how much yellow they carry and how far they fall from white: ivory is the lightest with the faintest yellow, cream is more obviously yellow, and beige is darker still, to the point where it starts reading as a pale brown rather than as a white. So every ivory is an off-white, but a cool off-white like Pearl on this page is none of the three, because all three are warm by definition. Exact hex values vary by source for all four.
Is off-white better than white for a website? For large background areas, usually. It cuts glare, it stops white product photos from bleeding into the page, and it frees up pure white to use as an accent. Pure white is still the right choice when you want something to be the brightest thing on screen.
How do I know if an off-white is warm or cool? Look at the three pairs of digits in the hex code: red, green, blue. If blue is the lowest number, it's warm. If blue is the highest, it's cool. If all three match, it has no tint at all.
Can I mix two different off-whites on one site? Only if they share a temperature. A warm off-white next to a cool one looks like a mistake rather than a choice, and it's the sort of thing people feel without being able to name.
Building a site right now? Try Squarespace free and save 20% on your first subscription with code SQUARESPACE20. Or browse our Squarespace templates – every one comes with a 12-month trial through our Platinum partner status.
