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

The Lush Tulip & Celadon color palette consists of Tulip #FF7B8A, Ballet #FFD5DC, Celadon #95E589, Fern #468266.

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

Use Ballet #FFD5DC as the background, Fern #468266 for text, Tulip #FF7B8A for buttons and links, and Celadon #95E589 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

The highest-contrast pair is #FFD5DC on #468266 with a ratio of 3.4:1, which passes WCAG AA for large text only.

#FF7B8ATulip

#FFD5DCBallet

#95E589Celadon

#468266Fern

Lush Tulip & Celadon color palette

Summer Pink Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Tulip	`#FF7B8A`	`rgb(255, 123, 138)`	`hsl(353, 100%, 74%)`	`oklch(74.0% 0.161 15)`
Ballet	`#FFD5DC`	`rgb(255, 213, 220)`	`hsl(350, 100%, 92%)`	`oklch(91.1% 0.048 7)`
Celadon	`#95E589`	`rgb(149, 229, 137)`	`hsl(112, 64%, 72%)`	`oklch(84.8% 0.147 141)`
Fern	`#468266`	`rgb(70, 130, 102)`	`hsl(152, 30%, 39%)`	`oklch(55.8% 0.077 162)`

Why it works and how to use it

Lush Tulip & Celadon is a vivid complementary color palette tagged summer, pink, green. Tulip and Fern sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Tulip takes the lead while the rest support. Lightness runs from 39% to 92%. Well suited to websites, presentations and branding.

Background: Ballet (#FFD5DC) is the lightest color, so it belongs on large surfaces.
Text: Fern (#468266) on #FFD5DC gives 3.4:1, enough for large headings only.
Primary: Tulip (#FF7B8A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Celadon (#95E589) 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 Tulip & 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

#FF7B8A

#FFD5DC

#95E589

#468266

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
`#FFD5DC` on `#468266`	Aa	3.4:1	AA large only
`#95E589` on `#468266`	Aa	2.98:1	Fail
`#FF7B8A` on `#FFD5DC`	Aa	1.87:1	Fail
`#FF7B8A` on `#468266`	Aa	1.82:1	Fail
`#FF7B8A` on `#95E589`	Aa	1.64:1	Fail
`#FFD5DC` on `#95E589`	Aa	1.14:1	Fail

Similar palettes 24 more in this mood