Palette

Urban Sketch Lines

A crisp, contemporary palette inspired by the sharp lines and cool tones of city architecture.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F252D#3E4A5B#6D7F9B#A8B8CC#D8E0E8

Palette guide

How to use Urban Sketch Lines

Overview

The Urban Sketch Lines palette is a crisp, contemporary collection inspired by the sharp lines and cool tones of city architecture. Ranging from the deep #1F252D to the airy #D8E0E8, with sophisticated mid-tones like #3E4A5B and #6D7F9B, it offers a clean and modern aesthetic. This palette is ideal for designers and developers aiming for precision and clarity in their projects. The cool blue-greys, including #A8B8CC, provide a refreshing yet grounded feel, making it perfect for interfaces, branding, or digital art that requires a structured and elegant presentation, reflecting a minimalist urban sensibility.

Best used for

Modern architectural portfolios
Tech startup branding
UI/UX for productivity apps
Professional corporate websites
Data visualization dashboards
Contemporary art gallery sites

Suggested color roles

primary

#1F252D - A very dark, almost black, base for robust backgrounds, strong typography, or primary structural elements.

secondary

#3E4A5B - A deep, cool grey-blue for secondary sections, large content blocks, or prominent headings, adding depth without heaviness.

accent

#6D7F9B - A versatile mid-tone for interactive elements, highlights, or graphical accents, providing a subtle pop.

background

#D8E0E8 - A light, cool background color for main content areas, providing a clean and inviting canvas.

text

#1F252D - Excellent for body text on light backgrounds like #D8E0E8. For dark backgrounds, use #D8E0E8 or white for optimal contrast.

Accessibility notes

Ensure #1F252D or #3E4A5B text on #D8E0E8 backgrounds meets WCAG AA contrast ratios.
Avoid using #A8B8CC for small text on #6D7F9B due to potentially low contrast.
The darkest and lightest colors provide excellent contrast for clear visual hierarchy.
Test all color pairings for text and interactive elements to ensure readability.

Recommended combinations

Architectural Depth

For creating a strong, structured dark theme, powerful headers, or impactful branding that exudes sophistication.

#1F252D · #3E4A5B · #6D7F9B

Skyline Hues

Ideal for soft gradients, sub-sections, or backgrounds that evoke an expansive, clear sky over a cityscape.

#6D7F9B · #A8B8CC · #D8E0E8

Sharp Contrast

Use for crisp typography and interactive elements on light backgrounds, ensuring clarity and modern appeal.

#1F252D · #D8E0E8 · #A8B8CC

CSS variables

:root {
  --urban-sketch-lines-1: #1F252D;
  --urban-sketch-lines-2: #3E4A5B;
  --urban-sketch-lines-3: #6D7F9B;
  --urban-sketch-lines-4: #A8B8CC;
  --urban-sketch-lines-5: #D8E0E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-sketch-lines": {
        1: "#1F252D",
        2: "#3E4A5B",
        3: "#6D7F9B",
        4: "#A8B8CC",
        5: "#D8E0E8",
      }
    }
  }
}

Hex values

Color 1#1F252D

Color 2#3E4A5B

Color 3#6D7F9B

Color 4#A8B8CC

Color 5#D8E0E8

Accessibility

Contrast checker

1.7:1Fail

3.8:1AA18

7.6:1AAA

11.6:1AAA

1.7:1Fail

2.2:1Fail

4.5:1AA18

6.7:1AA

3.8:1AA18

2.2:1Fail

2:1Fail

3.1:1AA18

7.6:1AAA

4.5:1AA18

2:1Fail

1.5:1Fail

11.6:1AAA

6.7:1AA

3.1:1AA18

1.5:1Fail

Similar palettes

More like Urban Sketch Lines

View all neutral

Blueprint Architectural Cool

Concrete Jungle Bloom

Concrete Urbanity Calm

Gallery Wall Azure

Industrial Chic Loft

Lunar Rock Shadow