styleColor Scheme

Monochrome Gray

A sophisticated monochrome gray palette using only shades of gray. Achieves depth and hierarchy through tonal variation alone.

#ffffff
#f9fafb
#111827
#6b7280
#475569

Color Breakdown

Role

background

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

surface

Name

Gray 50

Hex

#f9fafb

Tailwind

bg-gray-50

Role

primary

Name

Gray 900

Hex

#111827

Tailwind

text-gray-900

Role

secondary

Name

Gray 500

Hex

#6b7280

Tailwind

text-gray-500

Role

accent

Name

Slate 600

Hex

#475569

Tailwind

bg-slate-600

Live Preview

Welcome Back

This is a live preview of the Monochrome Gray color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Pure grayscale forces hierarchy through size, weight, and spacing rather than color. This restraint creates a timeless, sophisticated visual language.

Use Cases

Architecture portfoliosPhotography galleriesEditorial layouts

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #f9fafb;
  --primary: #111827;
  --secondary: #6b7280;
  --accent: #475569;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'monochrome-gray': {
  'background': '#ffffff',  // bg-white
  'surface': '#f9fafb',  // bg-gray-50
  'primary': '#111827',  // text-gray-900
  'secondary': '#6b7280',  // text-gray-500
  'accent': '#475569',  // bg-slate-600
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

Why choose a monochrome palette?
Monochrome palettes eliminate color distraction, letting typography, imagery, and layout do the communicative work.