Back to palettes

Palette

Misty Canyon Lilac

Soft, ethereal purples evoke a serene canyon veiled in a gentle, atmospheric morning mist.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Canyon Lilac 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 Canyon Lilac.

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

Data visualization

#C8B6DB#A093C1#7C6DA0#5C4F7D#3D355C

Palette guide

How to use Misty Canyon Lilac

Overview

The Misty Canyon Lilac palette offers a sophisticated range of cool purples, evoking a serene and ethereal atmosphere. This collection, from the softest lavender of #C8B6DB to the deep, grounding #3D355C, provides designers and developers with a versatile spectrum for creating calm and elegant digital experiences. The mid-tones like #A093C1 and #7C6DA0 bridge the lightness and depth, offering excellent choices for subtle hierarchies. Its gentle, atmospheric quality is perfect for projects aiming for a sense of tranquility and understated luxury. Consider pairing the lighter shades with deep text for optimal readability, ensuring accessibility without sacrificing aesthetic appeal.

Best used for

  • Spa & wellness branding
  • High-end cosmetic packaging
  • Luxury event invitations
  • Serene meditation apps
  • Interior design mood boards
  • Feminine fashion websites

Suggested color roles

primary

#7C6DA0 - A balanced mid-tone purple, ideal for main UI elements, headers, or brand identity.

secondary

#A093C1 - Lighter and softer, perfect for sub-headings, secondary buttons, or background gradients.

accent

#C8B6DB - The lightest shade, use sparingly for highlights, hover states, or delicate graphic elements.

background

#C8B6DB - A soft, ethereal lavender that provides a calming base for content, or a near-white for contrast.

text

#3D355C - A deep, rich purple that offers excellent contrast against lighter backgrounds like #C8B6DB or a crisp white.

Accessibility notes

  • Ensure sufficient contrast between #3D355C text and lighter backgrounds like #C8B6DB for readability.
  • Avoid using #C8B6DB text on very light grey or white backgrounds due to poor contrast.
  • For interactive elements, differentiate states clearly using distinct shades like #7C6DA0 and #5C4F7D.
  • Test color combinations with accessibility tools to meet WCAG standards, especially for small text.

Recommended combinations

Serene Header

Deep text on a light, ethereal header background for elegance.

#3D355C · #C8B6DB · #A093C1

Subtle CTA

A primary button color with a lighter hover or pressed state.

#7C6DA0 · #A093C1 · #5C4F7D

Background Gradient

Smooth vertical or radial gradient for hero sections or brand visuals.

#C8B6DB · #A093C1 · #7C6DA0

CSS variables

:root {
  --misty-canyon-lilac-1: #C8B6DB;
  --misty-canyon-lilac-2: #A093C1;
  --misty-canyon-lilac-3: #7C6DA0;
  --misty-canyon-lilac-4: #5C4F7D;
  --misty-canyon-lilac-5: #3D355C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-canyon-lilac": {
        1: "#C8B6DB",
        2: "#A093C1",
        3: "#7C6DA0",
        4: "#5C4F7D",
        5: "#3D355C",
      }
    }
  }
}

Related searches

lavender color schemesserene purple palettecool tone purpleselegant lilac colorsmuted purple design

Palette colors

Hex values

Color 1#C8B6DB
·
Color 2#A093C1
·
Color 3#7C6DA0
·
Color 4#5C4F7D
·
Color 5#3D355C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
3.9:1AA18
6:1AA
2
1.5:1Fail
1.6:1Fail
2.6:1Fail
4:1AA18
3
2.5:1Fail
1.6:1Fail
1.6:1Fail
2.4:1Fail
4
3.9:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6:1AA
4:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Misty Canyon Lilac

View all cool
Mystic Lavender Fields
Coastal Mist Horizon
Frosty Morning Lake
Lavender Haze Whisper
Misty Morning Haze
Misty Morning Lake