What are the hex codes in the Leafy Tulip & Sage palette?

The Leafy Tulip & Sage color palette consists of Thistle #DCC6CB, Tulip #D48999, Sage #7BAA8B, Graphite #3A4E42.

How should I use the Leafy Tulip & Sage palette on a website?

Use Thistle #DCC6CB as the background, Graphite #3A4E42 for text, Tulip #D48999 for buttons and links, and Sage #7BAA8B for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Thistle on Graphite at 5.53:1.

Which colors in Leafy Tulip & Sage have enough contrast for text?

The highest-contrast pair is #DCC6CB on #3A4E42 with a ratio of 5.53:1, which passes WCAG AA for normal text.

#DCC6CBThistle

#D48999Tulip

#7BAA8BSage

#3A4E42Graphite

Leafy Tulip & Sage color palette

Muted Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Thistle	`#DCC6CB`	`rgb(220, 198, 203)`	`hsl(346, 24%, 82%)`	`oklch(84.6% 0.026 2)`
Tulip	`#D48999`	`rgb(212, 137, 153)`	`hsl(347, 47%, 68%)`	`oklch(71.1% 0.094 6)`
Sage	`#7BAA8B`	`rgb(123, 170, 139)`	`hsl(140, 22%, 57%)`	`oklch(69.6% 0.068 155)`
Graphite	`#3A4E42`	`rgb(58, 78, 66)`	`hsl(144, 15%, 27%)`	`oklch(40.3% 0.032 158)`

Why it works and how to use it

Leafy Tulip & Sage is a complementary color palette tagged muted, gray. Near-complementary hues (about 154° 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.

With 3 chromatic colors, Tulip takes the lead while the rest support. Lightness runs from 27% to 82%. Well suited to websites, presentations and branding.

Background: Thistle (#DCC6CB) is the lightest color, so it belongs on large surfaces.
Text: Graphite (#3A4E42) on #DCC6CB gives 5.53:1, passing WCAG AA.
Primary: Tulip (#D48999) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sage (#7BAA8B) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Thistle on Graphite at 5.53:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Leafy Tulip & Sage

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

#DCC6CB

#D48999

#7BAA8B

#3A4E42

Color-blind check: under protanopia and deuteranopia, Tulip and Sage 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
`#DCC6CB` on `#3A4E42`	Aa	5.53:1	AA
`#7BAA8B` on `#3A4E42`	Aa	3.39:1	AA large only
`#D48999` on `#3A4E42`	Aa	3.34:1	AA large only
`#DCC6CB` on `#D48999`	Aa	1.66:1	Fail
`#DCC6CB` on `#7BAA8B`	Aa	1.63:1	Fail
`#D48999` on `#7BAA8B`	Aa	1.02:1	Fail

Similar palettes 24 more in this mood