Palette

Minimalist Ink Wash

A serene and subtle monochromatic journey through deep blues, reminiscent of a delicate ink wash painting.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D9E4EC#AABCCA#7A90A2#4D6478#2A3C4A

Palette guide

How to use Minimalist Ink Wash

Overview

The Minimalist Ink Wash palette offers a serene and subtle monochromatic journey through deep blues, reminiscent of a delicate ink wash painting. It flows from the airy #D9E4EC to the soft #AABCCA, deepening through the versatile #7A90A2 and the rich #4D6478, culminating in the profound #2A3C4A. This collection provides designers and developers with a harmonious, calming, and sophisticated set of tones perfect for conveying tranquility and depth in digital and print media.

Best used for

Wellness and meditation app interfaces
Tranquil website designs for spas or retreats
Educational platforms and corporate reports
Environmental or nature-focused branding
Serene digital art and illustration projects
Marine or aquatic-themed design

Suggested color roles

primary

Use #7A90A2 as a versatile mid-tone for main content containers, large text, or secondary backgrounds.

secondary

Apply #4D6478 for section headers, active states, or to add more significant visual weight.

accent

Employ #AABCCA as a light, soft highlight for subtle interactive elements or delicate graphic details.

background

Utilize #D9E4EC as the primary background color to establish a calm, expansive, and clean base.

text

Choose #2A3C4A for all body text and primary headings to ensure excellent readability and a rich, deep contrast.

Accessibility notes

Ensure #2A3C4A text on #D9E4EC background meets WCAG AA contrast standards for readability.
Avoid using #AABCCA or #D9E4EC for small body text; reserve them for larger headings or decorative elements.
For interactive elements, ensure hover and focus states provide clear visual changes, possibly using #4D6478.
Test color combinations for users with color vision deficiencies, especially for nuanced blue tones.

Recommended combinations

Calm Foundation

Ideal for creating soft, layered backgrounds and subtle transitions between content sections.

#D9E4EC · #AABCCA · #7A90A2

Content Hierarchy

Excellent for main text, headings, and strong informational blocks, ensuring clear readability.

#D9E4EC · #2A3C4A · #4D6478

Interactive Depth

Suitable for buttons, selected states, and navigation elements that require distinct yet harmonious tones.

#AABCCA · #7A90A2 · #4D6478

CSS variables

:root {
  --minimalist-ink-wash-1: #D9E4EC;
  --minimalist-ink-wash-2: #AABCCA;
  --minimalist-ink-wash-3: #7A90A2;
  --minimalist-ink-wash-4: #4D6478;
  --minimalist-ink-wash-5: #2A3C4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "minimalist-ink-wash": {
        1: "#D9E4EC",
        2: "#AABCCA",
        3: "#7A90A2",
        4: "#4D6478",
        5: "#2A3C4A",
      }
    }
  }
}

Hex values

Color 1#D9E4EC

Color 2#AABCCA

Color 3#7A90A2

Color 4#4D6478

Color 5#2A3C4A

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

4.8:1AA

8.8:1AAA

1.5:1Fail

1.7:1Fail

3.2:1AA18

5.8:1AA

2.6:1Fail

1.7:1Fail

1.9:1Fail

3.4:1AA18

4.8:1AA

3.2:1AA18

1.9:1Fail

1.8:1Fail

8.8:1AAA

5.8:1AA

3.4:1AA18

1.8:1Fail

Similar palettes

More like Minimalist Ink Wash