Palette

Coastal Seafoam Dream

Cool blues and refreshing turquoises capture the calming essence of ocean waves and seafoam.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Seafoam Dream 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 Coastal Seafoam Dream.

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

Data visualization

#0F4C5C#2B7A8B#4BCDC6#8BF2ED#C7F5F2

Palette guide

How to use Coastal Seafoam Dream

Overview

The Coastal Seafoam Dream palette is a refreshing and vibrant collection of cool blues and turquoises, designed to capture the dynamic essence of ocean waves. Ranging from the deep, anchoring #0F4C5C to the serene #2B7A8B, and blossoming into the lively #4BCDC6, this palette truly embodies aquatic energy. The lighter #8BF2ED and crisp #C7F5F2 introduce the airy lightness of seafoam. Designers can leverage this palette to create energetic yet calming digital experiences and physical spaces, perfect for projects that aim to convey freshness, clarity, and the invigorating spirit of the sea.

Best used for

Marine and aquatic-themed branding
Travel agency websites (beach destinations)
Fitness and activewear brands
Modern web and app interfaces
Refreshing beverage packaging
Bathroom or spa interior design

Suggested color roles

primary

Use #2B7A8B as a dominant color for backgrounds or primary elements, offering a balanced blue-green.

secondary

Employ #4BCDC6 for secondary features, interactive elements, or striking visual contrasts.

accent

Introduce #8BF2ED for bright accents, hover states, or subtle gradients to add a luminous touch.

background

Opt for #C7F5F2 for clean, expansive backgrounds, or #8BF2ED for a lighter, more ethereal feel.

text

Utilize #0F4C5C for body text and headings for excellent readability, especially on lighter palette colors.

Accessibility notes

The dark #0F4C5C provides excellent contrast for text on all lighter colors in the palette.
Ensure sufficient contrast when using #8BF2ED or #C7F5F2 for text on any background.
Consider using #0F4C5C for all primary text to ensure maximum readability.
Avoid placing light text like #C7F5F2 on #8BF2ED backgrounds; use a darker option.

Recommended combinations

Deep Ocean

Create a sophisticated, deep-sea feel for headers, main content, and key interactive elements.

#0F4C5C · #2B7A8B · #4BCDC6

Seafoam Glow

Ideal for clean, modern interfaces with a very light background, bright accents, and strong dark text.

#C7F5F2 · #8BF2ED · #0F4C5C

Wave Crest

Excellent for vibrant call-to-actions, paired with a solid secondary color and a light, airy background.

#4BCDC6 · #2B7A8B · #C7F5F2

CSS variables

:root {
  --coastal-seafoam-dream-2-1: #0F4C5C;
  --coastal-seafoam-dream-2-2: #2B7A8B;
  --coastal-seafoam-dream-2-3: #4BCDC6;
  --coastal-seafoam-dream-2-4: #8BF2ED;
  --coastal-seafoam-dream-2-5: #C7F5F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-seafoam-dream-2": {
        1: "#0F4C5C",
        2: "#2B7A8B",
        3: "#4BCDC6",
        4: "#8BF2ED",
        5: "#C7F5F2",
      }
    }
  }
}

Hex values

Color 1#0F4C5C

Color 2#2B7A8B

Color 3#4BCDC6

Color 4#8BF2ED

Color 5#C7F5F2

Accessibility

Contrast checker

1.9:1Fail

4.9:1AA

7.3:1AAA

8:1AAA

1.9:1Fail

2.5:1Fail

3.8:1AA18

4.2:1AA18

4.9:1AA

2.5:1Fail

1.5:1Fail

1.6:1Fail

7.3:1AAA

3.8:1AA18

1.5:1Fail

1.1:1Fail

8:1AAA

4.2:1AA18

1.6:1Fail

1.1:1Fail

Similar palettes

More like Coastal Seafoam Dream