Back to palettes

Palette

Seaside Retreat

A soothing blend of blues and aquas evoking the calm, refreshing ambiance of a coastal escape.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaside Retreat 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 Seaside Retreat.

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

Data visualization

#ADD8E6#87CEEB#5F9EA0#B0E0E6#E0FFFF

Palette guide

How to use Seaside Retreat

Overview

The Seaside Retreat palette is a refreshing collection of cool blues and aquas, perfectly capturing the calm and invigorating ambiance of a coastal escape. Ranging from the light, airy #E0FFFF (Light Cyan) to the deep, grounding #5F9EA0 (Cadet Blue), and featuring popular shades like #ADD8E6 (Light Blue), #B0E0E6 (Powder Blue), and #87CEEB (Sky Blue), this palette is inherently soothing. It's an excellent choice for designers and developers aiming to evoke tranquility, freshness, and a sense of natural beauty. Ideal for travel brands, wellness platforms, or any project seeking a clean, serene, and inviting aesthetic, it promises to deliver a refreshing visual experience.

Best used for

  • Travel and tourism websites
  • Spa and wellness brand identity
  • Coastal-themed home decor designs
  • Refreshing mobile application interfaces
  • Summer event marketing materials
  • Aquatic and nature-related content

Suggested color roles

primary

#ADD8E6 for large background areas or main content blocks, setting a serene tone.

secondary

#B0E0E6 for supporting UI elements, subtle gradients, or informational panels.

accent

#5F9EA0 to provide a deeper, grounding accent for calls-to-action, important icons, or navigation.

background

#E0FFFF as a pristine, airy canvas, enhancing the feeling of openness and lightness.

text

A deep navy or charcoal for body text, ensuring excellent readability against the lighter blues and cyan.

Accessibility notes

  • Ensure sufficient contrast for text, especially against the very light #E0FFFF and #B0E0E6 backgrounds.
  • Use #5F9EA0 for critical interactive elements like buttons to provide clear visual distinction.
  • Be cautious when pairing #ADD8E6 and #B0E0E6 for text and background without adequate contrast.
  • Verify all text and UI elements meet WCAG contrast guidelines, particularly for smaller font sizes.

Recommended combinations

Ocean Breeze

Perfect for hero sections and headers, creating a light, expansive, and inviting feel.

#E0FFFF · #ADD8E6 · #87CEEB

Deep Waters

Ideal for footer designs or section dividers, offering depth while maintaining a cool aesthetic.

#5F9EA0 · #B0E0E6 · #E0FFFF

Coastal UI

Use #E0FFFF as base, #ADD8E6 for cards, and #5F9EA0 for interactive buttons or key text.

#E0FFFF · #ADD8E6 · #5F9EA0

CSS variables

:root {
  --seaside-retreat-1: #ADD8E6;
  --seaside-retreat-2: #87CEEB;
  --seaside-retreat-3: #5F9EA0;
  --seaside-retreat-4: #B0E0E6;
  --seaside-retreat-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-retreat": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#5F9EA0",
        4: "#B0E0E6",
        5: "#E0FFFF",
      }
    }
  }
}

Related searches

calm blue paletteaqua coastal colorsrefreshing web designserene ocean hueslight blue color scheme

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#87CEEB
·
Color 3#5F9EA0
·
Color 4#B0E0E6
·
Color 5#E0FFFF
·

Accessibility

Contrast checker

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

Similar palettes

More like Seaside Retreat

View all cool
Coastal Seaglass Shimmer
Alpine Lake Serene
Azure Abyss Calm
Azure Coast Dream
Azure Lagoon Drift
Azure Reef Currents