Palette

Zen Ink Wash

The serene simplicity of a traditional ink wash painting, in gentle, graduated shades of grey and off-white.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DCDCDC#C0C0C0#808080#A9A9A9#F5F5F5

Palette guide

How to use Zen Ink Wash

Overview

The Zen Ink Wash palette captures the serene simplicity of traditional ink wash paintings, offering a gentle, graduated range of greys and off-whites. This minimalist collection, featuring #F5F5F5, #DCDCDC, #C0C0C0, #A9A9A9, and #808080, is perfect for designs that require a contemplative, artistic, and calming aesthetic. Developers and designers can leverage these subtle tonal shifts to create sophisticated user interfaces, elegant editorial layouts, or refined branding that evokes a sense of quiet artistry and understated beauty. The palette's cohesive nature allows for seamless transitions and an immersive experience, ideal for conveying depth without relying on vibrant hues.

Best used for

Art gallery and museum website design
Minimalist product landing pages
Editorial and magazine layouts
Photography portfolios and visual content
Architectural firm branding
Contemplative digital experiences

Suggested color roles

primary

Use #808080 for main content areas, prominent headings, or primary UI elements, providing a clear anchor in the soft gradient.

secondary

Apply #A9A9A9 for supporting text, subtle borders, or secondary navigation, offering a gentle contrast.

accent

Utilize #DCDCDC for delicate highlights, hover states, or subtle background textures, adding an ethereal touch.

background

Employ #F5F5F5 as a clean, soft off-white canvas, allowing other elements to float gracefully within the space.

text

For primary body text on light backgrounds, a dark charcoal or black is recommended. For headings on #808080, use #DCDCDC or #F5F5F5.

Accessibility notes

Ensure #808080 text on #F5F5F5 background meets WCAG AA/AAA contrast for body text readability.
Colors like #A9A9A9 or #C0C0C0 will likely fail contrast for small text on #F5F5F5; use for larger titles or decorative elements.
When using #808080 as a background, ensure text (e.g., #DCDCDC or #F5F5F5) provides sufficient contrast.
Avoid using #DCDCDC or #C0C0C0 for essential information against #F5F5F5 as readability will be poor.

Recommended combinations

Soft Gradient Base

Creates a subtle, airy background for clean content presentation, evoking depth through gentle tonal shifts.

#F5F5F5 · #DCDCDC · #C0C0C0

Ink Depth & Read

Useful for layering elements, with #DCDCDC as text on #808080 for a sophisticated, high-contrast look.

#808080 · #A9A9A9 · #DCDCDC

Minimal Text Pair

Pair #808080 as primary text on #F5F5F5, with #A9A9A9 for secondary information, maintaining a clean aesthetic.

#F5F5F5 · #808080 · #A9A9A9

CSS variables

:root {
  --zen-ink-wash-1: #DCDCDC;
  --zen-ink-wash-2: #C0C0C0;
  --zen-ink-wash-3: #808080;
  --zen-ink-wash-4: #A9A9A9;
  --zen-ink-wash-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-ink-wash": {
        1: "#DCDCDC",
        2: "#C0C0C0",
        3: "#808080",
        4: "#A9A9A9",
        5: "#F5F5F5",
      }
    }
  }
}

Hex values

Color 1#DCDCDC

Color 2#C0C0C0

Color 3#808080

Color 4#A9A9A9

Color 5#F5F5F5

Accessibility

Contrast checker

1.3:1Fail

2.9:1Fail

1.7:1Fail

1.3:1Fail

2.2:1Fail

1.3:1Fail

1.7:1Fail

2.9:1Fail

2.2:1Fail

1.7:1Fail

3.6:1AA18

1.7:1Fail

1.3:1Fail

1.7:1Fail

2.2:1Fail

1.3:1Fail

1.7:1Fail

3.6:1AA18

2.2:1Fail

Similar palettes

More like Zen Ink Wash

Zen Ink Wash

See it in context.

Ready when you are.

Built with Zen Ink Wash.

How to use Zen Ink Wash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Gradient Base

Ink Depth & Read

Minimal Text Pair

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Zen Ink Wash