What are the hex codes in the Sage & Storm Echo palette?

The Sage & Storm Echo color palette consists of Gunmetal #1E3033, Storm #456578, Sage #98BD9B, Ivory #F4FFE6.

How should I use the Sage & Storm Echo palette on a website?

Use Ivory #F4FFE6 as the background, Gunmetal #1E3033 for text, Storm #456578 for buttons and links, and Sage #98BD9B for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Ivory at 13.3:1.

Which colors in Sage & Storm Echo have enough contrast for text?

The highest-contrast pair is #1E3033 on #F4FFE6 with a ratio of 13.3:1, which passes WCAG AA for normal text.

#1E3033Gunmetal

#456578Storm

#98BD9BSage

#F4FFE6Ivory

Sage & Storm Echo color palette

Dark Muted Minimal Gray Green White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Gunmetal	`#1E3033`	`rgb(30, 48, 51)`	`hsl(189, 26%, 16%)`	`oklch(29.5% 0.024 209)`
Storm	`#456578`	`rgb(69, 101, 120)`	`hsl(202, 27%, 37%)`	`oklch(49.0% 0.048 235)`
Sage	`#98BD9B`	`rgb(152, 189, 155)`	`hsl(125, 22%, 67%)`	`oklch(76.2% 0.062 147)`
Ivory	`#F4FFE6`	`rgb(244, 255, 230)`	`hsl(86, 100%, 95%)`	`oklch(98.5% 0.035 126)`

Why it works and how to use it

Sage & Storm Echo is a split color palette tagged dark, muted, minimal. The hues span about 77°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.

With 3 chromatic colors, Storm takes the lead while the rest support. Lightness runs from 16% to 95%. Well suited to websites, presentations and branding.

Background: Ivory (#F4FFE6) is the lightest color, so it belongs on large surfaces.
Text: Gunmetal (#1E3033) on #F4FFE6 gives 13.3:1, passing WCAG AAA.
Primary: Storm (#456578) is the most saturated mid-tone; use it for buttons and links (5.99:1 against the background, fine for UI elements).
Accent: Sage (#98BD9B) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Ivory at 13.3:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Sage & Storm Echo

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

#1E3033

#456578

#98BD9B

#F4FFE6

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
`#1E3033` on `#F4FFE6`	Aa	13.3:1	AAA
`#1E3033` on `#98BD9B`	Aa	6.61:1	AA
`#456578` on `#F4FFE6`	Aa	5.99:1	AA
`#456578` on `#98BD9B`	Aa	2.98:1	Fail
`#1E3033` on `#456578`	Aa	2.22:1	Fail
`#98BD9B` on `#F4FFE6`	Aa	2.01:1	Fail

Similar palettes 24 more in this mood