Palette

Seaside Dusk Dream

Captures the serene moment when the sun dips below the horizon, painting the coastal sky in soft blues and aquas.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#add8e6#87ceeb#5f9ea0#4682b4#1e90ff

Palette guide

How to use Seaside Dusk Dream

Overview

The "Seaside Dusk Dream" palette beautifully captures the serene moment of twilight on a coastal sky, featuring a gradient of soft blues and aquas. From the light #add8e6 to the deep #1e90ff, including serene shades like #5f9ea0 and #4682b4, this palette evokes calm, depth, and tranquility. It's ideal for designers aiming to create a soothing, natural, and sophisticated aquatic atmosphere, reminiscent of ocean horizons at dusk. This collection is highly versatile for both digital and print media, providing a sense of peaceful elegance.

Best used for

Coastal travel agency branding
Marine conservation initiatives
Spa and wellness brands and websites
Serene app interfaces and themes
Tranquil interior design schemes
Ocean-themed digital art

Suggested color roles

primary

Use #add8e6 for an expansive, light background, evoking an open, twilight sky.

secondary

Apply #87ceeb for content blocks, headers, or subtle navigation elements.

accent

Utilize #1e90ff for strong calls to action, important links, or vibrant highlights, representing deep ocean.

background

Employ #add8e6, establishing a calming, airy, and expansive foundational canvas.

text

For primary body text, use #4682b4 or #1e90ff, ensuring strong readability on lighter backgrounds.

Accessibility notes

Use #1e90ff or #4682b4 for text on #add8e6 and #87ceeb for good contrast.
Be cautious with #5f9ea0 for text on lighter backgrounds; check contrast ratios carefully for accessibility.
Ensure interactive elements are clearly distinguishable, especially on varied blue backgrounds.
Avoid using light text on darker blues like #4682b4 or #1e90ff unless it's pure white for maximum contrast.

Recommended combinations

Sky Gradient

Ideal for smooth transitions in web backgrounds, hero sections, and visual storytelling.

#ADD8E6 · #87CEEB · #5F9EA0

Deep Ocean

Combine for strong branding, contrasting text on light, and impactful visual elements.

#4682B4 · #1E90FF · #ADD8E6

Tranquil Layers

Effective for layered UI components, adding depth and sophisticated visual interest in digital interfaces.

#87CEEB · #5F9EA0 · #4682B4

CSS variables

:root {
  --seaside-dusk-dream-1: #add8e6;
  --seaside-dusk-dream-2: #87ceeb;
  --seaside-dusk-dream-3: #5f9ea0;
  --seaside-dusk-dream-4: #4682b4;
  --seaside-dusk-dream-5: #1e90ff;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-dusk-dream": {
        1: "#add8e6",
        2: "#87ceeb",
        3: "#5f9ea0",
        4: "#4682b4",
        5: "#1e90ff",
      }
    }
  }
}

Hex values

Color 1#add8e6

Color 2#87ceeb

Color 3#5f9ea0

Color 4#4682b4

Color 5#1e90ff

Accessibility

Contrast checker

1.1:1Fail

2:1Fail

2.7:1Fail

2.1:1Fail

1.1:1Fail

1.8:1Fail

2.4:1Fail

1.9:1Fail

2:1Fail

1.8:1Fail

1.3:1Fail

1.1:1Fail

2.7:1Fail

2.4:1Fail

1.3:1Fail

2.1:1Fail

1.9:1Fail

1.1:1Fail

1.3:1Fail

Similar palettes

More like Seaside Dusk Dream

Seaside Dusk Dream

See it in context.

Ready when you are.

Built with Seaside Dusk Dream.

How to use Seaside Dusk Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky Gradient

Deep Ocean

Tranquil Layers

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Seaside Dusk Dream