Back to palettes

Palette

Modern Slate Canvas

A sleek, refined palette of cool greys, embodying minimalist architecture and contemporary urban design.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#708090#D3D3D3#A9A9A9#5A5A5A

Palette guide

How to use Modern Slate Canvas

Overview

The "Modern Slate Canvas" palette delivers a refined collection of cool, muted grays and a deep blue-green, perfect for creating an urban, sophisticated, and minimalist aesthetic. With the deep blue-green #2F4F4F, a versatile mid-gray #708090, and the bright, airy #D3D3D3, this palette establishes a sleek and contemporary foundation. Designers can leverage these shades to evoke a sense of calm strength and architectural precision. Developers will find these hex codes ideal for structuring modern interfaces, providing distinct yet harmonious elements for backgrounds, content areas, and interactive components. The inclusion of #A9A9A9 and #5A5A5A allows for nuanced depth and visual interest without overwhelming the minimalist intent.

Best used for

  • Urban lifestyle branding
  • Architectural firm websites
  • Tech product interfaces
  • High-end interior design portfolios
  • Editorial layouts with clean typography
  • Luxury brand digital presence

Suggested color roles

primary

#2F4F4F - A deep, dark blue-green, excellent for prominent headers, main navigation, or a strong brand accent, conveying depth and stability.

secondary

#5A5A5A - A versatile dark gray, suitable for subheadings, secondary information, or card backgrounds, offering a sophisticated contrast.

accent

#708090 - A cool, muted gray perfect for subtle interactive elements, borders, or iconography, adding a touch of understated elegance.

background

#D3D3D3 - A light, neutral gray that provides a clean, open canvas, allowing content to take center stage without feeling stark.

text

#2F4F4F - Ideal for body text and headlines against lighter backgrounds like #D3D3D3 or even #A9A9A9, ensuring excellent readability.

Accessibility notes

  • Ensure high contrast when using #708090 for text against #D3D3D3 for WCAG AA compliance.
  • #2F4F4F provides strong contrast for text on #D3D3D3, making it highly readable.
  • Avoid using #A9A9A9 for small text on #D3D3D3 as contrast may be insufficient.
  • For interactive states, ensure clear visual feedback, perhaps by darkening the element with #5A5A5A or #2F4F4F.

Recommended combinations

Urban Base

Creates a clean, layered background effect with subtle depth for content blocks or cards.

#D3D3D3 · #A9A9A9 · #5A5A5A

Deep Contrast

Excellent for establishing a primary-secondary relationship, with #2F4F4F for headings and #708090 for secondary text on a light background.

#D3D3D3 · #2F4F4F · #708090

Subtle Interaction

Useful for hover states, active menu items, or subtle borders and dividers within a minimalist UI.

#A9A9A9 · #708090 · #5A5A5A

CSS variables

:root {
  --modern-slate-canvas-1: #2F4F4F;
  --modern-slate-canvas-2: #708090;
  --modern-slate-canvas-3: #D3D3D3;
  --modern-slate-canvas-4: #A9A9A9;
  --modern-slate-canvas-5: #5A5A5A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "modern-slate-canvas": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#D3D3D3",
        4: "#A9A9A9",
        5: "#5A5A5A",
      }
    }
  }
}

Related searches

modern grey green paletteurban minimalist colorsslate grey design schemecool neutral web designarchitectural color palette

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#D3D3D3
·
Color 4#A9A9A9
·
Color 5#5A5A5A
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
6:1AA
3.8:1AA18
1.3:1Fail
2
2.2:1Fail
2.7:1Fail
1.7:1Fail
1.7:1Fail
3
6:1AA
2.7:1Fail
1.6:1Fail
4.6:1AA
4
3.8:1AA18
1.7:1Fail
1.6:1Fail
2.9:1Fail
5
1.3:1Fail
1.7:1Fail
4.6:1AA
2.9:1Fail

Similar palettes

More like Modern Slate Canvas

View all neutral
Urban Geometry Pulse
Concrete Garden Grey
Concrete Grid Lines
Concrete Jungle
Concrete Jungle Bloom
Concrete Loft Living