What are the hex codes in the Sunny Latte & Tan palette?

The Sunny Latte & Tan color palette consists of Tan #E6BF7E, Latte #D9996B, Cadet #6398A8, Lavender Gray #A6C6D5.

How should I use the Sunny Latte & Tan palette on a website?

Use Tan #E6BF7E as the background, Cadet #6398A8 for text, Latte #D9996B for buttons and links, and Lavender Gray #A6C6D5 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Sunny Latte & Tan have enough contrast for text?

The highest-contrast pair is #E6BF7E on #6398A8 with a ratio of 1.84:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#E6BF7ETan

#D9996BLatte

#6398A8Cadet

#A6C6D5Lavender Gray

Sunny Latte & Tan color palette

Summer Muted Beige Brown Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Tan	`#E6BF7E`	`rgb(230, 191, 126)`	`hsl(38, 68%, 70%)`	`oklch(82.4% 0.094 80)`
Latte	`#D9996B`	`rgb(217, 153, 107)`	`hsl(25, 59%, 64%)`	`oklch(73.5% 0.098 56)`
Cadet	`#6398A8`	`rgb(99, 152, 168)`	`hsl(194, 28%, 52%)`	`oklch(64.8% 0.061 219)`
Lavender Gray	`#A6C6D5`	`rgb(166, 198, 213)`	`hsl(199, 36%, 74%)`	`oklch(80.8% 0.040 228)`

Why it works and how to use it

Sunny Latte & Tan is a complementary color palette tagged summer, muted, beige. Tan and Lavender Gray sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Latte takes the lead while the rest support. Lightness runs from 52% to 74%. Well suited to websites, presentations and branding.

Background: Tan (#E6BF7E) is the lightest color, so it belongs on large surfaces.
Text: Cadet (#6398A8) on #E6BF7E gives 1.84:1, so pair it with a darker neutral for body copy.
Primary: Latte (#D9996B) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Lavender Gray (#A6C6D5) 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 Sunny Latte & Tan

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

#E6BF7E

#D9996B

#6398A8

#A6C6D5

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
`#E6BF7E` on `#6398A8`	Aa	1.84:1	Fail
`#6398A8` on `#A6C6D5`	Aa	1.77:1	Fail
`#E6BF7E` on `#D9996B`	Aa	1.39:1	Fail
`#D9996B` on `#A6C6D5`	Aa	1.34:1	Fail
`#D9996B` on `#6398A8`	Aa	1.32:1	Fail
`#E6BF7E` on `#A6C6D5`	Aa	1.04:1	Fail

Similar palettes 24 more in this mood