Palette

Monochrome Linearity

A stark and sophisticated progression of black, white, and grays, embodying minimalist precision.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochrome Linearity 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 Monochrome Linearity.

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 Monochrome Linearity

Overview

The Monochrome Linearity palette offers a stark and sophisticated progression of black, white, and grays, embodying minimalist precision. With pure black #000000, deep grey #333333, versatile #666666, lighter #999999, and soft #CCCCCC, this palette provides a clean, structured foundation for any design. It's an excellent choice for designers and developers seeking a modern, organized aesthetic where clarity and strong visual hierarchy are paramount. The precise tonal shifts allow for subtle layering and impactful contrast, making it highly effective for corporate, technical, and contemporary digital interfaces.

Best used for

Corporate branding and websites
Technical documentation design
Modern web and mobile interfaces
Architectural presentation layouts
Print media and editorial design
Data visualization and dashboards

Suggested color roles

primary

Utilize #333333 as a strong primary color for main content, headings, or core interactive elements, providing depth.

secondary

Apply #666666 for supporting text, subheadings, or secondary UI components, offering a balanced mid-tone.

accent

Employ #000000 for impactful accents, critical calls-to-action, or stark outlines, ensuring maximum emphasis.

background

Choose #CCCCCC as a light, clean background color, providing a neutral and spacious canvas for content.

text

Use #000000 for body text on lighter backgrounds to ensure crisp readability and a strong, professional appearance.

Accessibility notes

Ensure #000000 text on #CCCCCC backgrounds meets WCAG AA/AAA contrast standards for optimal readability.
Exercise caution when using #999999 for small text on #CCCCCC, as contrast may be insufficient for some users.
Provide clear visual cues and focus states for interactive elements, using #000000 or #333333.
Maintain consistent color usage for interactive vs. static elements to avoid user confusion.

Recommended combinations

Core Contrast

Excellent for main content areas, offering high contrast for readability with a light background and dark text/headings.

#CCCCCC · #000000 · #333333

Layered Depth

Creates a sophisticated, layered effect for panels, cards, or sections, adding visual interest without harshness.

#999999 · #666666 · #333333

Dark Element

Use for dark-themed components, such as footers or sidebars, with light text and a mid-tone for secondary info.

#333333 · #CCCCCC · #666666

CSS variables

:root {
  --monochrome-linearity-1: #000000;
  --monochrome-linearity-2: #333333;
  --monochrome-linearity-3: #666666;
  --monochrome-linearity-4: #999999;
  --monochrome-linearity-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-linearity": {
        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 Monochrome Linearity

View all monochrome

Abstract Grid Pattern

Industrial Concrete Chic