Palette

Misty Heather Fields

A soft, ethereal palette inspired by the tranquil hues of a foggy moor covered in heather.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Heather Fields 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 Heather Fields.

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

Data visualization

#6C5B7B#C06C84#F67280#FFC0CB#8E7D9A

Palette guide

How to use Misty Heather Fields

Overview

The Misty Heather Fields palette is a soft, ethereal collection of purples and pinks, designed to evoke the tranquil beauty of a foggy moor covered in heather. With shades like the deep #6C5B7B, the vibrant #F67280, and the delicate #FFC0CB, this palette offers a romantic and gentle aesthetic. It’s perfect for designs seeking to convey warmth, creativity, and a touch of whimsy. Designers will find its harmonious blend suitable for creating inviting and emotionally resonant experiences, while developers can appreciate the clear distinction between shades for building engaging, visually appealing interfaces. This palette truly captures a dreamy, serene mood.

Best used for

Feminine and beauty product branding
Wedding and event invitations
Lifestyle and fashion blogs
Creative arts and craft websites
Children's book illustrations
Soft, romantic digital interfaces

Suggested color roles

primary

Use #6C5B7B as a rich, elegant primary color for headers, branding, or key calls to action, providing depth and sophistication.

secondary

Apply #8E7D9A for supportive elements like subheadings or navigation, maintaining a cohesive and muted feel.

accent

Introduce #F67280 as a vibrant, playful accent for interactive elements, highlights, or graphic details to add energy.

background

Utilize #FFC0CB as a soft, airy background color, creating a delicate and inviting canvas for content.

text

For body text, use #6C5B7B or a dark charcoal for optimal readability against lighter backgrounds. #C06C84 can work for larger headings.

Accessibility notes

Ensure sufficient contrast between #6C5B7B and #FFC0CB for all body text to meet WCAG AA standards.
Exercise caution when placing #F67280 on #FFC0CB for small text, as contrast may be insufficient.
Use #6C5B7B or #8E7D9A for important interactive elements to ensure visibility.
Test color pairings for hover states and focus indicators to maintain clear user feedback.

Recommended combinations

Deep Romance

Ideal for creating a rich, romantic visual, suitable for hero sections or elegant branding.

#6C5B7B · #C06C84 · #8E7D9A

Floral Blush

Excellent for light, cheerful sections, highlighting playful elements or feminine designs.

#FFC0CB · #F67280 · #C06C84

Elegant Contrast

A balanced trio for strong visual hierarchy, perfect for text on background with a vibrant accent.

#6C5B7B · #FFC0CB · #F67280

CSS variables

:root {
  --misty-heather-fields-1: #6C5B7B;
  --misty-heather-fields-2: #C06C84;
  --misty-heather-fields-3: #F67280;
  --misty-heather-fields-4: #FFC0CB;
  --misty-heather-fields-5: #8E7D9A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-heather-fields": {
        1: "#6C5B7B",
        2: "#C06C84",
        3: "#F67280",
        4: "#FFC0CB",
        5: "#8E7D9A",
      }
    }
  }
}

Hex values

Color 1#6C5B7B

Color 2#C06C84

Color 3#F67280

Color 4#FFC0CB

Color 5#8E7D9A

Accessibility

Contrast checker

1.7:1Fail

2.2:1Fail

4:1AA18

1.6:1Fail

1.7:1Fail

1.3:1Fail

2.4:1Fail

1:1Fail

2.2:1Fail

1.3:1Fail

1.8:1Fail

1.4:1Fail

4:1AA18

2.4:1Fail

1.8:1Fail

2.5:1Fail

1.6:1Fail

1:1Fail

1.4:1Fail

2.5:1Fail

Similar palettes

More like Misty Heather Fields

View all cool

Moonlit Rose Garden

Mystic Lavender Fields

Whispering Wisteria Arch

Cloudy Dawn Whisper

Dreamy Lavender Field

Ethereal Forest Mist