Palette

Gallery Wall Azure

Clean and understated, reflecting a modern gallery space with a cool azure accent.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gallery Wall Azure 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 Gallery Wall Azure.

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

Data visualization

#E0E0E0#C7CED1#8F9CA3#5C7A8F#3A4F5C

Palette guide

How to use Gallery Wall Azure

Overview

The 'Gallery Wall Azure' palette offers a refined, cool, and understated aesthetic, perfect for modern digital spaces. It features a harmonious gradient of cool greys and subtle blues, starting with the bright #E0E0E0 and moving through the gentle #C7CED1 to the more pronounced #8F9CA3. The palette deepens with #5C7A8F and culminates in the profound #3A4F5C, which grounds the scheme. This collection is ideal for designers and developers seeking to create clean, sophisticated, and professional user interfaces, corporate websites, or minimalist branding that conveys calm and clarity with a touch of cool elegance.

Best used for

Corporate websites and professional services
Minimalist UI for productivity applications
Art exhibition and museum online presences
Interior design portfolios and blogs
Sustainable and eco-friendly brand identity
Clean data visualization dashboards

Suggested color roles

primary

Use #E0E0E0 as the dominant background color to create a spacious, clean canvas. It provides an excellent base for darker text and elements.

secondary

Employ #C7CED1 or #8F9CA3 for secondary backgrounds, panels, or subtle content separation. They add depth without breaking the minimalist feel.

accent

Reserve #5C7A8F for subtle accents, interactive elements, or important headings. It introduces the cool azure tone without overwhelming the design.

background

The lightest #E0E0E0 is perfect for main content areas, providing a bright and airy feel. #3A4F5C can be used for sophisticated dark footers or navigation.

text

Use #3A4F5C for primary body text against #E0E0E0 or #C7CED1 for optimal readability. #5C7A8F can be used for subheadings or secondary information.

Accessibility notes

Ensure #3A4F5C text on #E0E0E0 backgrounds meets WCAG AA standards for readability.
Avoid using #C7CED1 text on #8F9CA3 backgrounds; the contrast will likely be insufficient.
When using darker backgrounds like #3A4F5C, ensure text is #E0E0E0 or a bright white for clear contrast.
Carefully check contrast for all text and background pairings, especially with mid-range greys.

Recommended combinations

Clean UI

Bright background, subtle grey for panels, and the darkest blue-grey for text and accents.

#E0E0E0 · #C7CED1 · #3A4F5C

Modern Professional

Creates a sophisticated, layered look with cool blue-greys for corporate branding.

#C7CED1 · #8F9CA3 · #5C7A8F

Azure Accents

Use #E0E0E0 as background, #3A4F5C for text, and #5C7A8F for subtle interactive highlights.

#E0E0E0 · #3A4F5C · #5C7A8F

CSS variables

:root {
  --gallery-wall-azure-1: #E0E0E0;
  --gallery-wall-azure-2: #C7CED1;
  --gallery-wall-azure-3: #8F9CA3;
  --gallery-wall-azure-4: #5C7A8F;
  --gallery-wall-azure-5: #3A4F5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gallery-wall-azure": {
        1: "#E0E0E0",
        2: "#C7CED1",
        3: "#8F9CA3",
        4: "#5C7A8F",
        5: "#3A4F5C",
      }
    }
  }
}

Hex values

Color 1#E0E0E0

Color 2#C7CED1

Color 3#8F9CA3

Color 4#5C7A8F

Color 5#3A4F5C

Accessibility

Contrast checker

1.2:1Fail

2.1:1Fail

3.4:1AA18

6.5:1AA

1.2:1Fail

1.8:1Fail

2.8:1Fail

5.4:1AA

2.1:1Fail

1.8:1Fail

1.6:1Fail

3:1AA18

3.4:1AA18

2.8:1Fail

1.6:1Fail

1.9:1Fail

6.5:1AA

5.4:1AA

3:1AA18

1.9:1Fail

Similar palettes

More like Gallery Wall Azure

Blueprint Architectural Cool

Concrete Garden Grey