What are the hex codes in the Elegant Sand & Melon palette?

The Elegant Sand & Melon color palette consists of Sand #B5AD75, Mushroom #CEAFB4, Melon #FCC3B0, Champagne #FDE7CF.

How should I use the Elegant Sand & Melon palette on a website?

Use Champagne #FDE7CF as the background, Sand #B5AD75 for text, Melon #FCC3B0 for buttons and links, and Mushroom #CEAFB4 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Elegant Sand & Melon have enough contrast for text?

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

#B5AD75Sand

#CEAFB4Mushroom

#FCC3B0Melon

#FDE7CFChampagne

Elegant Sand & Melon color palette

Pastel Muted Warm Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Sand	`#B5AD75`	`rgb(181, 173, 117)`	`hsl(53, 30%, 58%)`	`oklch(74.1% 0.075 101)`
Mushroom	`#CEAFB4`	`rgb(206, 175, 180)`	`hsl(350, 24%, 75%)`	`oklch(78.2% 0.037 7)`
Melon	`#FCC3B0`	`rgb(252, 195, 176)`	`hsl(15, 93%, 84%)`	`oklch(86.3% 0.071 39)`
Champagne	`#FDE7CF`	`rgb(253, 231, 207)`	`hsl(31, 92%, 90%)`	`oklch(93.9% 0.040 70)`

Why it works and how to use it

Elegant Sand & Melon is a pastel light, analogous color palette tagged pastel, muted, warm. Analogous neighbors on the wheel (Sand, Mushroom, Melon) give it a natural, low-tension flow. High lightness and gentle saturation put it firmly in pastel territory. The overall temperature is warm.

It works because the lightness steps are gentle (58% to 90%), which keeps the mood consistent from edge to edge. Try it for social media templates and gentle interfaces.

Background: Champagne (#FDE7CF) is the lightest color, so it belongs on large surfaces.
Text: Sand (#B5AD75) on #FDE7CF gives 1.9:1, so pair it with a darker neutral for body copy.
Primary: Melon (#FCC3B0) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Mushroom (#CEAFB4) 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 Elegant Sand & Melon

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

#B5AD75

#CEAFB4

#FCC3B0

#FDE7CF

Color-blind check: under protanopia and deuteranopia and tritanopia, Mushroom and Melon become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#B5AD75` on `#FDE7CF`	Aa	1.9:1	Fail
`#CEAFB4` on `#FDE7CF`	Aa	1.68:1	Fail
`#B5AD75` on `#FCC3B0`	Aa	1.48:1	Fail
`#CEAFB4` on `#FCC3B0`	Aa	1.3:1	Fail
`#FCC3B0` on `#FDE7CF`	Aa	1.29:1	Fail
`#B5AD75` on `#CEAFB4`	Aa	1.13:1	Fail

Similar palettes 24 more in this mood