Back to palettes

Palette

Monochrome Slate

A sophisticated gradient of deep greys, from charcoal to light stone, for sleek designs.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochrome Slate 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 Monochrome Slate.

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

Data visualization

#262626#404040#595959#8C8C8C#B3B3B3

Palette guide

How to use Monochrome Slate

Overview

The Monochrome Slate palette offers a sophisticated gradient of deep greys, from charcoal #262626 to light stone #B3B3B3, for sleek designs. With versatile mid-tones like #404040, #595959, and #8C8C8C, this collection provides a modern, minimalist aesthetic with ample depth. Designers and developers will find these hues incredibly useful for crafting professional and refined visual experiences. The cool undertones and strong contrasts make it ideal for corporate, tech, and contemporary projects that demand a clean, organized, and elegant appearance without being overly stark.

Best used for

  • Modern corporate design
  • Tech interfaces and applications
  • Architectural renderings
  • Minimalist branding and logos
  • Professional presentations
  • Sleek editorial layouts

Suggested color roles

primary

Utilize #404040 as a strong, deep primary color for main content areas or robust UI components, conveying professionalism.

secondary

Apply #595959 for versatile supporting elements, subheadings, or subtle background textures, adding visual depth.

accent

Employ #262626 as the deepest charcoal for strong emphasis, critical elements, or dark mode text, ensuring impact.

background

Choose #B3B3B3 as a lighter, solid base background, providing a clean, stable, and neutral canvas.

text

Opt for #262626 for body text on lighter backgrounds to ensure clear, sharp readability and a sophisticated appearance.

Accessibility notes

  • Ensure #262626 text on #B3B3B3 backgrounds meets WCAG AA/AAA contrast ratios for optimal legibility.
  • Be cautious when using #8C8C8C for small text on #B3B3B3, as it may not provide sufficient contrast for some users.
  • Provide clear visual focus indicators for interactive elements using #262626 or #404040.
  • Maintain consistent color usage for interactive vs. static elements to avoid user confusion.

Recommended combinations

Sleek Contrast

Excellent for a clean, readable layout with a light background, deep charcoal text, and a strong mid-tone for headings.

#B3B3B3 · #262626 · #404040

Deep Gradient

Creates a sophisticated, layered effect for panels or cards, transitioning smoothly from dark to lighter greys.

#404040 · #595959 · #8C8C8C

Modern UI

Suitable for creating distinct sections, using a mid-grey base with deep charcoal text and a light grey for accents.

#8C8C8C · #262626 · #B3B3B3

CSS variables

:root {
  --monochrome-slate-1: #262626;
  --monochrome-slate-2: #404040;
  --monochrome-slate-3: #595959;
  --monochrome-slate-4: #8C8C8C;
  --monochrome-slate-5: #B3B3B3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-slate": {
        1: "#262626",
        2: "#404040",
        3: "#595959",
        4: "#8C8C8C",
        5: "#B3B3B3",
      }
    }
  }
}

Related searches

slate grey palettemodern monochromecharcoal colorssleek design paletteminimalist grey

Palette colors

Hex values

Color 1#262626
·
Color 2#404040
·
Color 3#595959
·
Color 4#8C8C8C
·
Color 5#B3B3B3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
4.5:1AA
7.2:1AAA
2
1.5:1Fail
1.5:1Fail
3.1:1AA18
4.9:1AA
3
2.2:1Fail
1.5:1Fail
2.1:1Fail
3.3:1AA18
4
4.5:1AA
3.1:1AA18
2.1:1Fail
1.6:1Fail
5
7.2:1AAA
4.9:1AA
3.3:1AA18
1.6:1Fail

Similar palettes

More like Monochrome Slate

View all monochrome
Abstract Canvas Swirl
Abstract Ink Flow
City Grayscale View
Monochromatic Graphite
Monochromatic Ink Wash
Monochrome Cityscape