Palette

Art Deco Metropolis

Sleek and sophisticated blues, evoking the grandeur and symmetry of Art Deco architecture.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Art Deco Metropolis 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 Art Deco Metropolis.

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

Data visualization

#1C2F4D#4B6F9A#89A7C5#C1D8EB#2D4566

Palette guide

How to use Art Deco Metropolis

Overview

The "Art Deco Metropolis" palette evokes the grandeur and sleekness of classic Art Deco architecture, utilizing a range of sophisticated blues. This collection is perfect for designers and developers aiming to convey a sense of elegance, stability, and urban sophistication. From the deep, foundational navy of #1C2F4D to the airy, light blue of #C1D8EB, these shades offer excellent versatility. The mid-tones, #4B6F9A and #89A7C5, provide smooth transitions and depth, making this palette ideal for corporate branding, architectural presentations, or digital interfaces that require a professional yet stylish aesthetic.

Best used for

Corporate and finance websites
Architectural firm branding
Modern museum exhibits
Professional services marketing materials
Sleek app design
Urban planning presentations

Suggested color roles

primary

Use #4B6F9A, a confident, medium blue, for main content blocks, primary navigation, or prominent branding elements, anchoring the palette.

secondary

Apply #89A7C5, a lighter, more open blue, for secondary headings, background panels, or subtle UI elements, complementing the primary.

accent

Employ #1C2F4D, a deep, rich navy, for strong calls-to-action, important icons, or dramatic section separators to add gravitas.

background

Select #C1D8EB, a very light, almost ethereal blue, as a clean, expansive canvas, ensuring excellent readability for darker text.

text

Choose #2D4566, a dark, readable blue, for body text, ensuring strong contrast against lighter backgrounds and a cohesive feel.

Accessibility notes

Ensure #2D4566 text on #C1D8EB background meets WCAG AA contrast for body text.
Avoid using #89A7C5 text on #C1D8EB, as the contrast will be insufficient for most users.
For interactive elements, use #1C2F4D against #C1D8EB to provide clear visual cues.
When using #4B6F9A for backgrounds, ensure text is light (e.g., white or #C1D8EB) for readability.

Recommended combinations

Urban Sophistication

Great for a clean web page header, with the light blue as background and dark blue for text.

#C1D8EB · #4B6F9A · #2D4566

Architectural Depth

Creates a layered effect for content sections, with the darkest blue as a strong separator.

#89A7C5 · #1C2F4D · #4B6F9A

Sleek Contrast

Use for a professional dashboard, where the dark blue highlights key metrics against a light background.

#C1D8EB · #1C2F4D · #89A7C5

CSS variables

:root {
  --art-deco-metropolis-2-1: #1C2F4D;
  --art-deco-metropolis-2-2: #4B6F9A;
  --art-deco-metropolis-2-3: #89A7C5;
  --art-deco-metropolis-2-4: #C1D8EB;
  --art-deco-metropolis-2-5: #2D4566;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-metropolis-2": {
        1: "#1C2F4D",
        2: "#4B6F9A",
        3: "#89A7C5",
        4: "#C1D8EB",
        5: "#2D4566",
      }
    }
  }
}

Hex values

Color 1#1C2F4D

Color 2#4B6F9A

Color 3#89A7C5

Color 4#C1D8EB

Color 5#2D4566

Accessibility

Contrast checker

2.6:1Fail

5.4:1AA

9.1:1AAA

1.4:1Fail

2.6:1Fail

2.1:1Fail

3.5:1AA18

1.9:1Fail

5.4:1AA

2.1:1Fail

1.7:1Fail

3.9:1AA18

9.1:1AAA

3.5:1AA18

1.7:1Fail

6.6:1AA

1.4:1Fail

1.9:1Fail

3.9:1AA18

6.6:1AA

Similar palettes

More like Art Deco Metropolis

View all cool

Art Deco Sapphire

Aurora Horizon Whisper

Azure Sapphire Gleam

Celestial Ice Sparkle

Cityscape Nocturne Blue

Cobalt Ink Flow