Palette

Blueprint Architectural Cool

A precise and cool palette inspired by the lines and shades of a technical architectural blueprint.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Blueprint Architectural Cool 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 Blueprint Architectural Cool.

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

Data visualization

#34495e#2c3e50#8bbbdd#d5dce6#eff4f7

Palette guide

How to use Blueprint Architectural Cool

Overview

The Blueprint Architectural Cool palette delivers a sophisticated and precise collection of cool, muted tones, ideal for designs that convey professionalism and modern clarity. Featuring the deep, foundational #2c3e50 and its slightly lighter counterpart #34495e, this scheme establishes a strong, technical base. A striking highlight comes from the crisp #8bbbdd, perfectly complemented by the soft, airy #d5dce6 and the near-white #eff4f7. This palette is excellent for creating clean, minimalist aesthetics in digital interfaces, corporate branding, or architectural visualizations where a sense of order and calm efficiency is paramount.

Best used for

Architectural firm branding
Technical product interfaces
Modern corporate websites
Minimalist app designs
Data visualization dashboards
Professional portfolio sites

Suggested color roles

primary

Utilize #2c3e50 for strong brand presence, main headings, or foundational structural elements in UI, providing a deep, authoritative anchor.

secondary

Employ #34495e for secondary navigation, sub-sections, or background accents, offering depth without overwhelming the primary color.

accent

Apply #8bbbdd as a vibrant but cool accent for interactive buttons, progress indicators, or key informational highlights, drawing attention effectively.

background

Use #eff4f7 for primary page backgrounds to ensure a crisp, clean canvas, enhancing readability and a sense of spaciousness. #d5dce6 can be used for subtle sectioning.

text

For dark text on light backgrounds, #2c3e50 or #34495e provide excellent contrast. For lighter backgrounds like #d5dce6, a deep charcoal is recommended for body text.

Accessibility notes

Ensure sufficient contrast when pairing #8bbbdd with lighter background shades like #d5dce6 for text or critical UI elements.
The dark tones #2c3e50 and #34495e offer strong contrast for text against #eff4f7, meeting AA or AAA standards.
Use #8bbbdd judiciously as an accent to avoid overwhelming users, and ensure it meets a 3:1 contrast ratio for interactive elements.
Consider clear iconography or additional visual cues alongside color for states or statuses, especially with the subtle differences between #d5dce6 and #eff4f7.

Recommended combinations

Foundation & Highlight

Ideal for strong branding, header/footer designs, or primary calls to action on a clean backdrop.

#2C3E50 · #EFF4F7 · #8BBBDD

Technical Gradient

Great for subtle background patterns, section dividers, or data visualization elements that require a cool, modern feel.

#34495E · #D5DCE6 · #8BBBDD

Minimalist Clarity

Excellent for primary UI layouts, body text on a clean background, or soft card elements in a dashboard interface.

#EFF4F7 · #34495E · #D5DCE6

CSS variables

:root {
  --blueprint-architectural-cool-1: #34495e;
  --blueprint-architectural-cool-2: #2c3e50;
  --blueprint-architectural-cool-3: #8bbbdd;
  --blueprint-architectural-cool-4: #d5dce6;
  --blueprint-architectural-cool-5: #eff4f7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "blueprint-architectural-cool": {
        1: "#34495e",
        2: "#2c3e50",
        3: "#8bbbdd",
        4: "#d5dce6",
        5: "#eff4f7",
      }
    }
  }
}

Hex values

Color 1#34495e

Color 2#2c3e50

Color 3#8bbbdd

Color 4#d5dce6

Color 5#eff4f7

Accessibility

Contrast checker

1.2:1Fail

4.5:1AA

6.7:1AA

8.4:1AAA

1.2:1Fail

5.4:1AA

8:1AAA

9.9:1AAA

4.5:1AA

5.4:1AA

1.5:1Fail

1.8:1Fail

6.7:1AA

8:1AAA

1.5:1Fail

1.2:1Fail

8.4:1AAA

9.9:1AAA

1.8:1Fail

1.2:1Fail

Similar palettes

More like Blueprint Architectural Cool

Blueprint Architectural Cool

See it in context.

Ready when you are.

Built with Blueprint Architectural Cool.

How to use Blueprint Architectural Cool

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Foundation & Highlight

Technical Gradient

Minimalist Clarity

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Blueprint Architectural Cool