Palette

Indigo Shore Swell

Evoking the tranquil depths and gentle crests of ocean waves under a twilight sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Indigo Shore 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 Indigo Shore Swell.

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

Data visualization

#1C2B3A#3A4E63#6C8CA3#9EBCD4#D0DDEF

Palette guide

How to use Indigo Shore Swell

Overview

The Indigo Shore Swell palette captures the tranquil depths and gentle crests of ocean waves under a twilight sky, offering a serene and cohesive blue gradient. From the deep #1C2B3A to the airy #D0DDEF, with versatile mid-tones like #6C8CA3 and #9EBCD4, this palette is perfect for creating calm, inviting digital spaces. Its range of cool blues and near-whites provides designers and developers with a foundation for soothing user interfaces, educational content, or branding that evokes peace and clarity. The subtle transitions between #3A4E63 and #9EBCD4 make it ideal for fluid designs.

Best used for

Wellness and meditation applications
Coastal and marine-themed branding
Educational platforms and e-learning
Serene digital experiences and interfaces
Travel blogs focusing on ocean destinations
Environmental and conservation organization websites

Suggested color roles

primary

Designate #1C2B3A as the core color for important headings, navigation bars, or as a grounding base, providing depth and stability.

secondary

Employ #3A4E63 for secondary information, subheadings, or subtle background elements to create visual layering and support.

accent

Use #9EBCD4 for interactive elements, call-to-action buttons, or highlights to draw attention with a refreshing and clear tone.

background

Apply #D0DDEF as a light, airy background color, offering a clean and spacious canvas that enhances readability.

text

For optimal readability on lighter backgrounds, use #1C2B3A or a deep charcoal color for body text and primary content.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter shades like #9EBCD4 on the #D0DDEF background.
Always test the contrast ratio for interactive elements to guarantee they are easily discernible against their backgrounds.
Utilize darker colors such as #1C2B3A for essential body text to maximize readability across devices.
Avoid using #D0DDEF for small text against any of the lighter blues, as it may lack sufficient contrast.

Recommended combinations

Ocean Depths

Excellent for creating deep, layered backgrounds, data visualizations, or sections that require a sense of tranquility and depth.

#1C2B3A · #3A4E63 · #6C8CA3

Twilight Horizon

Ideal for a clean interface: #D0DDEF as the main background, #9EBCD4 for soft highlights, and #1C2B3A for strong text or headers.

#D0DDEF · #9EBCD4 · #1C2B3A

Calm Interface

Use #6C8CA3 for card backgrounds, #9EBCD4 for subtle interactive elements, and #3A4E63 for supporting text or borders.

#6C8CA3 · #9EBCD4 · #3A4E63

CSS variables

:root {
  --indigo-shore-swell-1: #1C2B3A;
  --indigo-shore-swell-2: #3A4E63;
  --indigo-shore-swell-3: #6C8CA3;
  --indigo-shore-swell-4: #9EBCD4;
  --indigo-shore-swell-5: #D0DDEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "indigo-shore-swell": {
        1: "#1C2B3A",
        2: "#3A4E63",
        3: "#6C8CA3",
        4: "#9EBCD4",
        5: "#D0DDEF",
      }
    }
  }
}

Hex values

Color 1#1C2B3A

Color 2#3A4E63

Color 3#6C8CA3

Color 4#9EBCD4

Color 5#D0DDEF

Accessibility

Contrast checker

1.7:1Fail

4.1:1AA18

7.3:1AAA

10.5:1AAA

1.7:1Fail

2.4:1Fail

4.3:1AA18

6.2:1AA

4.1:1AA18

2.4:1Fail

1.8:1Fail

2.6:1Fail

7.3:1AAA

4.3:1AA18

1.8:1Fail

1.4:1Fail

10.5:1AAA

6.2:1AA

2.6:1Fail

1.4:1Fail

Similar palettes

More like Indigo Shore Swell

View all cool

Aegean Coastline Calm