#F5FBF9
#D4E3DE
#374B00
#0A1100
#1E3033Gunmetal
#456578Storm
#98BD9BSage
#F4FFE6Ivory
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.
Color codes click any value to copy
| Swatch | 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
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 SecondaryCard title
Card title
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.
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
#3E2723
#6D4C41
#A1887F
#EFEBE9
#0B0F14
#3C4552
#2EE6A6
#E6EDF3
#18191A
#4F5052
#B8F53F
#F7F7F5
#2B2B2B
#4A4A4A
#A6E22E
#F5F5F5
#F0F6FF
#A7C9FA
#6C5A3F
#262320
#F5F5F5
#CBCBCB
#3A5400
#2B2B2B
#F3EBDD
#DCCFB8
#436449
#1C2A20
#0A0A0A
#3D3D3D
#B3FFB0
#FDFDFD
#DEF5F9
#7798AC
#37583B
#171F0C
#FFE5E1
#A98579
#664F47
#302D2C
#0F0F0F
#444444
#049C65
#F4EEE8
#1E1B18
#6B5D4F
#C9B79C
#F4EFE6
#0B0F0E
#3A4642
#BEF62F
#F3FFE0
#222831
#575D65
#00ADB5
#EEEEEE
#F5EEE6
#E1D3C2
#6B3A5B
#3A1F33
#302521
#72584A
#C49A78
#FFF9F3
#000000
#3A3A3A
#D4AF37
#F2F2F2
#212529
#525A61
#ADB5BD
#F8F9FA
#0A0A0A
#3D3D3D
#CCFF00
#FFFFFF
#1E1E1E
#575757
#8A8A8A
#EDEDED
#1C2541
#465D79
#5BC0BE
#FFFFFF
#111111
#424242
#FF3B3B
#FAFAFA
#1A1A1D
#4C4C54
#E8788A
#F4F4F6