Back to palettes

Palette

Misty Mountain Ascent

A cool, ethereal blend reflecting the serene blues and purples of misty mountain peaks at dawn.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Mountain Ascent 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 Misty Mountain Ascent.

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

Data visualization

#6A5ACD#8470FF#ADD8E6#F0F8FF#FFFFFF

Palette guide

How to use Misty Mountain Ascent

Overview

The Misty Mountain Ascent palette offers a cool, ethereal blend, reflecting the serene blues and purples of misty mountain peaks at dawn. Featuring striking hues like the deep #6A5ACD and vibrant #8470FF, alongside the crisp #F0F8FF and #FFFFFF, this palette is perfect for designers and developers seeking to convey sophistication, tranquility, and a touch of modern elegance. It's ideal for creating designs that feel aspirational and clean, with a clear visual hierarchy that can transition from bold statements to subtle, airy backgrounds.

Best used for

  • Modern tech and software interfaces
  • Creative agency branding
  • Luxury product websites
  • Spiritual or wellness applications
  • Winter sports and outdoor adventure themes
  • Minimalist art and photography

Suggested color roles

primary

Utilize #6A5ACD as a strong brand identifier or for main calls to action, conveying authority and depth.

secondary

Employ #8470FF for supporting elements, subheadings, or secondary interactive components, adding a vibrant, energetic touch.

accent

Apply #ADD8E6 for subtle highlights, active states, or graphic elements that require a lighter, airy touch.

background

Choose #F0F8FF as a clean, expansive background to provide maximum contrast and a feeling of openness.

text

For optimal readability, use #6A5ACD for body text on light backgrounds like #F0F8FF or #FFFFFF, ensuring a strong, clear presentation.

Accessibility notes

  • Avoid using #FFFFFF on #F0F8FF for text, as it will have virtually no contrast and be unreadable.
  • Ensure #ADD8E6 text on #F0F8FF has sufficient contrast; it's generally too light for body text.
  • Always test contrast ratios for interactive elements, especially if using lighter shades for states like 'hover' or 'focus'.
  • The strong contrast provided by #6A5ACD or #8470FF on #F0F8FF should be leveraged for critical information.

Recommended combinations

Peak Contrast

Ideal for impactful headers, key feature blocks, or hero sections where strong visual presence is desired.

#6A5ACD · #F0F8FF · #8470FF

Sky Gradient

Perfect for background gradients, illustrations, or decorative overlays that transition smoothly from light to deep.

#ADD8E6 · #8470FF · #6A5ACD

Clean Horizon

Use for clean UI cards, minimalist navigation, or sections requiring a clear, airy structure with a strong anchor.

#F0F8FF · #ADD8E6 · #6A5ACD

CSS variables

:root {
  --misty-mountain-ascent-1: #6A5ACD;
  --misty-mountain-ascent-2: #8470FF;
  --misty-mountain-ascent-3: #ADD8E6;
  --misty-mountain-ascent-4: #F0F8FF;
  --misty-mountain-ascent-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-ascent": {
        1: "#6A5ACD",
        2: "#8470FF",
        3: "#ADD8E6",
        4: "#F0F8FF",
        5: "#FFFFFF",
      }
    }
  }
}

Related searches

misty purple palettemountain blue colorsethereal uiserene tech brandingcool ascent theme

Palette colors

Hex values

Color 1#6A5ACD
·
Color 2#8470FF
·
Color 3#ADD8E6
·
Color 4#F0F8FF
·
Color 5#FFFFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3.5:1AA18
4.9:1AA
5.3:1AA
2
1.5:1Fail
2.4:1Fail
3.4:1AA18
3.7:1AA18
3
3.5:1AA18
2.4:1Fail
1.4:1Fail
1.5:1Fail
4
4.9:1AA
3.4:1AA18
1.4:1Fail
1.1:1Fail
5
5.3:1AA
3.7:1AA18
1.5:1Fail
1.1:1Fail

Similar palettes

More like Misty Mountain Ascent

View all cool
Alpine Mist
Arctic Dawn Light
Azure Sky Whisper
Celestial Ocean Dream
Cloud Capped Peaks
Cloud Peak Summit