Palette

Urban Sketch Muted

Soft, muted grays and charcoals, like an artist's subtle urban sketch on a cloudy day.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Sketch Muted 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 Urban Sketch Muted.

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

Data visualization

#2F4F4F#708090#A9A9A9#D3D3D3#424242

Palette guide

How to use Urban Sketch Muted

Overview

The Urban Sketch Muted palette features soft, muted grays and charcoals, like an artist's subtle urban sketch on a cloudy day. With foundational shades like #2F4F4F and #424242, and lighter, delicate tones such as #A9A9A9 and #D3D3D3, this collection offers an understated elegance. It's perfect for designers and developers aiming for a minimalist yet organic aesthetic, reminiscent of concrete and natural textures. The inclusion of #708090 adds a gentle mid-tone, making it versatile for creating depth without harshness. This palette is ideal for projects requiring a sophisticated, calm, and subtly textured visual language.

Best used for

Concrete-inspired interior design
Minimalist web interfaces
Art and photography portfolios
Brand identity for artisanal goods
Eco-friendly product packaging
Editorial design with a natural feel

Suggested color roles

primary

#2F4F4F - A deep, muted charcoal for main backgrounds, strong headers, or foundational elements, providing a grounding presence.

secondary

#424242 - An excellent choice for secondary sections, prominent typography, or borders, offering subtle contrast.

accent

#708090 - A soft, cool mid-grey for subtle highlights, interactive states, or decorative details, adding a touch of refinement.

background

#D3D3D3 - A very light, muted grey that serves as a clean, serene background, allowing darker elements to be legible.

text

#2F4F4F - Ideal for body text on light backgrounds like #D3D3D3. For dark backgrounds, use white or near-white for optimal readability.

Accessibility notes

Ensure good contrast for text, especially when using #708090 or #A9A9A9 on lighter backgrounds.
The darkest shades, #2F4F4F and #424242, provide strong contrast with #D3D3D3 for text.
Avoid placing #A9A9A9 text on #D3D3D3 due to insufficient contrast for readability.
Always verify contrast ratios for all interactive elements to meet WCAG standards.

Recommended combinations

Deep Concrete

For robust dark themes, impactful headers, or as a sophisticated base for a textured interface.

#2F4F4F · #424242 · #708090

Muted Horizon

Ideal for soft backgrounds, sub-sections, or gradients that evoke a cloudy sky or subtle concrete texture.

#708090 · #A9A9A9 · #D3D3D3

Sketch Contrast

Use for clear typography and interactive elements on light backgrounds, ensuring readability and a minimalist aesthetic.

#2F4F4F · #D3D3D3 · #A9A9A9

CSS variables

:root {
  --urban-sketch-muted-1: #2F4F4F;
  --urban-sketch-muted-2: #708090;
  --urban-sketch-muted-3: #A9A9A9;
  --urban-sketch-muted-4: #D3D3D3;
  --urban-sketch-muted-5: #424242;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-sketch-muted": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#424242",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#708090

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#424242

Accessibility

Contrast checker

2.2:1Fail

3.8:1AA18

6:1AA

1.1:1Fail

2.2:1Fail

1.7:1Fail

2.7:1Fail

2.5:1Fail

3.8:1AA18

1.7:1Fail

1.6:1Fail

4.3:1AA18

6:1AA

2.7:1Fail

1.6:1Fail

6.7:1AA

1.1:1Fail

2.5:1Fail

4.3:1AA18

6.7:1AA

Similar palettes

More like Urban Sketch Muted

View all neutral

Urban Dawn Mist

Architectural Concrete Edge

Bare Concrete Stillness

Charcoal Smolder

City Concrete Grind

City Loft Grey