Back to palettes

Palette

Cerulean Coastline Calm

Refreshing blues and aquas, like clear coastal waters meeting the gentle sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cerulean Coastline Calm 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 Cerulean Coastline Calm.

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

Data visualization

#008B8B#48D1CC#AFEEEE#B0E0E6#87CEEB

Palette guide

How to use Cerulean Coastline Calm

Overview

The "Cerulean Coastline Calm" palette offers refreshing blues and aquas, like clear coastal waters meeting the gentle sky. It features the deep, grounding #008B8B and the vibrant #48D1CC, creating a crisp and inviting atmosphere. The palette lightens through the airy #AFEEEE and #B0E0E6, culminating in the bright #87CEEB. This collection is ideal for designers seeking to evoke tranquility, natural beauty, or refreshing themes. Developers can apply these hues to create inviting user interfaces for travel, wellness, or eco-conscious brands, ensuring a smooth and captivating visual experience that promotes calm and clarity.

Best used for

  • Coastal resort branding
  • Spa and relaxation apps
  • Eco-friendly product packaging
  • Summer lifestyle blogs
  • Marine research platforms
  • Clean, modern UI design

Suggested color roles

primary

#48D1CC - A vibrant turquoise, ideal for main headings, navigation bars, or key interactive elements, conveying freshness.

secondary

#008B8B - A deep teal, excellent for subheadings, footers, or secondary content blocks, providing stability and depth.

accent

#AFEEEE - A very light turquoise, perfect for subtle highlights, call-to-action buttons, or delicate decorative accents.

background

#B0E0E6 - A light powder blue, serving as a clean, airy, and expansive canvas for content.

text

#008B8B - A deep teal, providing excellent contrast and readability for text on lighter backgrounds like #B0E0E6.

Accessibility notes

  • Ensure #008B8B text on #B0E0E6 or #AFEEEE backgrounds meets WCAG contrast standards.
  • Avoid using #AFEEEE or #B0E0E6 for small text against similarly light backgrounds due to low contrast.
  • The darkest colors, #008B8B and #48D1CC, provide good contrast for white or very light text.
  • For body text, prefer #008B8B against the lightest colors for optimal readability.

Recommended combinations

Coastal Depths

Creates a strong coastal feel, with the deepest teal grounding the design and lightest blue for clear areas.

#008B8B · #48D1CC · #B0E0E6

Aqua Breeze

Ideal for soft, airy designs, using the vibrant turquoise for accents or important information.

#AFEEEE · #B0E0E6 · #48D1CC

Serene Shore

Excellent for backgrounds or large sections where a gentle, clear blue gradient is desired.

#87CEEB · #AFEEEE · #008B8B

CSS variables

:root {
  --cerulean-coastline-calm-1: #008B8B;
  --cerulean-coastline-calm-2: #48D1CC;
  --cerulean-coastline-calm-3: #AFEEEE;
  --cerulean-coastline-calm-4: #B0E0E6;
  --cerulean-coastline-calm-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cerulean-coastline-calm": {
        1: "#008B8B",
        2: "#48D1CC",
        3: "#AFEEEE",
        4: "#B0E0E6",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

cerulean aqua color palettecalm coastline colorsrefreshing blue greenwater themed web designserene teal blue scheme

Palette colors

Hex values

Color 1#008B8B
·
Color 2#48D1CC
·
Color 3#AFEEEE
·
Color 4#B0E0E6
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.2:1AA18
2.9:1Fail
2.4:1Fail
2
2.2:1Fail
1.4:1Fail
1.3:1Fail
1.1:1Fail
3
3.2:1AA18
1.4:1Fail
1.1:1Fail
1.4:1Fail
4
2.9:1Fail
1.3:1Fail
1.1:1Fail
1.2:1Fail
5
2.4:1Fail
1.1:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Cerulean Coastline Calm

View all cool
Aegean Coast Whisper
Aquatic Moss Garden
Azure Lagoon Dream
Calm Ocean Swell
Cerulean Coast Dream
Cerulean Shoreline Whisper