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

The Lush Bubblegum & Celadon color palette consists of Snow #FFF8FA, Bubblegum #FFC1CE, Celadon #A9D9B9, Gray #697E71.

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

Use Snow #FFF8FA as the background, Gray #697E71 for text, Bubblegum #FFC1CE for buttons and links, and Celadon #A9D9B9 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

The highest-contrast pair is #FFF8FA on #697E71 with a ratio of 4.16:1, which passes WCAG AA for large text only.

#FFF8FASnow

#FFC1CEBubblegum

#A9D9B9Celadon

#697E71Gray

Lush Bubblegum & Celadon color palette

Spring Muted White Pink Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Snow	`#FFF8FA`	`rgb(255, 248, 250)`	`hsl(343, 100%, 99%)`	`oklch(98.5% 0.008 358)`
Bubblegum	`#FFC1CE`	`rgb(255, 193, 206)`	`hsl(347, 100%, 88%)`	`oklch(87.0% 0.073 5)`
Celadon	`#A9D9B9`	`rgb(169, 217, 185)`	`hsl(140, 39%, 76%)`	`oklch(84.3% 0.067 156)`
Gray	`#697E71`	`rgb(105, 126, 113)`	`hsl(143, 9%, 45%)`	`oklch(57.2% 0.032 158)`

Why it works and how to use it

Lush Bubblegum & Celadon is a light, complementary color palette tagged spring, muted, white. Near-complementary hues (about 153° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

It works because the lightness range is wide (45% to 99%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.

Background: Snow (#FFF8FA) is the lightest color, so it belongs on large surfaces.
Text: Gray (#697E71) on #FFF8FA gives 4.16:1, enough for large headings only.
Primary: Bubblegum (#FFC1CE) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Celadon (#A9D9B9) 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 Lush Bubblegum & 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

#FFF8FA

#FFC1CE

#A9D9B9

#697E71

Color-blind check: under protanopia and deuteranopia, Bubblegum and Celadon 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
`#FFF8FA` on `#697E71`	Aa	4.16:1	AA large only
`#FFC1CE` on `#697E71`	Aa	2.86:1	Fail
`#A9D9B9` on `#697E71`	Aa	2.76:1	Fail
`#FFF8FA` on `#A9D9B9`	Aa	1.51:1	Fail
`#FFF8FA` on `#FFC1CE`	Aa	1.46:1	Fail
`#FFC1CE` on `#A9D9B9`	Aa	1.03:1	Fail

Similar palettes 24 more in this mood