Back to palettes

Palette

Cerulean Coast Dream

Reflects the tranquil beauty of a clear sky meeting calm coastal waters at dawn.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cerulean Coast 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 Cerulean Coast Dream.

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

Data visualization

#0077B6#00B4D8#90E0EF#CAF0F8#FDFEFF

Palette guide

How to use Cerulean Coast Dream

Overview

The "Cerulean Coast Dream" palette reflects the tranquil beauty of a clear sky meeting calm coastal waters at dawn. It flows from the deep #0077B6 through the vibrant #00B4D8 and the bright #90E0EF. The palette lightens to the ethereal #CAF0F8, culminating in the almost pure white of #FDFEFF, reminiscent of a pristine beach. This collection is ideal for designers seeking to evoke serenity, 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 travel agency websites
  • Spa and relaxation apps
  • Eco-friendly product branding
  • Summer lifestyle blogs
  • Marine research platforms
  • Clean, modern UI design

Suggested color roles

primary

#00B4D8 - A vibrant cerulean, ideal for main headings, navigation bars, or key interactive elements, conveying freshness.

secondary

#0077B6 - A deeper blue, excellent for subheadings, footers, or secondary content blocks, providing stability.

accent

#90E0EF - A bright, light blue, perfect for subtle highlights, call-to-action buttons, or delicate decorative accents.

background

#FDFEFF - A very light, almost pure white, serving as a clean, expansive, and refreshing canvas for content.

text

#0077B6 - A deep blue, providing excellent contrast and readability for text on lighter backgrounds like #FDFEFF.

Accessibility notes

  • Ensure #0077B6 text on #FDFEFF background meets WCAG contrast standards for optimal readability.
  • Avoid using #CAF0F8 or #FDFEFF for small text against similarly light backgrounds due to low contrast.
  • The darkest colors, #0077B6 and #00B4D8, provide good contrast for white or very light text.
  • For body text, prefer #0077B6 against the lightest colors for optimal readability.

Recommended combinations

Ocean Horizon

Creates a strong coastal feel, with the darkest blue grounding the design and lightest for a clear sky.

#0077B6 · #00B4D8 · #FDFEFF

Sky & Sea

Ideal for soft, airy designs, using the deeper blue for accents or important information.

#90E0EF · #CAF0F8 · #00B4D8

Beach Calm

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

#FDFEFF · #CAF0F8 · #0077B6

CSS variables

:root {
  --cerulean-coast-dream-1: #0077B6;
  --cerulean-coast-dream-2: #00B4D8;
  --cerulean-coast-dream-3: #90E0EF;
  --cerulean-coast-dream-4: #CAF0F8;
  --cerulean-coast-dream-5: #FDFEFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cerulean-coast-dream": {
        1: "#0077B6",
        2: "#00B4D8",
        3: "#90E0EF",
        4: "#CAF0F8",
        5: "#FDFEFF",
      }
    }
  }
}

Related searches

cerulean blue color palettecoastal dream colorslight ocean themerefreshing web designserene blue white scheme

Palette colors

Hex values

Color 1#0077B6
·
Color 2#00B4D8
·
Color 3#90E0EF
·
Color 4#CAF0F8
·
Color 5#FDFEFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.3:1AA18
4:1AA18
4.8:1AA
2
2:1Fail
1.7:1Fail
2:1Fail
2.4:1Fail
3
3.3:1AA18
1.7:1Fail
1.2:1Fail
1.5:1Fail
4
4:1AA18
2:1Fail
1.2:1Fail
1.2:1Fail
5
4.8:1AA
2.4:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Cerulean Coast Dream

View all cool
Aegean Coast Whisper
Aqua Marine Vista
Azure Lagoon Dream
Azure Tide Pool
Calm Ocean Swell
Cerulean Coastline Calm