Back to palettes

Palette

Misty Greyscale Vista

A gradual blend of grays mimicking the serene and mysterious appearance of a foggy landscape at dawn.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F1F1F#4A4A4A#7C7C7C#B0B0B0#E0E0E0

Palette guide

How to use Misty Greyscale Vista

Overview

The Misty Greyscale Vista palette offers a sophisticated and timeless monochromatic range, perfect for designs that prioritize clarity, professionalism, and modern minimalism. Featuring a gradual blend from the deep #1F1F1F to the airy #E0E0E0, with versatile mid-tones like #7C7C7C, this palette mimics the serene appearance of a foggy landscape at dawn. It provides exceptional flexibility for creating depth and visual hierarchy without relying on hue. Designers will find it ideal for corporate, tech, or artistic projects, while developers can easily implement its shades for consistent dark and light modes, ensuring a polished and functional user experience across platforms.

Best used for

  • Corporate and professional websites
  • Minimalist user interfaces
  • Photography portfolios and galleries
  • Editorial design and publishing
  • Tech startup branding
  • Dark mode implementations

Suggested color roles

primary

Utilize #1F1F1F as a strong, foundational primary color for headers, important text, or dark mode backgrounds, conveying authority.

secondary

Apply #4A4A4A for secondary headings, navigation, or subtle dividers, offering excellent readability and depth.

accent

Introduce #7C7C7C for subtle accents, borders, or inactive states, providing a gentle visual separation without breaking the monochrome.

background

Employ #E0E0E0 as a clean, spacious background for light mode, ensuring optimal readability and a fresh aesthetic.

text

For body text, use #1F1F1F or #4A4A4A on lighter backgrounds like #E0E0E0. For dark backgrounds, a light grey from the palette offers good contrast.

Accessibility notes

  • Ensure high contrast ratios for text: #1F1F1F on #E0E0E0 provides excellent legibility.
  • Be cautious with mid-tones like #7C7C7C on #B0B0B0 for small text; use for larger headings or graphic elements.
  • Provide sufficient contrast for interactive elements and focus states across all shades.
  • Utilize the full range to create distinct visual hierarchy for users with varying visual acuity.

Recommended combinations

Deep Monochrome

Excellent for creating a sophisticated dark mode or high-contrast sections in a design.

#1F1F1F · #4A4A4A · #7C7C7C

Light Vista

Ideal for clean, minimalist light mode interfaces and content-heavy pages.

#E0E0E0 · #B0B0B0 · #7C7C7C

Balanced Contrast

A classic combination for strong readability and clear visual separation between elements.

#1F1F1F · #E0E0E0 · #7C7C7C

CSS variables

:root {
  --misty-greyscale-vista-1: #1F1F1F;
  --misty-greyscale-vista-2: #4A4A4A;
  --misty-greyscale-vista-3: #7C7C7C;
  --misty-greyscale-vista-4: #B0B0B0;
  --misty-greyscale-vista-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-greyscale-vista": {
        1: "#1F1F1F",
        2: "#4A4A4A",
        3: "#7C7C7C",
        4: "#B0B0B0",
        5: "#E0E0E0",
      }
    }
  }
}

Related searches

monochromatic grey paletteminimalist UI colorsprofessional grey schemedark mode grey colorssophisticated neutral palette

Palette colors

Hex values

Color 1#1F1F1F
·
Color 2#4A4A4A
·
Color 3#7C7C7C
·
Color 4#B0B0B0
·
Color 5#E0E0E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.9:1AA18
7.6:1AAA
12.5:1AAA
2
1.9:1Fail
2.1:1Fail
4.1:1AA18
6.7:1AA
3
3.9:1AA18
2.1:1Fail
1.9:1Fail
3.2:1AA18
4
7.6:1AAA
4.1:1AA18
1.9:1Fail
1.6:1Fail
5
12.5:1AAA
6.7:1AA
3.2:1AA18
1.6:1Fail

Similar palettes

More like Misty Greyscale Vista

View all monochrome
Misty Moorland Walk
Silent Fog Horizon
Soft Greige Cloud
Contemplative Stone Flow
Dusky Meadow Mist
Foggy Mountain Ascent