Back to palettes

Palette

Ash Cloud Symphony

A serene journey through deep, muted blue-greys, echoing the subtle shifts of a cloudy sky.

monochromeelegant5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ash Cloud Symphony reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Ash Cloud Symphony.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#2F4F4F#4682B4#6A5ACD#708090#5F9EA0

Palette guide

How to use Ash Cloud Symphony

Overview

The Ash Cloud Symphony palette offers a serene journey through deep, muted blue-greys, echoing the subtle shifts of a cloudy sky. Featuring sophisticated tones like the deep slate of #2F4F4F, the calming steel blue of #4682B4, and the unique slate blue of #6A5ACD. Lighter shades such as #708090 and #5F9EA0 complete this elegant collection. This palette is designed for designers and developers seeking a sophisticated, understated, and calming aesthetic. It's ideal for creating designs that convey tranquility, professionalism, and a timeless elegance across various platforms.

Best used for

  • High-end fashion branding
  • Luxury product websites
  • Serene spa and wellness apps
  • Elegant interior design concepts
  • Sophisticated corporate reports
  • Artistic photography portfolios

Suggested color roles

primary

#2F4F4F provides a deep, anchoring primary color, excellent for main headers and foundational design elements.

secondary

#4682B4 adds a calming, expansive secondary shade, suitable for subheadings or prominent UI components.

accent

#6A5ACD offers a unique, refined accent, perfect for subtle highlights, interactive elements, or decorative details.

background

#708090 provides a soft, airy background, allowing darker text to stand out clearly.

text

#2F4F4F ensures optimal legibility for primary text on lighter backgrounds, or use a deep charcoal for general body copy.

Accessibility notes

  • Ensure sufficient contrast for all text elements, especially lighter shades on #708090 background.
  • Use #2F4F4F for critical text on #708090 to meet WCAG AA standards.
  • Avoid using #708090 for small text on similarly light backgrounds to prevent legibility issues.
  • Provide clear focus states for interactive elements to aid navigation for all users.

Recommended combinations

Serene Contrast

A balanced and tranquil combination, ideal for creating a calm and sophisticated page layout.

#708090 · #4682B4 · #2F4F4F

Elegant Flow

Highlights unique and refined tones, suitable for artistic elements or distinctive branding.

#5F9EA0 · #6A5ACD · #2F4F4F

Deep Harmony

Creates a harmonious depth, perfect for backgrounds, headers, or immersive sections.

#2F4F4F · #4682B4 · #708090

CSS variables

:root {
  --ash-cloud-symphony-1: #2F4F4F;
  --ash-cloud-symphony-2: #4682B4;
  --ash-cloud-symphony-3: #6A5ACD;
  --ash-cloud-symphony-4: #708090;
  --ash-cloud-symphony-5: #5F9EA0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ash-cloud-symphony": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#6A5ACD",
        4: "#708090",
        5: "#5F9EA0",
      }
    }
  }
}

Related searches

muted blue grey paletteelegant color schemesophisticated web designcalm brand colorscool tone UI

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#4682B4
·
Color 3#6A5ACD
·
Color 4#708090
·
Color 5#5F9EA0
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
1.7:1Fail
2.2:1Fail
2.9:1Fail
2
2.2:1Fail
1.3:1Fail
1:1Fail
1.3:1Fail
3
1.7:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
2.2:1Fail
1:1Fail
1.3:1Fail
1.3:1Fail
5
2.9:1Fail
1.3:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Ash Cloud Symphony

View all monochrome
Sapphire Dusk Glide
Smoky Quartz Haze
Ancient Marble Column
Ancient Marble Statue
Ancient Stone Keep
Gothic Library Ink