Palette

Calm Ocean Swell

Captures the gentle, rhythmic motion of calm ocean waves, transitioning from serene light blues to deeper aqua.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Calm Ocean Swell 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 Calm Ocean Swell.

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

Data visualization

#e6f7ff#b3e0ff#80ccff#4dadd7#1aa3ff

Palette guide

How to use Calm Ocean Swell

Overview

The Calm Ocean Swell palette captures the gentle, rhythmic motion of calm ocean waves, transitioning from serene light blues to deeper aqua. This refreshing collection features a very light, almost white blue, #e6f7ff, and progressively deeper blues: #b3e0ff, #80ccff, #4dadd7, culminating in a rich, vibrant aqua, #1aa3ff. Designers will find this palette excellent for creating fresh, peaceful, and invigorating visuals. Developers can leverage these colors to build clean and inviting user interfaces for brands focused on travel, wellness, eco-friendly products, or any application seeking a calm, vibrant, and natural aesthetic, evoking serenity and clarity.

Best used for

Ocean-themed travel and tourism
Eco-friendly product packaging
Spa and wellness retreat websites
Marine conservation initiatives
Clean beauty brands
Digital art with water themes

Suggested color roles

primary

Utilize #e6f7ff as a light, airy primary background, providing a refreshing and expansive canvas.

secondary

Apply #b3e0ff for supporting elements, offering a subtle variation of light blue that complements the primary.

accent

Introduce #1aa3ff as a vibrant, deep aqua accent for calls to action or key features, adding a lively pop.

background

Employ #e6f7ff for clean, light backgrounds, allowing other colors to truly pop.

text

Use #4dadd7 for main body text, ensuring strong readability, or #1aa3ff for headlines and important text for maximum impact against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast when pairing #4dadd7 or #1aa3ff text with #e6f7ff or #b3e0ff backgrounds for optimal readability.
Avoid using lighter blues like #b3e0ff or #80ccff for small text against similar light backgrounds due to low contrast.
For interactive elements, use #1aa3ff or #4dadd7 to ensure clear affordance and meet WCAG contrast guidelines.
Test color combinations across different screen types to verify visual clarity for all users.

Recommended combinations

Gentle Wave

Creates a soft, harmonious gradient of light blues, ideal for subtle backgrounds, headers, or layered effects.

#E6F7FF · #B3E0FF · #80CCFF

Deep Ocean

Offers a grounded and refreshing feel, combining deep aqua with a mid-tone blue and light blue for text or important elements.

#1AA3FF · #4DADD7 · #E6F7FF

Aqua Swell

Provides a vibrant yet calm feel, blending various shades of blue, suitable for content blocks or distinct sections.

#80CCFF · #4DADD7 · #B3E0FF

CSS variables

:root {
  --calm-ocean-swell-1: #e6f7ff;
  --calm-ocean-swell-2: #b3e0ff;
  --calm-ocean-swell-3: #80ccff;
  --calm-ocean-swell-4: #4dadd7;
  --calm-ocean-swell-5: #1aa3ff;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "calm-ocean-swell": {
        1: "#e6f7ff",
        2: "#b3e0ff",
        3: "#80ccff",
        4: "#4dadd7",
        5: "#1aa3ff",
      }
    }
  }
}

Hex values

Color 1#e6f7ff

Color 2#b3e0ff

Color 3#80ccff

Color 4#4dadd7

Color 5#1aa3ff

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

2.3:1Fail

2.5:1Fail

1.3:1Fail

1.8:1Fail

1.9:1Fail

1.6:1Fail

1.3:1Fail

1.5:1Fail

1.6:1Fail

2.3:1Fail

1.8:1Fail

1.5:1Fail

1.1:1Fail

2.5:1Fail

1.9:1Fail

1.6:1Fail

1.1:1Fail

Similar palettes

More like Calm Ocean Swell

Calm Ocean Swell

See it in context.

Ready when you are.

Built with Calm Ocean Swell.

How to use Calm Ocean Swell

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Gentle Wave

Deep Ocean

Aqua Swell

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Calm Ocean Swell