What are the hex codes in the Dusty Rose & Sky Blue Echo palette?

The Dusty Rose & Sky Blue Echo color palette consists of Petal #F8E1E7, Dusty Rose #EDB181, Sky Blue #7DBEC9, Storm #496369.

How should I use the Dusty Rose & Sky Blue Echo palette on a website?

Use Petal #F8E1E7 as the background, Storm #496369 for text, Dusty Rose #EDB181 for buttons and links, and Sky Blue #7DBEC9 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Petal on Storm at 5.17:1.

Which colors in Dusty Rose & Sky Blue Echo have enough contrast for text?

The highest-contrast pair is #F8E1E7 on #496369 with a ratio of 5.17:1, which passes WCAG AA for normal text.

#F8E1E7Petal

#EDB181Dusty Rose

#7DBEC9Sky Blue

#496369Storm

Dusty Rose & Sky Blue Echo color palette

Muted Beige Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Petal	`#F8E1E7`	`rgb(248, 225, 231)`	`hsl(344, 62%, 93%)`	`oklch(93.0% 0.026 360)`
Dusty Rose	`#EDB181`	`rgb(237, 177, 129)`	`hsl(27, 75%, 72%)`	`oklch(80.5% 0.094 60)`
Sky Blue	`#7DBEC9`	`rgb(125, 190, 201)`	`hsl(189, 41%, 64%)`	`oklch(76.2% 0.068 209)`
Storm	`#496369`	`rgb(73, 99, 105)`	`hsl(191, 18%, 35%)`	`oklch(48.1% 0.032 213)`

Why it works and how to use it

Dusty Rose & Sky Blue Echo is a complementary color palette tagged muted, beige, gray. Petal and Storm sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Dusty Rose takes the lead while the rest support. Lightness runs from 35% to 93%. Well suited to websites, presentations and branding.

Background: Petal (#F8E1E7) is the lightest color, so it belongs on large surfaces.
Text: Storm (#496369) on #F8E1E7 gives 5.17:1, passing WCAG AA.
Primary: Dusty Rose (#EDB181) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sky Blue (#7DBEC9) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Petal on Storm at 5.17:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Dusty Rose & Sky Blue 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

#F8E1E7

#EDB181

#7DBEC9

#496369

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
`#F8E1E7` on `#496369`	Aa	5.17:1	AA
`#EDB181` on `#496369`	Aa	3.43:1	AA large only
`#7DBEC9` on `#496369`	Aa	3.08:1	AA large only
`#F8E1E7` on `#7DBEC9`	Aa	1.68:1	Fail
`#F8E1E7` on `#EDB181`	Aa	1.51:1	Fail
`#EDB181` on `#7DBEC9`	Aa	1.11:1	Fail

:root {
  --petal: #F8E1E7;
  --dusty-rose: #EDB181;
  --sky-blue: #7DBEC9;
  --storm: #496369;
}

$petal: #F8E1E7;
$dusty-rose: #EDB181;
$sky-blue: #7DBEC9;
$storm: #496369;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'petal': '#F8E1E7',
        'dusty-rose': '#EDB181',
        'sky-blue': '#7DBEC9',
        'storm': '#496369',
      },
    },
  },
};

{
  "name": "Dusty Rose & Sky Blue Echo",
  "colors": [
    "#F8E1E7",
    "#EDB181",
    "#7DBEC9",
    "#496369"
  ]
}

background: linear-gradient(135deg, #F8E1E7, #EDB181, #7DBEC9, #496369);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-05-31 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood