Greige, taupe, café au lait, graphite and espresso: 12 noble neutrals, a warm grey scale and 10 palettes — five light, five dark — with codes and contrast checks.
A site looks premium when its palette is quiet: low-saturation neutrals with one shared undertone — greige, taupe, café au lait, graphite, espresso — instead of pure white, pure black and bright accents. Contrast comes from lightness, not from color, and the only accent is muted, like bronze or graphite. Below: 12 noble neutrals with codes, a warm grey scale 50–950, seven pairings and ten palettes — five light and five dark.
Every shade here is almost grey, but none is dead grey: each carries a faint undertone — warm brownish, rosy or cool. That undertone is what makes a neutral look expensive. None of them leans yellow.
Milk
Page background instead of pure white
Pearl
Second background, section fills
Creamy grey
Cards and dividers on milk
Greige
Tags, borders, inactive states
Stone
Icons and secondary lines
Ash
A cool neutral for graphite palettes
Café au lait
A warm accent with no brightness
Taupe
Large captions and icons on light
Muted bronze
A quiet metal: buttons and thin lines
Graphite
Buttons and headings instead of black
Espresso
A warm near-black for text
Coal
The background of a dark theme
Eleven steps of greige from 50 to 950, built in OKLCH with a very low, even saturation: the scale stays warm from end to end but never turns yellow. The numbers under each step are its contrast with white and with black — for body text on light backgrounds take 700 and darker.
□ — contrast with white · ■ — with black. Text needs 4.5 and above
Each pairing holds on lightness: one deep neutral, one light, and a third as a quiet link between them.
Warm, deep and soft at once. The pairing of good hotels, coffee brands and interiors.
Strict and architectural. Graphite replaces black, stone softens it — for architecture, tech and B2B.
The softest of the set: warm grey-brown on a creamy white. Beauty, wellness, jewellery.
A dark evening base, a light neutral and a thread of metal. Watches, cars, private clubs.
Two steps of one brown family. Monochrome warmth that never feels flat — for food, leather goods and interiors.
The cool counterpart: blue-black ink with ash grey. For finance, law and technology.
A light base with a metallic accent — reads as quality without a single bright pixel.
No bright colors: the accent is always muted — bronze, café au lait, graphite or a light neutral on a dark background. Click a swatch to copy its code; the CSS button copies all variables; the card can be saved as an image. Contrast is checked by WCAG.
01 / 10
light · warm · classic
When to use Hotels, restaurants, interior studios, premium services.
Tip The button is espresso, not black: on a warm background pure black looks like a hole.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
02 / 10
light · soft · metal accent
When to use Jewellery, watches, cosmetics, boutique shops.
Tip Bronze works as a thin line and a button — never as a large fill, or it turns into plain brown.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
03 / 10
light · strict · architectural
When to use Architecture, development, tech and consulting.
Tip The almost-neutral background with a hint of warmth keeps graphite from feeling cold and corporate.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
04 / 10
light · cosy · warm
When to use Coffee and bakeries, home goods, lifestyle brands.
Tip Keep every tone of this palette in one brown family — one cool grey breaks the whole warmth.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
05 / 10
light · gentle · quiet
When to use Beauty, wellness, clinics of aesthetic medicine, weddings.
Tip Taupe is the quietest accent possible — pair it with a lot of air and light typography.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
06 / 10
dark · warm · evening
When to use Restaurants, wine and spirits, evening venues.
Tip On a warm dark background the accent is a light latte beige, and the button label is dark.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
07 / 10
dark · cool · technical
When to use Premium tech, audio, cars, developer products.
Tip The background is not black but graphite with a cool cast — black kills depth on large areas.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
08 / 10
dark · luxury · metal accent
When to use Watches, jewellery, private banking, luxury real estate.
Tip Bronze on coal reads as gold, but without the cheap shine of yellow.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
09 / 10
dark · soft · warm
When to use Interiors, furniture, fashion, galleries.
Tip The softest dark theme: not black, but warm grey-brown. Pictures and products look richer on it.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
10 / 10
dark · contrasting · modern
When to use Studios, agencies, architecture portfolios, fashion.
Tip A cool dark base and a warm creamy accent — the only temperature contrast in the set, and it is enough.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
01
Milk #F6F3EF instead of #FFFFFF and espresso #2A211C instead of #000000. The contrast barely changes, but the harshness is gone.
02
Keep all neutrals either warm or cool. Warm and cool greys side by side look dirty, even when each is beautiful on its own.
03
A premium palette separates elements not by hue but by lightness: milk, cream grey, greige, taupe, espresso. The eye reads the hierarchy calmly.
04
Bronze, café au lait, graphite — accents that feel like a material. Use them for buttons and thin lines, on no more than 5–10% of the screen.
05
Shift beige toward grey or a faint pink, keep saturation very low. The test: next to white it should look like linen, not like old paper.
06
A quiet palette needs generous spacing and restrained typography. In a cramped layout the same colors look dull rather than expensive.
The CSS keyword beige (#F5F5DC) and its relatives look like aged paper. Premium beige is greyer and lower in saturation.
A cool grey card on a warm beige background looks like a mistake. Pick one undertone and keep it everywhere.
Pale grey text on a light background looks refined in a mockup and unreadable on a real screen. Body text needs at least 4.5:1.
Shiny gold gradients and glitter read as imitation. Real luxury uses flat muted metal tones.
Greys picked by eye drift in temperature. Take them from one scale — then they differ only in lightness.
Low-saturation neutrals with one shared undertone — greige, taupe, café au lait, graphite, espresso — plus one muted accent like bronze. Pure white, pure black and bright colors make a site look cheaper.
Take a beige with very low saturation, shifted toward grey or a faint pink, such as #EFEBE5 or #E3DCD3. Compare it with white: it should look like linen, not like old paper.
A near-black with an undertone: espresso #2A211C in warm palettes, graphite #3F4145 or blue-black #23272D in cool ones. For a dark theme background — coal #161515 or graphite #1B1D20.
It needs an accent, but not a bright one. Buttons and key lines can be bronze, café au lait or graphite — distinct from the neutrals by lightness rather than by saturation.
Both can. A light theme on milk and cream reads as calm and open; a dark one on coal or espresso reads as evening and exclusive. What matters is avoiding pure black and white in either.
Greige is grey mixed with beige — a warm light neutral like #CFC7BC. Taupe is a deeper grey-brown like #8B7D72. Both are the basis of most premium palettes.
