Palette

Modern Minimal Geometry

Crisp, clean shades of gray for a minimalist design that emphasizes structure and form.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E5E5E5#CCCCCC#999999#666666#333333

Palette guide

How to use Modern Minimal Geometry

Overview

The "Modern Minimal Geometry" palette offers a sophisticated range of cool grays, perfect for designs seeking a sleek, understated aesthetic. This monochrome collection, featuring shades like the light #E5E5E5, mid-tone #999999, and deep #333333, emphasizes structure and clean lines. Designers can leverage these versatile neutrals to create robust visual hierarchies and a sense of calm elegance. Developers will find these hex codes easy to implement for UI elements, backgrounds, and typography, ensuring a cohesive and professional look. The subdued nature of #CCCCCC and #666666 allows content to stand out, making this palette ideal for showcasing detailed imagery or complex information architecture without visual clutter.

Best used for

Corporate websites and portfolios
UI/UX design for tech products
Architectural visualization and renders
High-end fashion or lifestyle branding
Editorial layouts and typography-focused designs
Art gallery or museum digital presence

Suggested color roles

primary

#666666 - A strong mid-gray for main structural elements, headers, or prominent UI components, providing a solid foundation.

secondary

#999999 - A softer mid-gray suitable for subheadings, secondary information blocks, or dividing lines, offering gentle contrast.

accent

#333333 - A deep, authoritative gray perfect for interactive elements like buttons, icons, or important call-to-action text, demanding attention.

background

#E5E5E5 - A very light gray that provides a clean, airy canvas, allowing content to breathe and stand out without harsh white.

text

#333333 - Excellent for body text and headlines against lighter backgrounds like #E5E5E5 or #CCCCCC, ensuring high readability.

Accessibility notes

Ensure sufficient contrast when using #999999 for text against #E5E5E5 or #CCCCCC backgrounds.
#333333 provides good contrast for text on #E5E5E5, meeting WCAG AA standards for large text.
Avoid using #E5E5E5 for small text on #CCCCCC as contrast may be insufficient.
For interactive elements, ensure focus states have a clear, distinct contrast against normal states.

Recommended combinations

Subtle Depth

Ideal for layered backgrounds, subtle gradients, or card components where a gentle visual hierarchy is desired.

#E5E5E5 · #CCCCCC · #999999

High Contrast

Best for ensuring readability with light backgrounds and dark text, or for defining clear sections and interactive elements.

#E5E5E5 · #666666 · #333333

Monochrome Balance

Useful for creating a sophisticated, tonal design across various UI elements, such as navigation or secondary content areas.

#CCCCCC · #999999 · #666666

CSS variables

:root {
  --modern-minimal-geometry-1: #E5E5E5;
  --modern-minimal-geometry-2: #CCCCCC;
  --modern-minimal-geometry-3: #999999;
  --modern-minimal-geometry-4: #666666;
  --modern-minimal-geometry-5: #333333;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "modern-minimal-geometry": {
        1: "#E5E5E5",
        2: "#CCCCCC",
        3: "#999999",
        4: "#666666",
        5: "#333333",
      }
    }
  }
}

Hex values

Color 1#E5E5E5

Color 2#CCCCCC

Color 3#999999

Color 4#666666

Color 5#333333

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

4.6:1AA

10:1AAA

1.3:1Fail

1.8:1Fail

3.6:1AA18

7.9:1AAA

2.3:1Fail

1.8:1Fail

2:1Fail

4.4:1AA18

4.6:1AA

3.6:1AA18

2:1Fail

2.2:1Fail

10:1AAA

7.9:1AAA

4.4:1AA18

2.2:1Fail

Similar palettes

More like Modern Minimal Geometry

Minimalist Clay Sculpt

Minimalist Gallery Light

Minimalist Gallery Wall