What are the hex codes in the Sunbaked Adobe palette?

The Sunbaked Adobe color palette consists of Sienna #A44A3F, Latte #D4A373, Vanilla #DCE3A8, Bisque #FBE6C2.

How should I use the Sunbaked Adobe palette on a website?

Use Bisque #FBE6C2 as the background, Sienna #A44A3F for text, Latte #D4A373 for buttons and links, and Vanilla #DCE3A8 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Sienna on Bisque at 4.74:1.

Which colors in Sunbaked Adobe have enough contrast for text?

The highest-contrast pair is #A44A3F on #FBE6C2 with a ratio of 4.74:1, which passes WCAG AA for normal text.

#A44A3FSienna

#D4A373Latte

#DCE3A8Vanilla

#FBE6C2Bisque

Sunbaked Adobe color palette

Boho Warm Brown Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Sienna	`#A44A3F`	`rgb(164, 74, 63)`	`hsl(7, 44%, 45%)`	`oklch(52.2% 0.122 29)`
Latte	`#D4A373`	`rgb(212, 163, 115)`	`hsl(30, 53%, 64%)`	`oklch(75.0% 0.086 65)`
Vanilla	`#DCE3A8`	`rgb(220, 227, 168)`	`hsl(67, 51%, 77%)`	`oklch(89.6% 0.077 113)`
Bisque	`#FBE6C2`	`rgb(251, 230, 194)`	`hsl(38, 88%, 87%)`	`oklch(93.3% 0.052 81)`

Why it works and how to use it

Sunbaked Adobe is an analogous color palette tagged boho, warm, brown. Analogous neighbors on the wheel (Sienna, Latte, Vanilla) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

The palette holds together thanks to its analogous hue relationship and a soft light-to-dark ladder (87% down to 45% lightness). A natural fit for websites, presentations and branding.

Background: Bisque (#FBE6C2) is the lightest color, so it belongs on large surfaces.
Text: Sienna (#A44A3F) on #FBE6C2 gives 4.74:1, passing WCAG AA.
Primary: Latte (#D4A373) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Vanilla (#DCE3A8) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Sienna on Bisque at 4.74:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Sunbaked Adobe

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

#A44A3F

#D4A373

#DCE3A8

#FBE6C2

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
`#A44A3F` on `#FBE6C2`	Aa	4.74:1	AA
`#A44A3F` on `#DCE3A8`	Aa	4.3:1	AA large only
`#A44A3F` on `#D4A373`	Aa	2.56:1	Fail
`#D4A373` on `#FBE6C2`	Aa	1.85:1	Fail
`#D4A373` on `#DCE3A8`	Aa	1.68:1	Fail
`#DCE3A8` on `#FBE6C2`	Aa	1.1:1	Fail

Similar palettes 24 more in this mood