What are the hex codes in the Celadon & Cream Trail palette?

The Celadon & Cream Trail color palette consists of Cream #E9F9C3, Celadon #C3D391, Stone #9E9172, Dove Gray #69645C.

How should I use the Celadon & Cream Trail palette on a website?

Use Cream #E9F9C3 as the background, Dove Gray #69645C for text, Celadon #C3D391 for buttons and links, and Stone #9E9172 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cream on Dove Gray at 5.26:1.

Which colors in Celadon & Cream Trail have enough contrast for text?

The highest-contrast pair is #E9F9C3 on #69645C with a ratio of 5.26:1, which passes WCAG AA for normal text.

#E9F9C3Cream

#C3D391Celadon

#9E9172Stone

#69645CDove Gray

Celadon & Cream Trail color palette

Muted Beige Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cream	`#E9F9C3`	`rgb(233, 249, 195)`	`hsl(78, 82%, 87%)`	`oklch(95.7% 0.072 121)`
Celadon	`#C3D391`	`rgb(195, 211, 145)`	`hsl(75, 43%, 70%)`	`oklch(83.9% 0.089 119)`
Stone	`#9E9172`	`rgb(158, 145, 114)`	`hsl(42, 18%, 53%)`	`oklch(66.0% 0.046 88)`
Dove Gray	`#69645C`	`rgb(105, 100, 92)`	`hsl(37, 7%, 39%)`	`oklch(50.5% 0.014 80)`

Why it works and how to use it

Celadon & Cream Trail is an analogous color palette tagged muted, beige, gray. The hues stay within 36° of each other on the color wheel, which is why the palette feels cohesive rather than busy. Neither washed out nor loud, it adapts to most contexts.

With 3 chromatic colors, Celadon takes the lead while the rest support. Lightness runs from 39% to 87%. Well suited to websites, presentations and branding.

Background: Cream (#E9F9C3) is the lightest color, so it belongs on large surfaces.
Text: Dove Gray (#69645C) on #E9F9C3 gives 5.26:1, passing WCAG AA.
Primary: Celadon (#C3D391) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Stone (#9E9172) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cream on Dove Gray at 5.26:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Celadon & Cream Trail

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

#E9F9C3

#C3D391

#9E9172

#69645C

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
`#E9F9C3` on `#69645C`	Aa	5.26:1	AA
`#C3D391` on `#69645C`	Aa	3.65:1	AA large only
`#E9F9C3` on `#9E9172`	Aa	2.79:1	Fail
`#C3D391` on `#9E9172`	Aa	1.93:1	Fail
`#9E9172` on `#69645C`	Aa	1.89:1	Fail
`#E9F9C3` on `#C3D391`	Aa	1.44:1	Fail

Similar palettes 24 more in this mood