Back to palettes

Palette

Coastal Mist

Breezy and invigorating, capturing the light, refreshing shades of a clear ocean with gentle mist.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00BCD4#4DD0E1#80DEEA#B2EBF2#E0F7FA

Palette guide

How to use Coastal Mist

Overview

The Coastal Mist palette is a vibrant and refreshing collection of aquas and light blues, capturing the invigorating essence of a clear ocean with gentle mist. Ranging from the deep #00BCD4 to the ethereal #E0F7FA, with lively mid-tones like #4DD0E1, #80DEEA, and #B2EBF2. This palette is perfect for designs that aim for a clean, energetic, and soothing aesthetic. Developers will find these colors excellent for crafting dynamic user interfaces, health and wellness branding, and refreshing digital experiences that evoke clarity and vitality.

Best used for

  • Water sports and adventure brands
  • Health and wellness product marketing
  • Modern tech interfaces and dashboards
  • Summer-themed campaigns and promotions
  • Refreshing mobile application themes
  • Coastal and ocean-inspired websites

Suggested color roles

primary

Utilize #00BCD4 as a vibrant, prominent aqua for main sections, headers, or interactive elements that need to stand out.

secondary

Employ #4DD0E1 for secondary information, card backgrounds, or to introduce a slightly lighter, refreshing tone.

accent

Apply #80DEEA as a subtle accent for highlights, decorative elements, or to create gentle visual interest.

background

The lightest shade, #E0F7FA, is ideal for expansive backgrounds, offering a clean, airy, and invigorating canvas.

text

For optimal readability on lighter backgrounds, use #00BCD4 or a deep teal like #00798C to ensure clear text presentation.

Accessibility notes

  • Ensure #00BCD4 text has sufficient contrast against #E0F7FA or #B2EBF2 backgrounds.
  • Avoid using #B2EBF2 or #E0F7FA for small text on light backgrounds due to very low contrast.
  • Verify #4DD0E1 text contrast on #E0F7FA; it should be sufficient but always check WCAG.
  • Always test all text and interactive elements with a WCAG contrast checker for compliance.

Recommended combinations

Clear Water

Excellent for layered backgrounds or subtle gradients that transition smoothly from very light to slightly richer aqua.

#E0F7FA · #B2EBF2 · #80DEEA

Ocean Depth

Create a sense of depth and hierarchy in UI elements, moving from a vibrant primary to lighter, supporting tones.

#00BCD4 · #4DD0E1 · #B2EBF2

Refreshing Pop

Use a clean background with a vibrant primary color for emphasis, balanced by a lighter supporting shade.

#E0F7FA · #00BCD4 · #4DD0E1

CSS variables

:root {
  --coastal-mist-1: #00BCD4;
  --coastal-mist-2: #4DD0E1;
  --coastal-mist-3: #80DEEA;
  --coastal-mist-4: #B2EBF2;
  --coastal-mist-5: #E0F7FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-mist": {
        1: "#00BCD4",
        2: "#4DD0E1",
        3: "#80DEEA",
        4: "#B2EBF2",
        5: "#E0F7FA",
      }
    }
  }
}

Related searches

refreshing aqua paletteclear ocean bluevibrant coastal mistlight teal schemeinvigorating summer colors

Palette colors

Hex values

Color 1#00BCD4
·
Color 2#4DD0E1
·
Color 3#80DEEA
·
Color 4#B2EBF2
·
Color 5#E0F7FA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.8:1Fail
2.1:1Fail
2
1.2:1Fail
1.2:1Fail
1.4:1Fail
1.7:1Fail
3
1.5:1Fail
1.2:1Fail
1.2:1Fail
1.4:1Fail
4
1.8:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
2.1:1Fail
1.7:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Coastal Mist

View all cool
Azure Coast Dream
Pacific Haze Calm
Aegean Coast Whisper
Aqua Marine Vista
Arctic Sky Whisper
Arctic Sky Whisper