Back to palettes

Palette

Gloomy Mist

Soft, desaturated blues and grays evoke a tranquil, overcast day with a gentle, misty atmosphere.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#505C6B#8594A5#BAC6D2#3A4550#717F8D

Palette guide

How to use Gloomy Mist

Overview

The Gloomy Mist palette presents a serene collection of desaturated blues and grays, perfectly capturing the tranquil and understated beauty of an overcast, misty day. Featuring cool tones like the deep slate #3A4550, the calming blue-grey #505C6B, and the airy light grey #BAC6D2, this collection is ideal for designers seeking to evoke a sense of peace, subtlety, and sophistication. The mid-tones like #8594A5 and #717F8D offer versatility for nuanced design. Developers will find these colors excellent for crafting user interfaces, corporate websites, or minimalist applications that require a calm, professional, and visually unobtrusive aesthetic, promoting focus and clarity.

Best used for

  • Corporate websites and dashboards
  • Minimalist app interfaces
  • Weather forecasting applications
  • Documentary film branding
  • Serene editorial layouts
  • Professional photography portfolios

Suggested color roles

primary

#3A4550 - A deep, cool slate blue, excellent for strong headers, footers, or main content blocks, providing a solid and professional foundation.

secondary

#505C6B - A slightly lighter blue-grey, perfect for secondary content areas, card backgrounds, or subtle navigation elements, maintaining a cohesive cool tone.

accent

#717F8D - A medium blue-grey, ideal for interactive elements, highlights, or subtle calls-to-action that need to stand out gently without being overly vibrant.

background

#BAC6D2 - A very light, airy blue-grey, serving as a clean, expansive, and calming canvas for all content, promoting readability.

text

#3A4550 - The darkest color, ideal for primary body text against lighter backgrounds like #BAC6D2 or #8594A5, ensuring excellent readability and a harmonious look.

Accessibility notes

  • Ensure sufficient contrast for text and interactive elements, especially when using mid-tones like #717F8D on #8594A5.
  • The darkest color #3A4550 provides good contrast for white or very light text, making it suitable for headings.
  • Avoid using #BAC6D2 for text, as it's too light for readability against most backgrounds in this palette.
  • Always verify contrast ratios for all text and UI components to meet WCAG standards for accessibility.

Recommended combinations

Professional Dashboard

#3A4550 for header/sidebar, #BAC6D2 for main content background, and #505C6B for card elements.

#3A4550 · #BAC6D2 · #505C6B

Misty Gradient

Create a subtle, atmospheric gradient for hero sections or background textures, evoking a foggy mood.

#3A4550 · #717F8D · #8594A5

Clean Typography

#BAC6D2 as a clean background, #3A4550 for body text, and #505C6B for subheadings or links.

#BAC6D2 · #3A4550 · #505C6B

CSS variables

:root {
  --gloomy-mist-1: #505C6B;
  --gloomy-mist-2: #8594A5;
  --gloomy-mist-3: #BAC6D2;
  --gloomy-mist-4: #3A4550;
  --gloomy-mist-5: #717F8D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gloomy-mist": {
        1: "#505C6B",
        2: "#8594A5",
        3: "#BAC6D2",
        4: "#3A4550",
        5: "#717F8D",
      }
    }
  }
}

Related searches

blue gray palettecalm neutral colorsmisty weather designsubtle UI colorsprofessional cool grey

Palette colors

Hex values

Color 1#505C6B
·
Color 2#8594A5
·
Color 3#BAC6D2
·
Color 4#3A4550
·
Color 5#717F8D
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.9:1AA18
1.4:1Fail
1.7:1Fail
2
2.2:1Fail
1.8:1Fail
3.2:1AA18
1.3:1Fail
3
3.9:1AA18
1.8:1Fail
5.6:1AA
2.4:1Fail
4
1.4:1Fail
3.2:1AA18
5.6:1AA
2.4:1Fail
5
1.7:1Fail
1.3:1Fail
2.4:1Fail
2.4:1Fail

Similar palettes

More like Gloomy Mist

View all neutral
Cloud Burst Horizon
Misty Mountain Dawn
Morning Fog Serene
Ancient Grove Hush
City Twilight Glow
Cloudy Day Serene