Espresso color: hex codes, shades and palettes
Palettes built around espresso. Click any swatch to copy its hex code.
Espresso is the deep, almost-black brown of a fresh shot — dark enough to work as a background, warm enough to never read as grey. A common value is #3C2218, though unlike a CSS keyword there is no single official definition.
No espresso palettes yet
Run npm run generate to build the dataset.
Espresso hex, RGB, HSL and OKLCH
- HEX
#3C2218- RGB
rgb(60, 34, 24)- HSL
hsl(17, 43%, 16%)- OKLCH
oklch(28.3% 0.044 41.7)- On white
- 14.64:1
- On black
- 1.43:1
Shades of espresso
Eleven steps from one base color, generated in OKLCH so each step is an equal perceived step rather than an equal numeric one. Click a swatch to copy it.
Named shades and close relatives
A note on Pantone
Espresso is often searched for alongside Pantone. Pantone is a proprietary color matching system, and its numbered values are licensed rather than public, so no Pantone codes are reproduced here — any site listing them freely is republishing licensed data.
For print work the practical route is Pantone's own tools or a physical guide, since the whole point of the system is matching ink on paper, which no screen value can guarantee. What this page gives you is the screen side: a hex value, a shade scale and palettes that work.
Where espresso works
Coffee and food branding for the obvious reason, but it earns its place more widely as a warm alternative to black. Dark interfaces built on espresso rather than neutral grey feel less clinical, and it is a common base for leather goods, whisky, menswear and any brand reaching for craft rather than tech.
It pairs with cream and ivory for contrast without harshness, with brass or gold for warmth, and with sage or olive for something earthier. Against pure black it loses its identity entirely.
Contrast and readability
Espresso on white measures 14.64:1 and on black 1.43:1. WCAG AA asks for 4.5:1 on normal text and 3:1 on large text and UI components, so the higher of those two decides which background it belongs on. In the scale above, 500 is the first to clear 4.5:1 on white, at 5.36:1.
The contrast checker reports every level for a given pair and suggests the nearest passing shade on the same hue. The color picker builds this same scale from any color you paste in.
Espresso color questions
- What is the hex code for espresso?
- There is no official value — espresso is a descriptive name rather than a specified color. #3C2218 is a common choice: a very dark warm brown. Anything from roughly #3C2218 to #4A2C2A reads as espresso.
- Is espresso the same as dark brown?
- It is a dark brown with a specific character: warm, slightly red, and dark enough to substitute for black. A neutral dark brown reads flatter and less appetising.
- What colors go with espresso?
- Cream and ivory for contrast without harshness, brass or gold for warmth, sage and olive for an earthier scheme. Avoid pairing it with pure black, where it stops reading as brown at all.
Related colors:chocolate, mocha, coffee. See every shade on the colors index.