Palette

Ink Wash Serenity

A sophisticated gradient of deep charcoals to soft grays, inspired by 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 Serenity 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 Serenity.

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

Data visualization

#1C1C1C#333333#666666#999999#CCCCCC

Palette guide

How to use Ink Wash Serenity

Overview

The Ink Wash Serenity palette presents a sophisticated gradient of deep charcoals to soft grays, inspired by traditional ink wash paintings. This versatile monochrome range, from the rich #1C1C1C to the gentle #CCCCCC, offers designers and developers an excellent foundation for creating minimalist, elegant, and timeless designs. It provides superb depth and contrast, making it ideal for user interfaces, artistic projects, or corporate branding that requires a clean and refined aesthetic. Utilize these shades to evoke a sense of calm sophistication and classic appeal.

Best used for

Luxury brand websites and interfaces
Minimalist photography portfolios
Corporate reports and presentations
Art studio branding and digital presence
Sophisticated mobile applications
Editorial and print design layouts

Suggested color roles

primary

#1C1C1C serves as a strong, elegant base for headers, dark mode backgrounds, or primary UI elements, providing gravitas.

secondary

#333333 is ideal for main content areas, darker text on lighter backgrounds, or supporting elements, adding depth.

accent

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

background

#CCCCCC offers a light, clean base for content, ensuring high readability and a fresh, open feel.

text

#1C1C1C provides dark, highly readable text on light backgrounds like #CCCCCC, ensuring optimal clarity and elegance.

Accessibility notes

Ensure #1C1C1C or #333333 text on #CCCCCC provides excellent contrast for readability (WCAG AA).
Avoid using #999999 or #666666 for body text on #CCCCCC due to low contrast, hindering readability.
For elements on #1C1C1C, use #CCCCCC or pure white for optimal readability and contrast.
Always check WCAG AA compliance for all text and background pairings, especially for smaller text.

Recommended combinations

Monochrome UI

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

#CCCCCC · #333333 · #1C1C1C

Gradient Depth

Create a smooth transition for backgrounds or layered elements, adding subtle depth.

#1C1C1C · #666666 · #999999

Clean Contrast

High contrast for readability, using #CCCCCC as background, #1C1C1C for primary text, and #333333 for secondary.

#CCCCCC · #1C1C1C · #333333

CSS variables

:root {
  --ink-wash-serenity-1: #1C1C1C;
  --ink-wash-serenity-2: #333333;
  --ink-wash-serenity-3: #666666;
  --ink-wash-serenity-4: #999999;
  --ink-wash-serenity-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ink-wash-serenity": {
        1: "#1C1C1C",
        2: "#333333",
        3: "#666666",
        4: "#999999",
        5: "#CCCCCC",
      }
    }
  }
}

Hex values

Color 1#1C1C1C

Color 2#333333

Color 3#666666

Color 4#999999

Color 5#CCCCCC

Accessibility

Contrast checker

1.3:1Fail

3:1Fail

6:1AA

10.6:1AAA

1.3:1Fail

2.2:1Fail

4.4:1AA18

7.9:1AAA

3:1Fail

2.2:1Fail

2:1Fail

3.6:1AA18

6:1AA

4.4:1AA18

2:1Fail

1.8:1Fail

10.6:1AAA

7.9:1AAA

3.6:1AA18

1.8:1Fail

Similar palettes

More like Ink Wash Serenity

Charcoal Sketch Palette

Frosty Serene

Granite Peak Twilight