Back to palettes

Palette

Ink Wash

A serene grayscale, inspired by the nuanced depths of traditional ink wash paintings.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F0F#2A2A2A#454545#6F6F6F#A0A0A0

Palette guide

How to use Ink Wash

Overview

The Ink Wash palette offers a serene grayscale, inspired by the nuanced depths of traditional ink wash paintings. Featuring a smooth transition from the near-black #0F0F0F to the soft gray #A0A0A0, this collection is incredibly versatile and calming. It's perfect for designers and developers creating clean, minimalist, and sophisticated designs where subtlety and structure are key. Utilize these harmonious grays to build elegant user interfaces, professional branding, or any project that benefits from a timeless, understated aesthetic, ensuring clear hierarchy and visual peace.

Best used for

  • Minimalist portfolios and personal websites
  • High-end product showcases and e-commerce
  • Editorial layouts and digital publishing
  • Meditation and mindfulness applications
  • Architectural visualizations and firm branding
  • Professional services websites and corporate identity

Suggested color roles

primary

#0F0F0F serves as a deep, anchoring color for strong headers, dark mode backgrounds, or primary UI elements, providing gravitas.

secondary

#2A2A2A is ideal for main content text, darker elements on lighter backgrounds, or supporting components, adding depth.

accent

#6F6F6F works well for subtle interactive elements, dividers, or soft shadows, providing gentle visual cues.

background

#A0A0A0 offers a light, neutral base for content, ensuring good readability and a clean, open feel.

text

#0F0F0F provides dark, highly readable text on lighter backgrounds like #A0A0A0, ensuring optimal clarity and elegance.

Accessibility notes

  • Ensure #0F0F0F or #2A2A2A text on #A0A0A0 provides excellent contrast for readability (WCAG AA).
  • Avoid using #6F6F6F for body text on #A0A0A0 due to low contrast, hindering readability.
  • For elements on #0F0F0F, use #A0A0A0 or pure white for optimal readability and contrast.
  • Verify WCAG AA compliance for all text and background pairings, especially for smaller text sizes.

Recommended combinations

Grayscale UI

Light base, mid-tone content, and deep text/elements for a clean, hierarchical user interface.

#A0A0A0 · #2A2A2A · #0F0F0F

Depth & Texture

Create layered grays for subtle depth, material simulation, or sophisticated background textures.

#0F0F0F · #454545 · #6F6F6F

Clean Read

High contrast for main content, using #A0A0A0 as background, #0F0F0F for primary text, and #2A2A2A for secondary.

#A0A0A0 · #0F0F0F · #2A2A2A

CSS variables

:root {
  --ink-wash-1: #0F0F0F;
  --ink-wash-2: #2A2A2A;
  --ink-wash-3: #454545;
  --ink-wash-4: #6F6F6F;
  --ink-wash-5: #A0A0A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ink-wash": {
        1: "#0F0F0F",
        2: "#2A2A2A",
        3: "#454545",
        4: "#6F6F6F",
        5: "#A0A0A0",
      }
    }
  }
}

Related searches

grayscale design paletteminimalist ink washserene dark greyprofessional neutral colorssubtle monochrome

Palette colors

Hex values

Color 1#0F0F0F
·
Color 2#2A2A2A
·
Color 3#454545
·
Color 4#6F6F6F
·
Color 5#A0A0A0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
3.8:1AA18
7.3:1AAA
2
1.3:1Fail
1.5:1Fail
2.9:1Fail
5.5:1AA
3
2:1Fail
1.5:1Fail
1.9:1Fail
3.7:1AA18
4
3.8:1AA18
2.9:1Fail
1.9:1Fail
1.9:1Fail
5
7.3:1AAA
5.5:1AA
3.7:1AA18
1.9:1Fail

Similar palettes

More like Ink Wash

View all monochrome
Calm Stone Meditate
City Grayscale View
Ghostly Fog Hues
Midnight Tea Ceremony
Monastic Study Hues
Monochromatic Foggy City