Palette

Ceramic Ocean Wash

Soft, aquatic blues and whites resembling the gentle wash of waves over ceramic shards.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0F2F7#B9DCE6#8EC5D1#6AAEC2#4D96B0

Palette guide

How to use Ceramic Ocean Wash

Overview

The "Ceramic Ocean Wash" palette captures soft, aquatic blues and whites, resembling the gentle wash of waves over ceramic shards. It begins with the airy #E0F2F7 and transitions through the serene #B9DCE6 and #8EC5D1. The palette deepens with the inviting #6AAEC2, culminating in the more profound #4D96B0. This collection is ideal for designers seeking to evoke tranquility, coastal themes, or refreshing natural beauty. Developers can apply these hues to create inviting user interfaces for travel, wellness, or eco-conscious brands, offering a smooth and captivating visual experience that promotes calm and clarity.

Best used for

Coastal resort branding
Marine conservation websites
Spa and relaxation apps
Summer fashion e-commerce
Water-themed product packaging
Minimalist home decor

Suggested color roles

primary

#6AAEC2 - A medium, clear blue, ideal for main headings, navigation bars, or foundational UI elements, conveying freshness.

secondary

#8EC5D1 - A lighter, serene blue, excellent for subheadings, active states, or secondary content blocks, adding softness.

accent

#E0F2F7 - A very light, almost white aqua, perfect for subtle highlights, background textures, or delicate accents.

background

#E0F2F7 - A very light, airy blue, serving as a clean, expansive, and refreshing canvas for content.

text

#4D96B0 - A deep, muted blue, providing excellent contrast and readability for text on lighter backgrounds like #E0F2F7.

Accessibility notes

Ensure #4D96B0 text on #E0F2F7 or #B9DCE6 backgrounds meets WCAG contrast standards.
Avoid using #E0F2F7 or #B9DCE6 for small text against similarly light backgrounds due to low contrast.
The darkest color, #4D96B0, provides good contrast for white or very light text.
For critical information, prefer #4D96B0 against the lightest colors for optimal readability.

Recommended combinations

Wave Wash

Creates a gentle, flowing gradient, ideal for serene backgrounds or header sections.

#E0F2F7 · #B9DCE6 · #6AAEC2

Ocean Depths

Excellent for showcasing depth, with the darkest blue grounding the design and lightest for highlights.

#4D96B0 · #6AAEC2 · #E0F2F7

Ceramic Shard

Ideal for layered card designs or feature blocks, maintaining a cohesive cool-toned aesthetic.

#8EC5D1 · #B9DCE6 · #4D96B0

CSS variables

:root {
  --ceramic-ocean-wash-1: #E0F2F7;
  --ceramic-ocean-wash-2: #B9DCE6;
  --ceramic-ocean-wash-3: #8EC5D1;
  --ceramic-ocean-wash-4: #6AAEC2;
  --ceramic-ocean-wash-5: #4D96B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ceramic-ocean-wash": {
        1: "#E0F2F7",
        2: "#B9DCE6",
        3: "#8EC5D1",
        4: "#6AAEC2",
        5: "#4D96B0",
      }
    }
  }
}

Hex values

Color 1#E0F2F7

Color 2#B9DCE6

Color 3#8EC5D1

Color 4#6AAEC2

Color 5#4D96B0

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

2.2:1Fail

2.9:1Fail

1.3:1Fail

1.7:1Fail

2.3:1Fail

1.6:1Fail

1.3:1Fail

1.8:1Fail

2.2:1Fail

1.7:1Fail

1.3:1Fail

2.9:1Fail

2.3:1Fail

1.8:1Fail

1.3:1Fail

Similar palettes

More like Ceramic Ocean Wash

Ceramic Ocean Wash

See it in context.

Ready when you are.

Built with Ceramic Ocean Wash.

How to use Ceramic Ocean Wash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Wave Wash

Ocean Depths

Ceramic Shard

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Ceramic Ocean Wash