Palette

Grayscale Photo Grain

A classic black-to-white gradient, capturing the timeless simplicity and depth of monochromatic photography.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Grayscale Photo Grain 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 Grayscale Photo Grain.

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

Data visualization

#000000#333333#666666#999999#CCCCCC

Palette guide

How to use Grayscale Photo Grain

Overview

The Grayscale Photo Grain palette offers a classic black-to-white gradient, capturing the timeless simplicity and depth of monochromatic photography. With true black #000000 and light grey #CCCCCC, alongside balanced mid-tones like #333333, #666666, and #999999, this palette provides ultimate versatility. Designers and developers can use this fundamental collection to create elegant, clean, and highly readable designs. It's perfect for projects that demand a sophisticated, no-nonsense aesthetic, allowing content and imagery to take center stage without color distractions. This palette is a staple for any design system.

Best used for

Classic photography websites and portfolios
E-commerce platforms with a focus on product visuals
Editorial content and news websites
Minimalist user interfaces and dashboards
Art and design academic publications
Branding for classic or vintage-inspired products

Suggested color roles

primary

Use #000000 for bold headlines, critical UI elements, or strong background sections to provide maximum impact.

secondary

Apply #333333 for body text, subheadings, or secondary navigation, ensuring excellent readability.

accent

#999999 or #CCCCCC can serve as subtle accents for dividers, inactive states, or background textures, adding visual interest.

background

#CCCCCC provides a light, clean canvas. For a darker aesthetic, #333333 can create a sophisticated backdrop.

text

For primary text, #000000 on light backgrounds like #CCCCCC is ideal. For darker backgrounds, use #CCCCCC or white.

Accessibility notes

Ensure #000000 text on #CCCCCC background has excellent WCAG AAA contrast, making it highly readable.
Be mindful of using #666666 text on #999999 background; test for sufficient contrast, especially for small text.
Always provide clear focus and hover states for interactive elements to aid navigation.
Use a robust, legible typeface to maximize readability across the full grayscale spectrum.

Recommended combinations

Classic Contrast

Ideal for high-contrast, readable layouts, perfect for text-heavy content and core UI elements.

#000000 · #CCCCCC · #333333

Photo Depth

Excellent for creating layered effects, background gradients, or subtle distinctions in visual elements.

#333333 · #999999 · #666666

Clean Canvas

Suited for light-themed designs, using the lightest grey as a background with black text and a mid-grey for accents.

#CCCCCC · #000000 · #666666

CSS variables

:root {
  --grayscale-photo-grain-1: #000000;
  --grayscale-photo-grain-2: #333333;
  --grayscale-photo-grain-3: #666666;
  --grayscale-photo-grain-4: #999999;
  --grayscale-photo-grain-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grayscale-photo-grain": {
        1: "#000000",
        2: "#333333",
        3: "#666666",
        4: "#999999",
        5: "#CCCCCC",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#333333

Color 3#666666

Color 4#999999

Color 5#CCCCCC

Accessibility

Contrast checker

1.7:1Fail

3.7:1AA18

7.4:1AAA

13.1:1AAA

1.7:1Fail

2.2:1Fail

4.4:1AA18

7.9:1AAA

3.7:1AA18

2.2:1Fail

2:1Fail

3.6:1AA18

7.4:1AAA

4.4:1AA18

2:1Fail

1.8:1Fail

13.1:1AAA

7.9:1AAA

3.6:1AA18

1.8:1Fail

Similar palettes

More like Grayscale Photo Grain

View all monochrome

Shadow Scale Study

Abstract Canvas Swirl

City Grayscale View

Monochromatic Graphite

Monochromatic Ink Wash

Monochrome Slate