Palette

Coastal Cerulean Hues

A refreshing gradient from deep sea to clear sky, feeling like a crisp coastal breeze over cerulean waters.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Cerulean Hues 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 Coastal Cerulean Hues.

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

Data visualization

#191970#4169E1#6495ED#87CEFA#B0E0E6

Palette guide

How to use Coastal Cerulean Hues

Overview

The Coastal Cerulean Hues palette is a refreshing gradient from deep sea to clear sky, feeling like a crisp coastal breeze over cerulean waters. This cool and expansive collection ranges from the profound #191970 (Midnight Blue) to the airy #B0E0E6 (Light Blue), evoking calm, depth, and clarity. Designers can leverage these hex codes for sophisticated branding, invigorating digital experiences, or clean print materials. Developers will find these harmonious tones excellent for building user interfaces that feel professional, trustworthy, and inviting, with #4169E1 (Royal Blue) providing a strong primary and #6495ED (Cornflower Blue) a versatile mid-tone.

Best used for

marine research organizations
luxury yachting brands
tech and software interfaces
environmental conservation groups
corporate identity (blue focus)
academic institutions

Suggested color roles

primary

#4169E1 - A strong, vibrant royal blue, excellent for main headings, primary navigation, or prominent brand elements.

secondary

#6495ED - A balanced cornflower blue, perfect for subheadings, background panels, or supportive graphics.

accent

#191970 - The deepest, most intense midnight blue, ideal for strong accents, important links, or focal points that require ultimate contrast.

background

#B0E0E6 - The lightest blue, providing a clean, fresh, and expansive canvas.

text

#191970 - This deep midnight blue offers excellent readability for body text against the lighter backgrounds like #B0E0E6 or #87CEFA.

Accessibility notes

Text in #191970 or #4169E1 on backgrounds like #B0E0E6 or #87CEFA should meet WCAG AAA contrast standards.
Ensure interactive elements have clear visual feedback, especially when using mid-tone blues.
Avoid using #87CEFA for small text on #B0E0E6 due to potential low contrast.
Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Deep Sea Gradient

For creating smooth background gradients or layered card designs, evoking depth and calm.

#B0E0E6 · #87CEFA · #6495ED

Cerulean Contrast

Ideal for professional layouts, using the deeper blues for headlines and lighter tones for content.

#191970 · #4169E1 · #B0E0E6

Sky & Ocean

For content blocks or subtle dividers, maintaining a refreshing and harmonious visual flow with strong blues.

#6495ED · #87CEFA · #4169E1

CSS variables

:root {
  --coastal-cerulean-hues-1: #191970;
  --coastal-cerulean-hues-2: #4169E1;
  --coastal-cerulean-hues-3: #6495ED;
  --coastal-cerulean-hues-4: #87CEFA;
  --coastal-cerulean-hues-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-cerulean-hues": {
        1: "#191970",
        2: "#4169E1",
        3: "#6495ED",
        4: "#87CEFA",
        5: "#B0E0E6",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#4169E1

Color 3#6495ED

Color 4#87CEFA

Color 5#B0E0E6

Accessibility

Contrast checker

3.1:1AA18

5:1AA

8.7:1AAA

10.4:1AAA

3.1:1AA18

1.6:1Fail

2.8:1Fail

3.4:1AA18

5:1AA

1.6:1Fail

1.7:1Fail

2.1:1Fail

8.7:1AAA

2.8:1Fail

1.7:1Fail

1.2:1Fail

10.4:1AAA

3.4:1AA18

2.1:1Fail

1.2:1Fail

Similar palettes

More like Coastal Cerulean Hues

View all cool

Azure Coastline Calm

Azure Horizon Dream

Cerulean Shore Breeze

Abyssal Blue Descent

Abyssal Current Glide

Aegean Coast Whisper