Palette

Classic Greyscale Frame

A stark and sophisticated palette, embodying the enduring elegance of classic black and white photography, timeless and crisp.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Classic Greyscale Frame 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 Classic Greyscale Frame.

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

Data visualization

#000000#FFFFFF#333333#666666#CCCCCC

Palette guide

How to use Classic Greyscale Frame

Overview

The "Classic Greyscale Frame" palette embodies the timeless elegance and crisp sophistication of black and white photography. Ranging from absolute black #000000 to pure white #FFFFFF, this palette provides a complete gradient of neutral grays. Intermediate shades like #333333, #666666, and #CCCCCC offer smooth transitions, making it ideal for creating clean, professional, and minimalist designs. Designers and developers can leverage this palette for high-end interfaces, corporate branding, or any project requiring a precise, modern, and understated elegance that conveys clarity, sophistication, and a classic appeal.

Best used for

Minimalist website design
Luxury brand identity
Photography portfolios
High-end product showcases
Monochrome app interfaces
Editorial layouts for art magazines

Suggested color roles

primary

#000000 - The ultimate black, ideal for strong headers, foundational elements, or dramatic backgrounds.

secondary

#333333 - A dark charcoal, perfect for secondary content, deep text, or subtle background textures.

accent

#666666 - A versatile medium gray, suitable for borders, subtle highlights, or inactive states.

background

#FFFFFF - A pure, bright white, providing a clean, expansive, and airy canvas for content.

text

#000000 - For primary body text on light backgrounds, or a crisp white for headers on dark elements.

Accessibility notes

Ensure sufficient contrast when using mid-to-light grays (e.g., #CCCCCC on #FFFFFF) for text; best for accents or decorative elements.
Darker grays like #333333 or #666666 on white provide excellent contrast for body text, ensuring readability.
Always aim for WCAG AA or AAA contrast ratios for text, especially with this monochrome palette where visual differentiation relies heavily on luminance contrast.
Utilize clear visual cues beyond color, such as underlines for links or bolding for emphasis, particularly with lighter gray text.

Recommended combinations

High Contrast

Ideal for stark, modern interfaces, providing maximum readability and visual impact.

#000000 · #FFFFFF · #333333

Subtle Depth

Excellent for soft backgrounds, hover states, or to add slight dimensionality to elements without harsh contrast.

#FFFFFF · #CCCCCC · #666666

Grayscale Gradient

Use for layered UI components, subtle visual hierarchy, or atmospheric background effects.

#333333 · #666666 · #CCCCCC

CSS variables

:root {
  --classic-greyscale-frame-1: #000000;
  --classic-greyscale-frame-2: #FFFFFF;
  --classic-greyscale-frame-3: #333333;
  --classic-greyscale-frame-4: #666666;
  --classic-greyscale-frame-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "classic-greyscale-frame": {
        1: "#000000",
        2: "#FFFFFF",
        3: "#333333",
        4: "#666666",
        5: "#CCCCCC",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#FFFFFF

Color 3#333333

Color 4#666666

Color 5#CCCCCC

Accessibility

Contrast checker

21:1AAA

1.7:1Fail

3.7:1AA18

13.1:1AAA

21:1AAA

12.6:1AAA

5.7:1AA

1.6:1Fail

1.7:1Fail

12.6:1AAA

2.2:1Fail

7.9:1AAA

3.7:1AA18

5.7:1AA

2.2:1Fail

3.6:1AA18

13.1:1AAA

1.6:1Fail

7.9:1AAA

3.6:1AA18

Similar palettes

More like Classic Greyscale Frame