Palette

Modern Minimal Line

A stark, clean palette focused on simplicity and functionality, ideal for contemporary minimal design.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Modern Minimal Line 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 Modern Minimal Line.

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

Data visualization

#2C3E50#ECF0F1#BDC3C7#7F8C8D#34495E

Palette guide

How to use Modern Minimal Line

Overview

The "Modern Minimal Line" palette delivers a sophisticated blend of cool grays and a deep, almost black-blue, perfect for creating clean, functional, and contemporary designs. Featuring the crisp light gray #ECF0F1, the versatile mid-tone #BDC3C7, and the profound #2C3E50, this palette excels in establishing a strong visual structure. Designers can utilize these shades to craft interfaces that prioritize readability and user experience. Developers will appreciate the cohesive nature of these hex codes for consistent branding, main content areas, and subtle UI accents, ensuring a sleek and professional aesthetic. The subtle variations, including #7F8C8D and #34495E, allow for nuanced depth without sacrificing minimalism.

Best used for

Professional corporate websites
SaaS application interfaces
Mobile app design with clean aesthetics
Data visualization dashboards
Editorial design for tech publications
Branding for modern consulting firms

Suggested color roles

primary

#2C3E50 - A deep, dark blue-gray, ideal for main navigation, prominent headers, or primary interactive elements, conveying stability.

secondary

#34495E - A slightly lighter but still deep blue-gray, suitable for sub-headers, section dividers, or secondary navigation links, adding depth.

accent

#7F8C8D - A muted, cool gray that can highlight subtle interactions, progress indicators, or small iconography, providing a soft touch.

background

#ECF0F1 - A very light, almost off-white gray, serving as a clean and airy canvas that reduces eye strain compared to pure white.

text

#2C3E50 - Provides excellent contrast for body text and headlines against light backgrounds like #ECF0F1 or #BDC3C7, ensuring optimal readability.

Accessibility notes

#2C3E50 on #ECF0F1 or #BDC3C7 provides strong contrast, meeting WCAG AA standards for text.
Ensure that #7F8C8D used for text on #ECF0F1 is only for large text or decorative elements due to lower contrast.
Use a robust contrast checker for any text on #BDC3C7 to confirm readability.
Interactive elements should have clear focus states, perhaps using a subtle border with #7F8C8D.

Recommended combinations

Base & Text

Perfect for main content areas, where #ECF0F1 is background, #BDC3C7 for cards, and #2C3E50 for text.

#ECF0F1 · #BDC3C7 · #2C3E50

Subtle Hierarchy

Creates a gentle visual flow for secondary information, subtle dividers, or disabled states in UI.

#ECF0F1 · #7F8C8D · #34495E

Deep Contrast

Excellent for headers, call-to-action buttons, and critical information where strong visual impact is needed.

#ECF0F1 · #2C3E50 · #34495E

CSS variables

:root {
  --modern-minimal-line-1: #2C3E50;
  --modern-minimal-line-2: #ECF0F1;
  --modern-minimal-line-3: #BDC3C7;
  --modern-minimal-line-4: #7F8C8D;
  --modern-minimal-line-5: #34495E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "modern-minimal-line": {
        1: "#2C3E50",
        2: "#ECF0F1",
        3: "#BDC3C7",
        4: "#7F8C8D",
        5: "#34495E",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#ECF0F1

Color 3#BDC3C7

Color 4#7F8C8D

Color 5#34495E

Accessibility

Contrast checker

9.6:1AAA

6.2:1AA

3.2:1AA18

1.2:1Fail

9.6:1AAA

1.6:1Fail

3:1AA18

8.1:1AAA

6.2:1AA

1.6:1Fail

2:1Fail

5.2:1AA

3.2:1AA18

3:1AA18

2:1Fail

2.7:1Fail

1.2:1Fail

8.1:1AAA

5.2:1AA

2.7:1Fail

Similar palettes

More like Modern Minimal Line

View all neutral

Minimalist Clay Sculpt

Minimalist Gallery Wall