Back to palettes

Palette

Misty Moors

Soft and muted grays with hints of blue, conjuring images of mysterious, fog-laden moors.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#778899#A9A9A9#D3D3D3#C0C0C0#B0C4DE

Palette guide

How to use Misty Moors

Overview

The Misty Moors palette offers a cool, serene blend of grays with distinct blue undertones, perfectly capturing the atmospheric beauty of fog-laden landscapes. Featuring hues like the deep slate #778899, the classic #A9A9A9, and the ethereal #B0C4DE, this collection provides a tranquil and sophisticated aesthetic. Designers and developers can utilize its calming presence for projects that require a sense of clarity, professionalism, and understated elegance. It's particularly effective for creating clean user interfaces, refreshing branding, or digital experiences that aim to evoke peace and openness, with a subtle hint of cool nature.

Best used for

  • Tech and software interfaces
  • Environmental and conservation websites
  • Coastal or nautical branding
  • Healthcare and wellness apps
  • Modern interior design concepts
  • Educational platforms

Suggested color roles

primary

#778899 - A strong, muted slate blue-grey, ideal for primary headings, navigation bars, or prominent calls-to-action, providing a stable and professional anchor.

secondary

#A9A9A9 - A versatile medium grey, suitable for subheadings, secondary buttons, or borders, offering a neutral and balancing element.

accent

#B0C4DE - A soft, light blue-grey that can highlight interactive elements, small icons, or subtle graphic details, adding a touch of serene color.

background

#D3D3D3 - A very light, classic light grey, excellent for clean main backgrounds, large content areas, or modal overlays, ensuring a bright and open feel.

text

Charcoal or near-black - A very dark grey like #2F4F4F (SlateGray) or a pure black should be used for primary body text to ensure maximum readability against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter shades for text.
  • Avoid pairing #A9A9A9 and #C0C0C0 for text and background respectively, as their similar lightness can reduce readability.
  • Use #778899 or a darker custom text color for body text on #D3D3D3 or #B0C4DE backgrounds for WCAG AA compliance.
  • Be mindful of the subtle blue tones; test contrast carefully to avoid visual fatigue, especially for large blocks of text.

Recommended combinations

Serene Sky

Excellent for airy backgrounds, soft gradients, or large sections requiring a light, open, and refreshing feel.

#D3D3D3 · #C0C0C0 · #B0C4DE

Anchored Depth

Ideal for establishing clear hierarchy: deep primary elements, neutral secondary, and light background for contrast.

#778899 · #A9A9A9 · #D3D3D3

Cool Contrast

Perfect for standard UI components like cards, buttons, and text fields, providing clear readability and a modern aesthetic.

#D3D3D3 · #778899 · #A9A9A9

CSS variables

:root {
  --misty-moors-1: #778899;
  --misty-moors-2: #A9A9A9;
  --misty-moors-3: #D3D3D3;
  --misty-moors-4: #C0C0C0;
  --misty-moors-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-moors": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#C0C0C0",
        5: "#B0C4DE",
      }
    }
  }
}

Related searches

cool grey blue paletteserene UI color schemeatmospheric blue grey colorsmodern minimalist greycalm web design cool tones

Palette colors

Hex values

Color 1#778899
·
Color 2#A9A9A9
·
Color 3#D3D3D3
·
Color 4#C0C0C0
·
Color 5#B0C4DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
2:1Fail
2:1Fail
2
1.5:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
3
2.4:1Fail
1.6:1Fail
1.2:1Fail
1.2:1Fail
4
2:1Fail
1.3:1Fail
1.2:1Fail
1:1Fail
5
2:1Fail
1.3:1Fail
1.2:1Fail
1:1Fail

Similar palettes

More like Misty Moors

View all cool
Coastal Fog Drift
Misty Mountain
Seagull Sky Gaze
Abyssal Current Glide
Aegean Coast Whisper
Aegean Sea Serene