Palette

Boulevard Grey

Sophisticated and understated, inspired by the classic stone and chic ambience of Parisian boulevards.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Boulevard Grey 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 Boulevard Grey.

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

Data visualization

#607D8B#90A4AE#CFD8DC#EEEEEE#B0BEC5

Palette guide

How to use Boulevard Grey

Overview

The Boulevard Grey palette is sophisticated and understated, inspired by the classic stone and chic ambiance of Parisian boulevards. Ranging from the deep #607D8B to the almost-white #EEEEEE, and including versatile mid-tones like #90A4AE and #B0BEC5, this scheme is perfect for designs seeking an elegant, urban, and modern aesthetic. The light #CFD8DC provides a smooth transition. Designers can leverage this monochrome palette for projects requiring a clean, professional, and timeless feel, such as high-end corporate branding, architectural presentations, or minimalist web interfaces. Its cohesive gray scale ensures visual clarity and a refined user experience, emphasizing content and structure.

Best used for

High-end corporate branding and websites
Architectural and urban design presentations
Luxury fashion and retail marketing
Modern interior design concepts
Automotive industry branding
Minimalist tech and software interfaces

Suggested color roles

primary

Utilize #607D8B as a strong primary color for headings, main navigation, or impactful brand elements, conveying professionalism and stability.

secondary

Apply #90A4AE for subheadings, secondary content, or supporting graphic elements, offering a balanced mid-gray.

accent

Employ #B0BEC5 for subtle accents or interactive elements where a gentle visual cue is desired without strong color.

background

The lightest shade, #EEEEEE, is perfect for clean, airy backgrounds, ensuring optimal readability and a modern feel.

text

The deep #607D8B is ideal for body text and critical information, ensuring excellent readability on light backgrounds like #EEEEEE.

Accessibility notes

Ensure strong contrast for text, using #607D8B on #EEEEEE or #CFD8DC backgrounds, to meet WCAG AA standards.
Avoid using #B0BEC5 or #90A4AE for text on #CFD8DC or #EEEEEE backgrounds due to insufficient contrast; reserve them for larger elements.
For interactive elements, ensure distinct hover/focus states, as color differences within this monochrome palette might be subtle.
Use sufficient line height and letter spacing to enhance readability, especially with light gray text on similar backgrounds.

Recommended combinations

Urban Stone

Creates a sophisticated, minimalist look, perfect for professional headers or clean content blocks with a light backdrop.

#607D8B · #90A4AE · #EEEEEE

Boulevard Gradient

Offers a soft, harmonious transition, ideal for subtle gradients, background textures, or layered graphic elements.

#90A4AE · #B0BEC5 · #CFD8DC

Chic Contrast

Emphasizes readability and visual hierarchy, with dark text on a light background and a complementary mid-gray for accents.

#607D8B · #EEEEEE · #B0BEC5

CSS variables

:root {
  --boulevard-grey-1: #607D8B;
  --boulevard-grey-2: #90A4AE;
  --boulevard-grey-3: #CFD8DC;
  --boulevard-grey-4: #EEEEEE;
  --boulevard-grey-5: #B0BEC5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "boulevard-grey": {
        1: "#607D8B",
        2: "#90A4AE",
        3: "#CFD8DC",
        4: "#EEEEEE",
        5: "#B0BEC5",
      }
    }
  }
}

Hex values

Color 1#607D8B

Color 2#90A4AE

Color 3#CFD8DC

Color 4#EEEEEE

Color 5#B0BEC5

Accessibility

Contrast checker

1.7:1Fail

3:1AA18

3.8:1AA18

2.3:1Fail

1.7:1Fail

1.8:1Fail

2.2:1Fail

1.4:1Fail

3:1AA18

1.8:1Fail

1.2:1Fail

1.3:1Fail

3.8:1AA18

2.2:1Fail

1.2:1Fail

1.6:1Fail

2.3:1Fail

1.4:1Fail

1.3:1Fail

1.6:1Fail

Similar palettes

More like Boulevard Grey

View all neutral

Boulevard Bistro Tones

Ancient Calligraphy Ink