Palette

Winter Mist Path

A cool, quiet palette reflecting the soft, muted tones of a misty winter morning path, crisp and still.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Mist Path 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 Winter Mist Path.

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

Data visualization

#E6E6FA#D3D3D3#A9A9A9#778899#465561

Palette guide

How to use Winter Mist Path

Overview

The Winter Mist Path palette offers a collection of cool, muted grays and subtle blue-grays, perfectly embodying the serene stillness of a foggy winter morning. Ranging from the ethereal #E6E6FA to the deep, anchoring #465561, with versatile mid-tones like #D3D3D3 and #A9A9A9, this palette is ideal for creating sophisticated and tranquil digital experiences. Designers can use the lighter shades to establish spacious, clean layouts, while the darker tones provide excellent contrast for typography and important UI elements. This palette is particularly well-suited for projects that aim for elegance, quiet contemplation, or a modern, understated aesthetic, appealing to users seeking clarity and calm.

Best used for

Elegant branding and corporate websites
Art portfolios and photography showcases
Mindfulness or meditation app interfaces
Sophisticated e-commerce platforms
Luxury product packaging and design
Modern architectural and interior design presentations

Suggested color roles

primary

Use #465561 for strong, legible headings and primary UI elements, providing a deep, grounding presence.

secondary

Apply #778899 for subheadings, secondary actions, or subtle graphical elements, adding a touch of cool depth.

accent

Highlight with #A9A9A9 for active states, borders, or subtle indicators, offering a soft, refined contrast.

background

Choose #E6E6FA or #D3D3D3 for clean, spacious backgrounds, creating an airy and sophisticated canvas.

text

For body text, use #465561 or a rich black like #000000 to ensure optimal readability against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast when using mid-tones like #A9A9A9 for text on lighter backgrounds; always test.
Pair #465561 or #778899 with white or #E6E6FA text for excellent readability on darker elements.
Avoid using #D3D3D3 for text on #E6E6FA backgrounds due to low contrast; reserve for subtle variations.
Consider providing a dark mode option where #465561 serves as background and #E6E6FA as text for comfort.

Recommended combinations

Misty UI Card

Create an elegant UI card: #E6E6FA for the background, #465561 for the title, and #A9A9A9 for subtext or icons.

#E6E6FA · #465561 · #A9A9A9

Path Navigation

Design a navigation bar: #778899 for the background, #E6E6FA for active link text, and #465561 for hover state.

#778899 · #E6E6FA · #465561

Subtle Callout

For a subtle callout box: #D3D3D3 for the box background, #465561 for the main text, and #778899 for a border.

#D3D3D3 · #465561 · #778899

CSS variables

:root {
  --winter-mist-path-1: #E6E6FA;
  --winter-mist-path-2: #D3D3D3;
  --winter-mist-path-3: #A9A9A9;
  --winter-mist-path-4: #778899;
  --winter-mist-path-5: #465561;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-mist-path": {
        1: "#E6E6FA",
        2: "#D3D3D3",
        3: "#A9A9A9",
        4: "#778899",
        5: "#465561",
      }
    }
  }
}

Hex values

Color 1#E6E6FA

Color 2#D3D3D3

Color 3#A9A9A9

Color 4#778899

Color 5#465561

Accessibility

Contrast checker

1.2:1Fail

1.9:1Fail

3:1Fail

6.2:1AA

1.2:1Fail

1.6:1Fail

2.4:1Fail

5.1:1AA

1.9:1Fail

1.6:1Fail

1.5:1Fail

3.3:1AA18

3:1Fail

2.4:1Fail

1.5:1Fail

2.1:1Fail

6.2:1AA

5.1:1AA

3.3:1AA18

2.1:1Fail

Similar palettes

More like Winter Mist Path

Frosted Lakeside Calm