Palette

Urban Canvas

A sleek selection of cool greys and subtle lavenders, inspired by modern city architecture and steel structures.

NeutralMinimal5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#708090#A9A9A9#D3D3D3#E6E6FA

Palette guide

How to use Urban Canvas

Overview

The "Urban Canvas" palette offers a sophisticated range of cool greys and a subtle lavender, perfect for creating modern, minimalist designs. With its foundational deep grey, #36454F (Charcoal), transitioning through mid-tones like #708090 (Slate Gray) and #A9A9A9 (Dark Gray), to lighter shades such as #D3D3D3 (Light Gray) and the soft #E6E6FA (Lavender Blush), this palette evokes the sleekness of city architecture and steel structures. Designers can leverage its versatility for professional interfaces, elegant branding, or serene digital experiences, providing a clean backdrop with just a hint of cool color.

Best used for

Corporate website design and branding
Minimalist UI/UX for tech applications
Architectural portfolio presentations
Interior design visualization mockups
High-end fashion e-commerce platforms
Photography and art gallery websites

Suggested color roles

primary

#36454F (Charcoal) - Ideal for main headers, foundational elements, or dominant content areas, providing a strong, serious anchor.

secondary

#708090 (Slate Gray) - Excellent for subheadings, navigation menus, or large sections of content, offering a smooth transition from the primary.

accent

#A9A9A9 (Dark Gray) - Use for interactive elements like buttons, icons, or subtle highlights that need to stand out gently without overpowering.

background

#E6E6FA (Lavender Blush) - A soft, inviting background color that provides warmth and a hint of color without being distracting, suitable for main content areas.

text

#36454F (Charcoal) for dark text on light backgrounds or a near-white like #F0F0F0 for light text on #36454F and #708090.

Accessibility notes

Ensure sufficient contrast between #36454F text and #E6E6FA background for readability.
Avoid using #A9A9A9 or #D3D3D3 for small text on a #E6E6FA background due to low contrast.
Use #36454F or #708090 for critical UI elements and text against lighter shades.
Pair #D3D3D3 with a much darker color like #36454F for visual distinction and accessibility.

Recommended combinations

Urban Contrast

High-contrast pairing for professional documents or website footers, with the soft lavender as a subtle highlight.

#36454F · #D3D3D3 · #E6E6FA

Sleek Gradient

Create elegant gradients or layered effects in UI cards or decorative elements, blending cool tones.

#708090 · #A9A9A9 · #E6E6FA

Subtle Depth

Effective for building visual hierarchy in complex dashboards, using the darker shades for primary information and lighter for details.

#36454F · #708090 · #A9A9A9

CSS variables

:root {
  --urban-canvas-1: #36454F;
  --urban-canvas-2: #708090;
  --urban-canvas-3: #A9A9A9;
  --urban-canvas-4: #D3D3D3;
  --urban-canvas-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canvas": {
        1: "#36454F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#708090

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#E6E6FA

Accessibility

Contrast checker

2.4:1Fail

4.2:1AA18

6.6:1AA

8:1AAA

2.4:1Fail

1.7:1Fail

2.7:1Fail

3.3:1AA18

4.2:1AA18

1.7:1Fail

1.6:1Fail

1.9:1Fail

6.6:1AA

2.7:1Fail

1.6:1Fail

1.2:1Fail

8:1AAA

3.3:1AA18

1.9:1Fail

1.2:1Fail

Similar palettes

More like Urban Canvas

View all Neutral

Urban Concrete Jungle

Cityscape Window Glint