Palette

Jazz Age Geometry

Sleek blues and subtle purples reflect the geometric patterns and understated luxury of the Art Deco movement.

Elegantelegant5 colors

More Elegant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Jazz Age Geometry 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 Jazz Age Geometry.

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

Data visualization

#0F0F2A#2A2A4C#4B4B8A#7E7EC1#B3B3E5

Palette guide

How to use Jazz Age Geometry

Overview

This Jazz Age Geometry palette evokes the sophisticated elegance of the Art Deco era with its harmonious gradient of deep to light blues and purples. Designers can leverage the rich depth of #0F0F2A and #2A2A4C for foundational elements, while #4B4B8A provides a strong mid-tone. The lighter shades, #7E7EC1 and #B3B3E5, are perfect for accents, illustrations, or lighter UI components, offering a refined and classic aesthetic. This palette is ideal for projects requiring a sense of understated luxury, structure, and historical charm, ensuring a cohesive and visually appealing experience across various digital and print mediums.

Best used for

Art Deco inspired branding
Luxury product packaging
High-end website design
Editorial layouts for history/culture magazines
Theatrical set or costume design
Elegant event invitations

Suggested color roles

primary

#0F0F2A - Excellent for strong headers, primary navigation, or background elements where depth is desired.

secondary

#4B4B8A - A versatile mid-tone for subheadings, active states, or larger UI components.

accent

#B3B3E5 - Use sparingly for highlights, icons, or interactive elements to draw attention.

background

#2A2A4C - A sophisticated dark background that provides a rich canvas without being stark black.

text

#7E7EC1 - Suitable for lighter text on darker backgrounds, or a subtle alternative to black on light backgrounds like #B3B3E5.

Accessibility notes

Ensure sufficient contrast when using #B3B3E5 for text on #7E7EC1 or similar light backgrounds.
#0F0F2A offers strong contrast for white or light-colored text (e.g., #B3B3E5).
Test #4B4B8A for readability as text on #2A2A4C; it might require larger font sizes.
For interactive elements, ensure focus states use a color with high contrast against both normal and hover states.

Recommended combinations

Deep Deco

Ideal for corporate branding or sophisticated UI with a clear hierarchy.

#0F0F2A · #4B4B8A · #B3B3E5

Subtle Gradient

Creates a soft, elegant visual flow for backgrounds or layered elements.

#2A2A4C · #7E7EC1 · #B3B3E5

Retro Contrast

A strong dark base with bright, clean highlights for impactful design.

#0F0F2A · #7E7EC1 · #B3B3E5

CSS variables

:root {
  --jazz-age-geometry-1: #0F0F2A;
  --jazz-age-geometry-2: #2A2A4C;
  --jazz-age-geometry-3: #4B4B8A;
  --jazz-age-geometry-4: #7E7EC1;
  --jazz-age-geometry-5: #B3B3E5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jazz-age-geometry": {
        1: "#0F0F2A",
        2: "#2A2A4C",
        3: "#4B4B8A",
        4: "#7E7EC1",
        5: "#B3B3E5",
      }
    }
  }
}

Hex values

Color 1#0F0F2A

Color 2#2A2A4C

Color 3#4B4B8A

Color 4#7E7EC1

Color 5#B3B3E5

Accessibility

Contrast checker

1.4:1Fail

2.4:1Fail

5:1AA

9.4:1AAA

1.4:1Fail

1.7:1Fail

3.7:1AA18

6.8:1AA

2.4:1Fail

1.7:1Fail

2.1:1Fail

3.9:1AA18

5:1AA

3.7:1AA18

2.1:1Fail

1.9:1Fail

9.4:1AAA

6.8:1AA

3.9:1AA18

1.9:1Fail

Similar palettes

More like Jazz Age Geometry

View all Elegant

Roaring Twenties Chic