Palette

Retro Architect Palette

Cool, sophisticated blues reminiscent of minimalist mid-century design and sleek spaces.

coolretro5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Architect Palette 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 Retro Architect Palette.

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

Data visualization

#F0F8FF#C3DAEB#A2BCE2#7E9BD9#5C7AD0

Palette guide

How to use Retro Architect Palette

Overview

The "Retro Architect Palette" offers a sophisticated and serene journey through cool blues, reminiscent of minimalist mid-century modern design and architectural blueprints. This cohesive collection ranges from the airy #F0F8FF to the soft #C3DAEB, deepening through the elegant #A2BCE2 and robust #7E9BD9, culminating in the grounding #5C7AD0. Designers will find this palette perfect for creating clean, professional, yet inviting visuals that convey trust and timeless style. Developers can apply these hex codes to craft refined user interfaces, corporate websites, or applications that require a calm, structured, and aesthetically pleasing presence, evoking an intellectual and creative mood.

Best used for

Corporate branding and websites
Architectural firm portfolios
Interior design concepts
Tech company dashboards
Minimalist product packaging
Educational platforms

Suggested color roles

primary

#5C7AD0 (A strong, dependable darker blue, ideal for main headings, key buttons, or brand anchors.)

secondary

#A2BCE2 (A balanced medium blue, perfect for supporting content, navigation, or secondary calls to action.)

accent

#7E9BD9 (A slightly deeper medium blue, providing subtle emphasis for hover states or important but not dominant elements.)

background

#F0F8FF (A very light, airy alice blue, serving as a clean, expansive canvas that allows other elements to breathe.)

text

#C3DAEB (A light blue, suitable for subtle subheadings or secondary text on a dark background, or use charcoal for text on light backgrounds.)

Accessibility notes

Ensure sufficient contrast when using lighter blues like #F0F8FF or #C3DAEB for text, especially on white backgrounds.
#5C7AD0 (darker blue) offers good contrast for text on lighter backgrounds, meeting WCAG AA standards.
Avoid using light blues on light backgrounds for critical information; always pair with a dark text color.
For body text, using a dark gray or black on the lighter palette colors will significantly improve readability.

Recommended combinations

Modern Calm

Ideal for clean interfaces, spacious layouts, or designs aiming for a serene and professional feel.

#F0F8FF · #C3DAEB · #A2BCE2

Structured Depth

Excellent for corporate reports, data visualizations, or sections requiring a sense of authority and clarity.

#5C7AD0 · #7E9BD9 · #A2BCE2

Retro Clarity

Use for brand logos, clean website designs, or any element needing a clear, minimalist, and timeless aesthetic.

#F0F8FF · #5C7AD0 · #C3DAEB

CSS variables

:root {
  --retro-architect-palette-1: #F0F8FF;
  --retro-architect-palette-2: #C3DAEB;
  --retro-architect-palette-3: #A2BCE2;
  --retro-architect-palette-4: #7E9BD9;
  --retro-architect-palette-5: #5C7AD0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-architect-palette": {
        1: "#F0F8FF",
        2: "#C3DAEB",
        3: "#A2BCE2",
        4: "#7E9BD9",
        5: "#5C7AD0",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#C3DAEB

Color 3#A2BCE2

Color 4#7E9BD9

Color 5#5C7AD0

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

2.6:1Fail

3.8:1AA18

1.3:1Fail

1.9:1Fail

2.8:1Fail

1.8:1Fail

1.3:1Fail

1.4:1Fail

2.1:1Fail

2.6:1Fail

1.9:1Fail

1.4:1Fail

1.5:1Fail

3.8:1AA18

2.8:1Fail

2.1:1Fail

1.5:1Fail

Similar palettes

More like Retro Architect Palette

Retro Architect Palette

See it in context.

Ready when you are.

Built with Retro Architect Palette.

How to use Retro Architect Palette

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Modern Calm

Structured Depth

Retro Clarity

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Retro Architect Palette