Back to palettes

Palette

Monochrome Ink Wash

A classic study in grayscale, offering a range of tones from deep black to soft off-white.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#3A3A3A#6A6A6A#A0A0A0#E0E0E0

Palette guide

How to use Monochrome Ink Wash

Overview

The Monochrome Ink Wash palette presents a classic study in grayscale, offering a comprehensive range of tones from the deep black of #1A1A1A to the soft off-white of #E0E0E0. This collection also includes versatile mid-tones like #3A3A3A, #6A6A6A, and #A0A0A0, providing exceptional contrast and depth for any design. It's a go-to choice for designers and developers aiming for a sophisticated, high-impact aesthetic that feels both timeless and modern. The stark yet elegant nature of these colors makes them highly effective for creating visually striking and readable interfaces.

Best used for

  • Modern minimalist branding
  • Editorial and print design
  • Dark mode user interfaces
  • Art and photography portfolios
  • High-contrast web layouts
  • Architectural visualizations

Suggested color roles

primary

Designate #3A3A3A as the primary color for robust sections, main headings, or prominent interactive elements.

secondary

Use #6A6A6A for secondary content, sub-sections, or supporting graphical elements, providing a softer contrast.

accent

Apply #1A1A1A as a powerful accent for calls-to-action, critical text, or deep shadow effects, ensuring strong emphasis.

background

Utilize #E0E0E0 as a clean, bright background, offering a soft off-white canvas that enhances content visibility.

text

Opt for #1A1A1A for all body text on lighter backgrounds to achieve optimal readability and a crisp, professional look.

Accessibility notes

  • Ensure #1A1A1A text on #E0E0E0 backgrounds meets WCAG AAA contrast ratios for maximum accessibility.
  • Be cautious when using #A0A0A0 for small text on #E0E0E0, as contrast might be insufficient for some users.
  • Provide clear visual focus indicators using #1A1A1A or #3A3A3A for interactive elements.
  • Consider using a combination of color and icon/text to convey information, especially for status messages.

Recommended combinations

Classic Contrast

Excellent for primary content, ensuring high readability with a light background, dark text, and a mid-tone for emphasis.

#E0E0E0 · #1A1A1A · #6A6A6A

Subtle Depth

Creates a sophisticated, layered effect, perfect for cards, panels, or sections requiring depth without stark contrast.

#A0A0A0 · #3A3A3A · #1A1A1A

Dark Mode Base

Forms a strong dark background with light text and a mid-tone for secondary elements, ideal for dark themes.

#1A1A1A · #E0E0E0 · #6A6A6A

CSS variables

:root {
  --monochrome-ink-wash-1: #1A1A1A;
  --monochrome-ink-wash-2: #3A3A3A;
  --monochrome-ink-wash-3: #6A6A6A;
  --monochrome-ink-wash-4: #A0A0A0;
  --monochrome-ink-wash-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-ink-wash": {
        1: "#1A1A1A",
        2: "#3A3A3A",
        3: "#6A6A6A",
        4: "#A0A0A0",
        5: "#E0E0E0",
      }
    }
  }
}

Related searches

classic grayscale paletteblack and white designdark mode colorsminimalist ink washhigh contrast monochrome

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#3A3A3A
·
Color 3#6A6A6A
·
Color 4#A0A0A0
·
Color 5#E0E0E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3.2:1AA18
6.7:1AA
13.2:1AAA
2
1.5:1Fail
2.1:1Fail
4.3:1AA18
8.6:1AAA
3
3.2:1AA18
2.1:1Fail
2.1:1Fail
4.1:1AA18
4
6.7:1AA
4.3:1AA18
2.1:1Fail
2:1Fail
5
13.2:1AAA
8.6:1AAA
4.1:1AA18
2:1Fail

Similar palettes

More like Monochrome Ink Wash

View all monochrome