Palette

Seafoam Serenity Shore

Gentle, calming blues and whites inspired by the peaceful interplay of seafoam and ocean waves.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seafoam Serenity Shore 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 Seafoam Serenity Shore.

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

Data visualization

#F0FFFF#ADD8E6#87CEFA#4682B4#6A5ACD

Palette guide

How to use Seafoam Serenity Shore

Overview

The Seafoam Serenity Shore palette offers a gentle, calming array of blues and whites, inspired by the peaceful interplay of seafoam and ocean waves. With hues ranging from the pure #F0FFFF to the deep #4682B4, and including the unique #6A5ACD, this scheme instills tranquility and stability. Designers can utilize this palette to convey professionalism, trust, and a soothing user experience. Developers will find the clear distinctions between colors useful for establishing a strong visual hierarchy while maintaining an overall calm aesthetic. This palette is ideal for brands that aim to project peace, clarity, and a connection to the serene aspects of the marine environment.

Best used for

Coastal resorts and tourism websites
Mindfulness and meditation applications
Marine conservation and environmental sites
Travel agencies specializing in beach destinations
Clean tech companies and software interfaces
Educational platforms focusing on calm learning environments

Suggested color roles

primary

Use #4682B4 as a strong yet calming anchor for main headings, navigation, or key brand elements, conveying stability.

secondary

Apply #87CEFA for supporting visual elements, subheadings, or background accents, adding a light touch.

accent

Employ #6A5ACD for unique highlights, calls to action, or decorative elements, providing a sophisticated touch.

background

Utilize #F0FFFF as a pure white, expansive background, providing a clean and airy base for content.

text

For optimal readability, use #4682B4 or a deep charcoal on light backgrounds like #F0FFFF.

Accessibility notes

The contrast of #4682B4 on #F0FFFF is excellent for all text sizes.
Use #6A5ACD for body text on #F0FFFF, as it offers good readability.
Avoid using #ADD8E6 for small text on #F0FFFF due to insufficient contrast.
Ensure #87CEFA is used for larger text or decorative elements on #F0FFFF to maintain readability.

Recommended combinations

Serene Horizon

Creates a clean, tranquil look with a white background, deep blue text, and a sophisticated lavender accent.

#F0FFFF · #4682B4 · #6A5ACD

Ocean Waves

Ideal for creating a smooth gradient effect in headers or sections, mimicking the varying depths of ocean water.

#ADD8E6 · #87CEFA · #4682B4

Tranquil Accents

Uses a clean base with a unique accent and a supporting light blue, perfect for subtle yet impactful design.

#F0FFFF · #6A5ACD · #87CEFA

CSS variables

:root {
  --seafoam-serenity-shore-1: #F0FFFF;
  --seafoam-serenity-shore-2: #ADD8E6;
  --seafoam-serenity-shore-3: #87CEFA;
  --seafoam-serenity-shore-4: #4682B4;
  --seafoam-serenity-shore-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seafoam-serenity-shore": {
        1: "#F0FFFF",
        2: "#ADD8E6",
        3: "#87CEFA",
        4: "#4682B4",
        5: "#6A5ACD",
      }
    }
  }
}

Hex values

Color 1#F0FFFF

Color 2#ADD8E6

Color 3#87CEFA

Color 4#4682B4

Color 5#6A5ACD

Accessibility

Contrast checker

1.5:1Fail

1.7:1Fail

4:1AA18

5.2:1AA

1.5:1Fail

1.1:1Fail

2.7:1Fail

3.5:1AA18

1.7:1Fail

1.1:1Fail

2.4:1Fail

3.1:1AA18

4:1AA18

2.7:1Fail

2.4:1Fail

1.3:1Fail

5.2:1AA

3.5:1AA18

3.1:1AA18

1.3:1Fail

Similar palettes

More like Seafoam Serenity Shore

Coastal Seaglass Gems

Coastal Serenity Shores

Gentle Tide Pool