What are the hex codes in the Old Latte & Putty palette?

The Old Latte & Putty color palette consists of Latte #BBA77C, Putty #CFC2A5, Stone #898A78, Linen #F0EEE6.

How should I use the Old Latte & Putty palette on a website?

Use Linen #F0EEE6 as the background, Stone #898A78 for text, Latte #BBA77C for buttons and links, and Putty #CFC2A5 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Old Latte & Putty have enough contrast for text?

The highest-contrast pair is #898A78 on #F0EEE6 with a ratio of 3.03:1, which passes WCAG AA for large text only.

#BBA77CLatte

#CFC2A5Putty

#898A78Stone

#F0EEE6Linen

Old Latte & Putty color palette

Vintage Muted Earthy Brown Beige Gray White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Latte	`#BBA77C`	`rgb(187, 167, 124)`	`hsl(41, 32%, 61%)`	`oklch(73.5% 0.063 86)`
Putty	`#CFC2A5`	`rgb(207, 194, 165)`	`hsl(41, 30%, 73%)`	`oklch(81.7% 0.042 87)`
Stone	`#898A78`	`rgb(137, 138, 120)`	`hsl(63, 7%, 51%)`	`oklch(62.7% 0.026 110)`
Linen	`#F0EEE6`	`rgb(240, 238, 230)`	`hsl(48, 25%, 92%)`	`oklch(94.8% 0.011 95)`

Why it works and how to use it

Old Latte & Putty is a monochromatic color palette tagged vintage, muted, earthy. A monochromatic set: the same hue family from Stone down to Linen. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

With 3 chromatic colors, Latte takes the lead while the rest support. Lightness runs from 51% to 92%. Well suited to wellness, organic and outdoor brands.

Background: Linen (#F0EEE6) is the lightest color, so it belongs on large surfaces.
Text: Stone (#898A78) on #F0EEE6 gives 3.03:1, enough for large headings only.
Primary: Latte (#BBA77C) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Putty (#CFC2A5) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Old Latte & Putty

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#BBA77C

#CFC2A5

#898A78

#F0EEE6

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#898A78` on `#F0EEE6`	Aa	3.03:1	AA large only
`#BBA77C` on `#F0EEE6`	Aa	2.02:1	Fail
`#CFC2A5` on `#898A78`	Aa	2:1	Fail
`#CFC2A5` on `#F0EEE6`	Aa	1.52:1	Fail
`#BBA77C` on `#898A78`	Aa	1.5:1	Fail
`#BBA77C` on `#CFC2A5`	Aa	1.33:1	Fail

Similar palettes 24 more in this mood