Palette

Shadow Scale Study

A stark and powerful monochromatic palette exploring the depth and contrast of black, white, and a range of greys.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shadow Scale Study 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 Shadow Scale Study.

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

Data visualization

#000000#202020#505050#A0A0A0#F0F0F0

Palette guide

How to use Shadow Scale Study

Overview

The "Shadow Scale Study" palette is a powerful monochromatic exploration, offering a stark yet sophisticated range from absolute black to near-white. This fundamental collection includes pure black #000000, a deep charcoal #202020, a balanced medium gray #505050, and a lighter, soft gray #A0A0A0, culminating in an off-white #F0F0F0. This palette is essential for designers and developers seeking maximum contrast, clarity, and a timeless, minimalist aesthetic. It provides a robust foundation for building accessible interfaces, dramatic visual narratives, or clean, professional branding.

Best used for

High-contrast UI/UX design
Minimalist branding and logos
Photography portfolios
Technical documentation and reports
Modern architecture visualizations
Accessible website design

Suggested color roles

primary

#000000 (pure black). The ultimate background or foundational color for dramatic impact and deep contrast.

secondary

#202020 (deep charcoal). Excellent for content containers, navigation, or to add subtle depth without being absolute black.

accent

#F0F0F0 (off-white). Use this for bright highlights, active states, or primary calls to action to stand out dramatically.

background

#F0F0F0 (off-white). A clean, bright base that provides maximum readability for darker text.

text

#000000 for primary text on lighter backgrounds like #F0F0F0, or #F0F0F0 for text on dark backgrounds like #000000.

Accessibility notes

#000000 text on #F0F0F0 background provides excellent contrast, meeting WCAG AA and AAA standards.
#202020 text on #F0F0F0 is also highly readable.
#F0F0F0 text on #000000 or #202020 provides optimal contrast for dark modes.
Avoid using #A0A0A0 or #505050 as text on #F0F0F0 without careful contrast checking; prefer darker text.

Recommended combinations

Classic Contrast

Ideal for creating striking, readable interfaces and professional documents.

#000000 · #F0F0F0 · #202020

Grayscale Depth

Excellent for subtle layering in dark mode UIs or visual hierarchies.

#202020 · #505050 · #A0A0A0

Light & Shadow

Perfect for minimalist branding or clean web layouts focusing on negative space.

#F0F0F0 · #A0A0A0 · #000000

CSS variables

:root {
  --shadow-scale-study-1: #000000;
  --shadow-scale-study-2: #202020;
  --shadow-scale-study-3: #505050;
  --shadow-scale-study-4: #A0A0A0;
  --shadow-scale-study-5: #F0F0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shadow-scale-study": {
        1: "#000000",
        2: "#202020",
        3: "#505050",
        4: "#A0A0A0",
        5: "#F0F0F0",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#202020

Color 3#505050

Color 4#A0A0A0

Color 5#F0F0F0

Accessibility

Contrast checker

1.3:1Fail

2.6:1Fail

8:1AAA

18.4:1AAA

1.3:1Fail

2:1Fail

6.2:1AA

14.3:1AAA

2.6:1Fail

2:1Fail

3.1:1AA18

7.1:1AAA

8:1AAA

6.2:1AA

3.1:1AA18

2.3:1Fail

18.4:1AAA

14.3:1AAA

7.1:1AAA

2.3:1Fail

Similar palettes

More like Shadow Scale Study

View all monochrome

City Grayscale View

Grayscale Photo Grain

Monochromatic Graphite

Monochromatic Ink Wash

Monochrome Slate

Abstract Canvas Swirl