Palette

Grey Scale Journey

A sophisticated monochromatic journey through various shades of grey, offering depth and modern simplicity.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#637380#8D9EA8#C3CDD4#EBF0F2

Palette guide

How to use Grey Scale Journey

Overview

The Grey Scale Journey palette offers a sophisticated monochromatic progression through various shades of blue-gray, delivering depth and modern simplicity. Ranging from the profound #2C3E50 to the airy #EBF0F2, with versatile mid-tones like #637380 and #8D9EA8, this collection is perfect for designs demanding a sleek, professional, and timeless aesthetic. Designers and developers will find these hues ideal for creating robust user interfaces, corporate branding, or elegant editorial layouts. It's an excellent choice for projects that aim to convey stability, modernity, and a refined minimalist sensibility across various digital and print applications, ensuring clarity and visual coherence.

Best used for

Corporate branding and websites
Tech product interfaces
Minimalist photography portfolios
Professional services websites
Modern art galleries
Data visualization dashboards

Suggested color roles

primary

Use #2C3E50 as a deep, foundational primary for headers, important text, or strong brand elements.

secondary

Apply #637380 for subheadings, secondary buttons, or larger content blocks, offering a versatile mid-grey.

accent

Employ #8D9EA8 as a subtle highlight for interactive elements, delicate details, or soft visual cues.

background

Utilize #EBF0F2 for light, clean main content backgrounds, or #C3CDD4 for a slightly richer, professional canvas.

text

For optimal contrast, use black, dark charcoal, or #2C3E50 for text on lighter backgrounds.

Accessibility notes

Ensure #2C3E50 text on #EBF0F2 backgrounds provides excellent WCAG AA contrast.
Avoid using #EBF0F2 or #C3CDD4 for small text, especially on similar light backgrounds.
When using mid-tones like #8D9EA8 for text, ensure the background offers sufficient differentiation.
Always verify contrast ratios for all interactive elements and crucial information using accessibility tools.

Recommended combinations

Modern Depth

Creates a strong, professional base with clear hierarchy, ideal for corporate websites or dashboards.

#EBF0F2 · #637380 · #2C3E50

Sleek Transition

Ideal for subtle background gradients, layered effects, or sections that require a sophisticated, seamless flow.

#C3CDD4 · #8D9EA8 · #637380

Monochrome Contrast

Perfect for high-impact headers and interactive elements against a lighter, supporting informational context.

#2C3E50 · #8D9EA8 · #C3CDD4

CSS variables

:root {
  --grey-scale-journey-1: #2C3E50;
  --grey-scale-journey-2: #637380;
  --grey-scale-journey-3: #8D9EA8;
  --grey-scale-journey-4: #C3CDD4;
  --grey-scale-journey-5: #EBF0F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grey-scale-journey": {
        1: "#2C3E50",
        2: "#637380",
        3: "#8D9EA8",
        4: "#C3CDD4",
        5: "#EBF0F2",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#637380

Color 3#8D9EA8

Color 4#C3CDD4

Color 5#EBF0F2

Accessibility

Contrast checker

2.2:1Fail

4:1AA18

6.8:1AA

9.6:1AAA

2.2:1Fail

1.8:1Fail

3:1AA18

4.3:1AA18

4:1AA18

1.8:1Fail

1.7:1Fail

2.4:1Fail

6.8:1AA

3:1AA18

1.7:1Fail

1.4:1Fail

9.6:1AAA

4.3:1AA18

2.4:1Fail

1.4:1Fail

Similar palettes

More like Grey Scale Journey

View all monochrome

Architectural Grid Hues

Charcoal Whisper Scale

Graphite Sketch Grid

Industrial Loft Hues

Minimalist Gallery Wall

Minimalist Stone Carve