What are the hex codes in the Aqua Fern & Sage palette?

The Aqua Fern & Sage color palette consists of Evergreen #1E4C30, Fern #368861, Sage #62B692, Powder Blue #B8DFCE.

How should I use the Aqua Fern & Sage palette on a website?

Use Powder Blue #B8DFCE as the background, Evergreen #1E4C30 for text, Fern #368861 for buttons and links, and Sage #62B692 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Powder Blue at 6.79:1.

Which colors in Aqua Fern & Sage have enough contrast for text?

The highest-contrast pair is #1E4C30 on #B8DFCE with a ratio of 6.79:1, which passes WCAG AA for normal text.

#1E4C30Evergreen

#368861Fern

#62B692Sage

#B8DFCEPowder Blue

Aqua Fern & Sage color palette

Gradient Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Evergreen	`#1E4C30`	`rgb(30, 76, 48)`	`hsl(143, 43%, 21%)`	`oklch(37.6% 0.070 154)`
Fern	`#368861`	`rgb(54, 136, 97)`	`hsl(151, 43%, 37%)`	`oklch(56.5% 0.101 160)`
Sage	`#62B692`	`rgb(98, 182, 146)`	`hsl(154, 37%, 55%)`	`oklch(71.3% 0.099 164)`
Powder Blue	`#B8DFCE`	`rgb(184, 223, 206)`	`hsl(154, 38%, 80%)`	`oklch(87.1% 0.047 167)`

Why it works and how to use it

Aqua Fern & Sage is a monochromatic color palette tagged gradient, green. A monochromatic set: the same hue family from Evergreen down to Powder Blue. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.

With 4 chromatic colors, Fern takes the lead while the rest support. Lightness runs from 21% to 80%. Well suited to websites, presentations and branding.

Background: Powder Blue (#B8DFCE) is the lightest color, so it belongs on large surfaces.
Text: Evergreen (#1E4C30) on #B8DFCE gives 6.79:1, passing WCAG AA.
Primary: Fern (#368861) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sage (#62B692) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Powder Blue at 6.79:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Aqua Fern & 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

#1E4C30

#368861

#62B692

#B8DFCE

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
`#1E4C30` on `#B8DFCE`	Aa	6.79:1	AA
`#1E4C30` on `#62B692`	Aa	4.05:1	AA large only
`#368861` on `#B8DFCE`	Aa	2.99:1	Fail
`#1E4C30` on `#368861`	Aa	2.28:1	Fail
`#368861` on `#62B692`	Aa	1.78:1	Fail
`#62B692` on `#B8DFCE`	Aa	1.68:1	Fail

Similar palettes 24 more in this mood