What are the hex codes in the Lush Watermelon & Celadon palette?

The Lush Watermelon & Celadon color palette consists of Juniper #2D6A4F, Watermelon #DF808E, Celadon #95D5B2, Eggshell #D8F3DC.

How should I use the Lush Watermelon & Celadon palette on a website?

Use Eggshell #D8F3DC as the background, Juniper #2D6A4F for text, Watermelon #DF808E for buttons and links, and Celadon #95D5B2 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Juniper on Eggshell at 5.41:1.

Which colors in Lush Watermelon & Celadon have enough contrast for text?

The highest-contrast pair is #2D6A4F on #D8F3DC with a ratio of 5.41:1, which passes WCAG AA for normal text.

#2D6A4FJuniper

#DF808EWatermelon

#95D5B2Celadon

#D8F3DCEggshell

Lush Watermelon & Celadon color palette

Modern Green Pink

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Juniper	`#2D6A4F`	`rgb(45, 106, 79)`	`hsl(153, 40%, 30%)`	`oklch(47.6% 0.078 162)`
Watermelon	`#DF808E`	`rgb(223, 128, 142)`	`hsl(351, 60%, 69%)`	`oklch(70.6% 0.118 11)`
Celadon	`#95D5B2`	`rgb(149, 213, 178)`	`hsl(147, 43%, 71%)`	`oklch(82.0% 0.082 160)`
Eggshell	`#D8F3DC`	`rgb(216, 243, 220)`	`hsl(129, 53%, 90%)`	`oklch(93.8% 0.042 150)`

Why it works and how to use it

Lush Watermelon & Celadon is a complementary color palette tagged modern, green, pink. Juniper and Eggshell 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, Watermelon takes the lead while the rest support. Lightness runs from 30% to 90%. Well suited to websites, presentations and branding.

Background: Eggshell (#D8F3DC) is the lightest color, so it belongs on large surfaces.
Text: Juniper (#2D6A4F) on #D8F3DC gives 5.41:1, passing WCAG AA.
Primary: Watermelon (#DF808E) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Celadon (#95D5B2) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Juniper on Eggshell at 5.41:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Lush Watermelon & Celadon

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

#2D6A4F

#DF808E

#95D5B2

#D8F3DC

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
`#2D6A4F` on `#D8F3DC`	Aa	5.41:1	AA
`#2D6A4F` on `#95D5B2`	Aa	3.79:1	AA large only
`#DF808E` on `#D8F3DC`	Aa	2.33:1	Fail
`#2D6A4F` on `#DF808E`	Aa	2.32:1	Fail
`#DF808E` on `#95D5B2`	Aa	1.63:1	Fail
`#95D5B2` on `#D8F3DC`	Aa	1.43:1	Fail

:root {
  --juniper: #2D6A4F;
  --watermelon: #DF808E;
  --celadon: #95D5B2;
  --eggshell: #D8F3DC;
}

$juniper: #2D6A4F;
$watermelon: #DF808E;
$celadon: #95D5B2;
$eggshell: #D8F3DC;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'juniper': '#2D6A4F',
        'watermelon': '#DF808E',
        'celadon': '#95D5B2',
        'eggshell': '#D8F3DC',
      },
    },
  },
};

{
  "name": "Lush Watermelon & Celadon",
  "colors": [
    "#2D6A4F",
    "#DF808E",
    "#95D5B2",
    "#D8F3DC"
  ]
}

background: linear-gradient(135deg, #2D6A4F, #DF808E, #95D5B2, #D8F3DC);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-08-05 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood