Palette

Graffiti Wall Grind

A gritty yet sophisticated urban blend, inspired by weathered concrete and the raw canvas of street art.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Graffiti Wall Grind 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 Graffiti Wall Grind.

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

Data visualization

#36454f#708090#b0c4de#d3d3d3#f5f5f5

Palette guide

How to use Graffiti Wall Grind

Overview

The Graffiti Wall Grind palette offers a gritty yet sophisticated urban blend, inspired by weathered concrete and the raw canvas of street art. With deep charcoal #36454f, versatile mid-tones like #708090 and #b0c4de, and lighter grays #d3d3d3 and #f5f5f5, this palette provides a robust and modern foundation. Designers and developers can use this collection to create minimalist yet impactful designs that convey strength, stability, and an understated urban aesthetic. It's excellent for projects that require a neutral, professional, and contemporary feel with a subtle edge.

Best used for

Architectural and industrial design
Minimalist web and app interfaces
Corporate branding with a modern edge
Streetwear and urban lifestyle brands
Print design for magazines and brochures
Photography portfolios and galleries

Suggested color roles

primary

Use #36454f for primary backgrounds, robust headers, or strong foundational elements, providing a sense of gravitas.

secondary

Employ #708090 for secondary sections, borders, or subtle graphical elements, adding depth without distraction.

accent

While not a typical accent palette, #b0c4de can serve as a subtle highlight for interactive states or important, yet understated, information.

background

The light #f5f5f5 or #d3d3d3 are excellent clean backgrounds, ensuring high readability for darker text.

text

For dark text, use #36454f or a standard black on lighter backgrounds. For lighter text on dark backgrounds, #f5f5f5 provides clarity and a modern feel.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using similar shades of gray.
Avoid using #d3d3d3 on #f5f5f5 for small text due to low contrast.
Use a contrast checker to verify all text and interactive element pairings meet WCAG guidelines.
Consider using slightly different hues (e.g., a very subtle blue tint) for interactive states to differentiate them from static elements.

Recommended combinations

Urban Concrete

A classic, high-contrast combination for professional websites, corporate branding, or sophisticated print layouts.

#36454F · #F5F5F5 · #708090

Gritty Depth

Ideal for creating visual hierarchy, distinguishing content blocks, or subtle backgrounds in a minimalist design.

#708090 · #B0C4DE · #36454F

Modern Canvas

Perfect for clean, airy interfaces, backgrounds, or where subtle texture and layering are desired.

#F5F5F5 · #D3D3D3 · #B0C4DE

CSS variables

:root {
  --graffiti-wall-grind-1: #36454f;
  --graffiti-wall-grind-2: #708090;
  --graffiti-wall-grind-3: #b0c4de;
  --graffiti-wall-grind-4: #d3d3d3;
  --graffiti-wall-grind-5: #f5f5f5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graffiti-wall-grind": {
        1: "#36454f",
        2: "#708090",
        3: "#b0c4de",
        4: "#d3d3d3",
        5: "#f5f5f5",
      }
    }
  }
}

Hex values

Color 1#36454f

Color 2#708090

Color 3#b0c4de

Color 4#d3d3d3

Color 5#f5f5f5

Accessibility

Contrast checker

2.4:1Fail

5.6:1AA

6.6:1AA

9.1:1AAA

2.4:1Fail

2.3:1Fail

2.7:1Fail

3.7:1AA18

5.6:1AA

2.3:1Fail

1.2:1Fail

1.6:1Fail

6.6:1AA

2.7:1Fail

1.2:1Fail

1.4:1Fail

9.1:1AAA

3.7:1AA18

1.6:1Fail

1.4:1Fail

Similar palettes

More like Graffiti Wall Grind

Industrial Urban Grit

Metro Grid Serene

Muted Urban Concrete