Palette

Sunlit Coastal Blues

Bright, clear blues reminiscent of a sparkling ocean and cloudless sky on a sun-drenched coast.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunlit Coastal Blues 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 Sunlit Coastal Blues.

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

Data visualization

#B0E0E6#87CEEB#6495ED#4169E1#1E90FF

Palette guide

How to use Sunlit Coastal Blues

Overview

The Sunlit Coastal Blues palette captures the bright, clear essence of a sparkling ocean and cloudless sky on a sun-drenched coast. It features a very light aqua (#B0E0E6), a vibrant sky blue (#87CEEB), and a classic cornflower blue (#6495ED). Deeper, more intense blues (#4169E1) and (#1E90FF) provide dynamic energy and depth, reminiscent of the open sea. This palette is ideal for designs that aim to convey freshness, vitality, and the joyous tranquility of a sunny beach day, perfect for summer or youthful themes.

Best used for

Beach and summer-themed marketing
Children's brands and educational materials
Refreshing digital interfaces and apps
Travel and tourism promotions (tropical destinations)
Aquatic sports and leisure branding
Clean, modern web design

Suggested color roles

primary

Utilize #1E90FF (Vibrant Blue) for high-impact elements, calls to action, or sections requiring energetic focus.

secondary

Apply #6495ED (Cornflower Blue) for main content blocks, headers, or backgrounds, providing a classic, stable mid-blue.

accent

Incorporate #87CEEB (Sky Blue) for bright highlights, subtle details, or to simulate clear, open space.

background

Employ #B0E0E6 (Light Aqua) as a light, expansive background, creating an airy and refreshing canvas for other elements.

text

Choose #4169E1 (Royal Blue) for all body text, ensuring excellent readability and a cohesive, vibrant feel against lighter backgrounds, or use a deep black.

Accessibility notes

Ensure #4169E1 provides excellent contrast for text on #B0E0E6, #87CEEB, and #6495ED backgrounds.
Avoid using #87CEEB for small body text; reserve it for larger headings or subtle graphic elements.
When pairing #1E90FF with #4169E1, ensure sufficient contrast for text, especially in smaller sizes.
Always test contrast ratios for text and interactive elements to meet accessibility standards.

Recommended combinations

Clear Sky

Ideal for creating a light, airy gradient, mimicking a clear sky transitioning to shallow waters.

#B0E0E6 · #87CEEB · #6495ED

Deep Ocean

Excellent for designs needing vibrant depth and energy, representing the open, dynamic sea.

#4169E1 · #1E90FF · #6495ED

Coastal Horizon

Use for layouts with a bright, expansive base, strong vibrant accents, and refreshing highlights.

#B0E0E6 · #1E90FF · #87CEEB

CSS variables

:root {
  --sunlit-coastal-blues-1: #B0E0E6;
  --sunlit-coastal-blues-2: #87CEEB;
  --sunlit-coastal-blues-3: #6495ED;
  --sunlit-coastal-blues-4: #4169E1;
  --sunlit-coastal-blues-5: #1E90FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunlit-coastal-blues": {
        1: "#B0E0E6",
        2: "#87CEEB",
        3: "#6495ED",
        4: "#4169E1",
        5: "#1E90FF",
      }
    }
  }
}

Hex values

Color 1#B0E0E6

Color 2#87CEEB

Color 3#6495ED

Color 4#4169E1

Color 5#1E90FF

Accessibility

Contrast checker

1.2:1Fail

2.1:1Fail

3.4:1AA18

2.3:1Fail

1.2:1Fail

1.7:1Fail

2.8:1Fail

1.9:1Fail

2.1:1Fail

1.7:1Fail

1.6:1Fail

1.1:1Fail

3.4:1AA18

2.8:1Fail

1.6:1Fail

1.5:1Fail

2.3:1Fail

1.9:1Fail

1.1:1Fail

1.5:1Fail

Similar palettes

More like Sunlit Coastal Blues

View all cool

Coastal Breeze

Seafoam Serenity Shore

Aegean Coast Serenity

Azure Coast Dream

Azure Horizon

Azure Horizon Dream