What are the hex codes in the Watermelon & Clay Shore palette?

The Watermelon & Clay Shore color palette consists of Espresso #442D00, Clay #B66F51, Watermelon #DB7F90, Cotton Candy #F7B8EA.

How should I use the Watermelon & Clay Shore palette on a website?

Use Cotton Candy #F7B8EA as the background, Espresso #442D00 for text, Watermelon #DB7F90 for buttons and links, and Clay #B66F51 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Cotton Candy at 8.02:1.

Which colors in Watermelon & Clay Shore have enough contrast for text?

The highest-contrast pair is #442D00 on #F7B8EA with a ratio of 8.02:1, which passes WCAG AA for normal text.

#442D00Espresso

#B66F51Clay

#DB7F90Watermelon

#F7B8EACotton Candy

Watermelon & Clay Shore color palette

Warm Earthy Pink

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Espresso	`#442D00`	`rgb(68, 45, 0)`	`hsl(40, 100%, 13%)`	`oklch(31.7% 0.066 78)`
Clay	`#B66F51`	`rgb(182, 111, 81)`	`hsl(18, 41%, 52%)`	`oklch(61.2% 0.100 43)`
Watermelon	`#DB7F90`	`rgb(219, 127, 144)`	`hsl(349, 56%, 68%)`	`oklch(70.0% 0.115 9)`
Cotton Candy	`#F7B8EA`	`rgb(247, 184, 234)`	`hsl(312, 80%, 85%)`	`oklch(85.5% 0.097 334)`

Why it works and how to use it

Watermelon & Clay Shore is a vivid split color palette tagged warm, earthy, pink. The hues span about 88°, enough contrast to create a focal point without the harshness of true complements. These are bold, punchy colors that need generous white space around them. The overall temperature is warm.

With 4 chromatic colors, Watermelon takes the lead while the rest support. Lightness runs from 13% to 85%. Well suited to wellness, organic and outdoor brands.

Background: Cotton Candy (#F7B8EA) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#442D00) on #F7B8EA gives 8.02:1, passing WCAG AAA.
Primary: Watermelon (#DB7F90) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Clay (#B66F51) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Cotton Candy at 8.02:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Watermelon & Clay Shore

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

#442D00

#B66F51

#DB7F90

#F7B8EA

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
`#442D00` on `#F7B8EA`	Aa	8.02:1	AAA
`#442D00` on `#DB7F90`	Aa	4.6:1	AA
`#442D00` on `#B66F51`	Aa	3.32:1	AA large only
`#B66F51` on `#F7B8EA`	Aa	2.42:1	Fail
`#DB7F90` on `#F7B8EA`	Aa	1.74:1	Fail
`#B66F51` on `#DB7F90`	Aa	1.38:1	Fail

:root {
  --espresso: #442D00;
  --clay: #B66F51;
  --watermelon: #DB7F90;
  --cotton-candy: #F7B8EA;
}

$espresso: #442D00;
$clay: #B66F51;
$watermelon: #DB7F90;
$cotton-candy: #F7B8EA;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'espresso': '#442D00',
        'clay': '#B66F51',
        'watermelon': '#DB7F90',
        'cotton-candy': '#F7B8EA',
      },
    },
  },
};

{
  "name": "Watermelon & Clay Shore",
  "colors": [
    "#442D00",
    "#B66F51",
    "#DB7F90",
    "#F7B8EA"
  ]
}

background: linear-gradient(135deg, #442D00, #B66F51, #DB7F90, #F7B8EA);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-05-26 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood