What are the hex codes in the Jade & Evergreen Breeze palette?

The Jade & Evergreen Breeze color palette consists of Cream #CDFFC8, Jade #3FB063, Fern #2C7040, Evergreen #004A14.

How should I use the Jade & Evergreen Breeze palette on a website?

Use Cream #CDFFC8 as the background, Evergreen #004A14 for text, Jade #3FB063 for buttons and links, and Fern #2C7040 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cream on Evergreen at 9.42:1.

Which colors in Jade & Evergreen Breeze have enough contrast for text?

The highest-contrast pair is #CDFFC8 on #004A14 with a ratio of 9.42:1, which passes WCAG AA for normal text.

#CDFFC8Cream

#3FB063Jade

#2C7040Fern

#004A14Evergreen

Jade & Evergreen Breeze color palette

Modern Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cream	`#CDFFC8`	`rgb(205, 255, 200)`	`hsl(115, 100%, 89%)`	`oklch(95.1% 0.089 142)`
Jade	`#3FB063`	`rgb(63, 176, 99)`	`hsl(139, 47%, 47%)`	`oklch(67.4% 0.152 151)`
Fern	`#2C7040`	`rgb(44, 112, 64)`	`hsl(138, 44%, 31%)`	`oklch(48.9% 0.103 150)`
Evergreen	`#004A14`	`rgb(0, 74, 20)`	`hsl(136, 100%, 15%)`	`oklch(35.6% 0.108 146)`

Why it works and how to use it

Jade & Evergreen Breeze is a vivid monochromatic color palette tagged modern, green. All four colors sit within 24° of hue, so the scheme reads as one color explored across light and dark. These are bold, punchy colors that need generous white space around them.

With 4 chromatic colors, Jade takes the lead while the rest support. Lightness runs from 15% to 89%. Well suited to websites, presentations and branding.

Background: Cream (#CDFFC8) is the lightest color, so it belongs on large surfaces.
Text: Evergreen (#004A14) on #CDFFC8 gives 9.42:1, passing WCAG AAA.
Primary: Jade (#3FB063) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Fern (#2C7040) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cream on Evergreen at 9.42:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Jade & Evergreen Breeze

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

#CDFFC8

#3FB063

#2C7040

#004A14

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
`#CDFFC8` on `#004A14`	Aa	9.42:1	AAA
`#CDFFC8` on `#2C7040`	Aa	5.35:1	AA
`#3FB063` on `#004A14`	Aa	3.82:1	AA large only
`#CDFFC8` on `#3FB063`	Aa	2.46:1	Fail
`#3FB063` on `#2C7040`	Aa	2.17:1	Fail
`#2C7040` on `#004A14`	Aa	1.76:1	Fail

Similar palettes 24 more in this mood