Back to palettes

Palette

Morning Coastal Bluff

Cool, serene blues capturing the vast view from a coastal bluff bathed in morning light and mist.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Morning Coastal Bluff 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 Morning Coastal Bluff.

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

Data visualization

#B0C4DE#8FAECB#6E98B8#4D82A5#2D6C92

Palette guide

How to use Morning Coastal Bluff

Overview

The Morning Coastal Bluff palette offers a serene and profound journey through cool blues, reminiscent of a vast ocean vista at dawn. This collection, featuring hues like the soft mist of #B0C4DE, the tranquil sky of #8FAECB, and the deeper sea tones of #6E98B8, is perfect for evoking calm and professionalism. Designers will find its progressive depth from #4D82A5 to the anchoring #2D6C92 ideal for creating sophisticated gradients and layered interfaces. Developers can leverage these distinct shades for consistent branding across digital platforms, ensuring a cohesive and tranquil user experience that speaks to reliability and clarity. The palette's cohesive nature simplifies color management while providing ample visual interest.

Best used for

  • Corporate websites and branding for finance or tech
  • Wellness and meditation app interfaces
  • Coastal resort or travel agency marketing materials
  • Environmental or marine conservation non-profit design
  • Elegant packaging for high-end products
  • Digital dashboards requiring a calming, focused aesthetic

Suggested color roles

primary

#6E98B8 - A balanced, mid-tone blue, excellent for main navigation, buttons, and prominent headers, offering a sense of stability.

secondary

#8FAECB - A lighter, airy blue, perfect for subheadings, active states, or supporting graphical elements, maintaining a gentle flow.

accent

#2D6C92 - The deepest blue, ideal for critical call-to-action buttons, key data points, or subtle but impactful branding elements, providing strong contrast.

background

#B0C4DE - The lightest shade, providing a soft, expansive canvas for content, promoting readability and a serene overall feel.

text

#4D82A5 - A rich, legible blue suitable for body text on lighter backgrounds, or use a dark charcoal like #333333 for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast when using lighter blues like #B0C4DE for text on white or similar light backgrounds.
  • Pair #2D6C92 with #B0C4DE or #8FAECB for strong, accessible contrast in text and interactive elements.
  • Avoid using adjacent mid-tones like #8FAECB and #6E98B8 for small text or critical information without proper contrast checks.
  • Consider using a pure white (#FFFFFF) for text against #4D82A5 or #2D6C92 to meet WCAG AA large text requirements.

Recommended combinations

Deep Ocean

Strong, professional trio for headers, main content, and background in corporate reports or web applications.

#2D6C92 · #6E98B8 · #B0C4DE

Misty Horizon

Gentle gradient for hero sections, background patterns, or infographics, evoking calm and depth.

#B0C4DE · #8FAECB · #4D82A5

Bluff's Edge

Dynamic combination for interactive elements, data visualization, or highlighting key information on a lighter canvas.

#4D82A5 · #2D6C92 · #8FAECB

CSS variables

:root {
  --morning-coastal-bluff-1: #B0C4DE;
  --morning-coastal-bluff-2: #8FAECB;
  --morning-coastal-bluff-3: #6E98B8;
  --morning-coastal-bluff-4: #4D82A5;
  --morning-coastal-bluff-5: #2D6C92;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-coastal-bluff": {
        1: "#B0C4DE",
        2: "#8FAECB",
        3: "#6E98B8",
        4: "#4D82A5",
        5: "#2D6C92",
      }
    }
  }
}

Related searches

calm blue color schemeserene coastal paletteprofessional blue tonesocean inspired web designcool misty color codes

Palette colors

Hex values

Color 1#B0C4DE
·
Color 2#8FAECB
·
Color 3#6E98B8
·
Color 4#4D82A5
·
Color 5#2D6C92
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.3:1Fail
3.2:1AA18
2
1.3:1Fail
1.3:1Fail
1.8:1Fail
2.5:1Fail
3
1.7:1Fail
1.3:1Fail
1.4:1Fail
1.9:1Fail
4
2.3:1Fail
1.8:1Fail
1.4:1Fail
1.4:1Fail
5
3.2:1AA18
2.5:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Morning Coastal Bluff

View all cool
Aegean Coastline Calm
Aegean Horizon
Aegean Sea Serene
Azure Coastline Calm
Coastal Breeze Hues
Coastal Morning Fog