Back to palettes

Palette

Ink Wash Serenity

Subtle, tranquil greys with hints of blue, like a delicate ink wash painting on paper.

monochromecalm5 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

#3A4750#576F72#83A1A6#CEDAE0#2B353A

Palette guide

How to use Ink Wash Serenity

Overview

The Ink Wash Serenity palette (version 2) offers subtle, tranquil greys with delicate hints of blue, reminiscent of a delicate ink wash painting. This collection features a calming range from the deep teal-gray #2B353A to the light, airy blue-gray #CEDAE0, with harmonious mid-tones like #576F72. It's perfect for designers and developers creating peaceful, sophisticated, and understated elegance. Utilize these muted tones to build serene user interfaces, luxurious branding, or any project that seeks a calm yet refined aesthetic, ensuring a harmonious and inviting visual experience.

Best used for

  • Spa and wellness branding and websites
  • Minimalist web and mobile app designs
  • Art gallery and museum interfaces
  • Interior design and home decor visuals
  • Serene meditation or mindfulness apps
  • Luxury stationery and editorial design

Suggested color roles

primary

#2B353A serves as a deep, grounding color for headers, navigation, or strong foundational elements, providing stability.

secondary

#3A4750 is ideal for main content blocks, darker text on lighter backgrounds, or supporting UI components, adding depth.

accent

#83A1A6 provides subtle highlights, interactive elements, or delicate borders in a calm and sophisticated UI.

background

#CEDAE0 offers a light, airy base for content, ensuring excellent readability and a fresh, open feel.

text

#2B353A provides dark, highly readable text on light backgrounds like #CEDAE0, ensuring optimal clarity and elegance.

Accessibility notes

  • Ensure #2B353A or #3A4750 text on #CEDAE0 provides excellent contrast (WCAG AA).
  • Avoid using #576F72 or #83A1A6 for body text on #CEDAE0 due to potential low contrast.
  • Use a contrast checker to verify all text and background color pairings meet accessibility standards.
  • For elements against #2B353A, use #CEDAE0 or #83A1A6 for good visibility and contrast.

Recommended combinations

Serene Base

Light background, mid-tone content, and deep text/accents for a calm and structured UI.

#CEDAE0 · #3A4750 · #2B353A

Muted Blue Depth

Deep anchor with harmonious blue-gray layers for backgrounds or subtle graphic elements.

#2B353A · #576F72 · #83A1A6

Calm Contrast

Clean background with strong, readable primary elements and a supportive secondary color.

#CEDAE0 · #2B353A · #576F72

CSS variables

:root {
  --ink-wash-serenity-2-1: #3A4750;
  --ink-wash-serenity-2-2: #576F72;
  --ink-wash-serenity-2-3: #83A1A6;
  --ink-wash-serenity-2-4: #CEDAE0;
  --ink-wash-serenity-2-5: #2B353A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ink-wash-serenity-2": {
        1: "#3A4750",
        2: "#576F72",
        3: "#83A1A6",
        4: "#CEDAE0",
        5: "#2B353A",
      }
    }
  }
}

Related searches

serene blue grey paletteink wash colorstranquil design palettesubtle minimalist colorscalm branding colors

Palette colors

Hex values

Color 1#3A4750
·
Color 2#576F72
·
Color 3#83A1A6
·
Color 4#CEDAE0
·
Color 5#2B353A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.5:1AA18
6.7:1AA
1.3:1Fail
2
1.8:1Fail
1.9:1Fail
3.8:1AA18
2.3:1Fail
3
3.5:1AA18
1.9:1Fail
1.9:1Fail
4.6:1AA
4
6.7:1AA
3.8:1AA18
1.9:1Fail
8.8:1AAA
5
1.3:1Fail
2.3:1Fail
4.6:1AA
8.8:1AAA

Similar palettes

More like Ink Wash Serenity

View all monochrome
Misty Lagoon
Morning Fog
Soft Greige Cloud
Ancient Forest Myst
Azure Depths Gradient
Azure Ripple Effect