Back to palettes

Palette

Urban Glass Facade

Cool, reflective blues and greys inspired by modern city skyscrapers.

coolminimal5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A5CAD7#7CA8BE#5381A5#2A5A8C#003673

Palette guide

How to use Urban Glass Facade

Overview

The Urban Glass Facade palette offers a sophisticated blend of cool blues, perfect for projects demanding a sleek, modern, and professional aesthetic. Inspired by contemporary architecture, colors like the deep `#003673` and the airy `#A5CAD7` create a sense of depth and clarity. Designers will find this palette excellent for conveying trust and stability, while developers can appreciate the distinct contrast between shades like `#2A5A8C` and `#7CA8BE` for building intuitive user interfaces. Its harmonious progression from light to dark makes it versatile for a wide range of digital and print applications, ensuring a polished and cohesive visual experience.

Best used for

  • Corporate branding and websites
  • Financial technology applications
  • Architectural firm portfolios
  • Modern data visualization dashboards
  • Sleek product design interfaces
  • Minimalist digital art and photography

Suggested color roles

primary

Use `#2A5A8C` as the dominant brand color, embodying professionalism and stability for key headers and navigation.

secondary

Apply `#5381A5` for supporting elements, subheadings, and interactive states to maintain a cohesive blue theme.

accent

Highlight calls to action or important information with `#7CA8BE` to provide a subtle but effective visual pop.

background

Utilize `#A5CAD7` for clean, expansive backgrounds, providing a light and airy foundation that enhances readability.

text

For dark text on light backgrounds, a deep charcoal or black is recommended. For lighter text on darker blues, use `#A5CAD7` or white.

Accessibility notes

  • Ensure sufficient contrast between `#003673` text and `#A5CAD7` backgrounds for optimal readability.
  • When using `#7CA8BE` for interactive elements, verify its contrast against both background and surrounding text.
  • Avoid placing light text like `#A5CAD7` directly on mid-tone blues like `#7CA8BE` without checking WCAG guidelines.
  • For UI elements, consider using `#2A5A8C` for active states and `#5381A5` for default states to provide clear visual distinction.

Recommended combinations

Deep Corporate

Ideal for strong brand statements, headers, and backgrounds paired with light text for high contrast.

#003673 · #A5CAD7 · #2A5A8C

Subtle UI

Perfect for gradients, background textures, or layered UI elements that require a soft, cohesive flow.

#A5CAD7 · #7CA8BE · #5381A5

Accent Focus

Use `#7CA8BE` as an accent against the deeper blues for buttons or highlight elements in a professional layout.

#2A5A8C · #7CA8BE · #003673

CSS variables

:root {
  --urban-glass-facade-1: #A5CAD7;
  --urban-glass-facade-2: #7CA8BE;
  --urban-glass-facade-3: #5381A5;
  --urban-glass-facade-4: #2A5A8C;
  --urban-glass-facade-5: #003673;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-glass-facade": {
        1: "#A5CAD7",
        2: "#7CA8BE",
        3: "#5381A5",
        4: "#2A5A8C",
        5: "#003673",
      }
    }
  }
}

Related searches

modern blue color schemecorporate UI palettesleek architectural colorscool tone branding blueminimalist website blues

Palette colors

Hex values

Color 1#A5CAD7
·
Color 2#7CA8BE
·
Color 3#5381A5
·
Color 4#2A5A8C
·
Color 5#003673
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
4.1:1AA18
6.8:1AA
2
1.5:1Fail
1.6:1Fail
2.8:1Fail
4.6:1AA
3
2.4:1Fail
1.6:1Fail
1.7:1Fail
2.8:1Fail
4
4.1:1AA18
2.8:1Fail
1.7:1Fail
1.7:1Fail
5
6.8:1AA
4.6:1AA
2.8:1Fail
1.7:1Fail

Similar palettes

More like Urban Glass Facade

View all cool
Cyber Cityscape
Digital Interface Blue
Digital Rainstorm
Industrial Edge Steel
Metropolitan Dusk
Sci-Fi Interface Blue