Back to palettes

Palette

Misty Coastal Inlet

Soft, muted blues and greys, reflecting the tranquil and hazy atmosphere of a coastal inlet.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Coastal Inlet 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 Misty Coastal Inlet.

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

Data visualization

#6A889A#9CAAB8#C7D4DF#4F6D7A#7E9DAF

Palette guide

How to use Misty Coastal Inlet

Overview

The Misty Coastal Inlet palette offers a harmonious blend of soft, muted blues and greys, perfectly capturing the tranquil and hazy atmosphere of a serene coastal inlet. With shades ranging from the light and airy #C7D4DF to the deeper, grounding #4F6D7A, this collection is ideal for designers and developers aiming to create calm, inviting, and sophisticated digital experiences. The subtle variations between #6A889A and #7E9DAF provide excellent flexibility for establishing visual hierarchy and adding depth without overwhelming the user. This palette is inherently calming and professional.

Best used for

  • Nautical-themed websites
  • Wellness and meditation apps
  • Home decor branding
  • Professional services marketing
  • Calm user interfaces
  • Travel and leisure brochures

Suggested color roles

primary

#4F6D7A - A deep, muted blue, perfect for main headings, important buttons, or brand identity elements.

secondary

#6A889A - A slightly lighter, yet still substantial blue-grey, suitable for sub-headings, secondary UI elements, or background panels.

accent

#7E9DAF - A mid-tone blue-grey that can be used for highlights, active states, or subtle graphic accents.

background

#C7D4DF - A very light, almost off-white blue-grey, providing a clean and serene canvas.

text

#4F6D7A - The darkest shade, offering excellent readability against lighter backgrounds like #C7D4DF.

Accessibility notes

  • Ensure #4F6D7A text on #C7D4DF background meets WCAG contrast requirements for body text.
  • Avoid using #C7D4DF for text on white or very light grey backgrounds due to poor visibility.
  • Use #4F6D7A or a similar dark shade for all essential text to maintain high contrast.
  • For interactive elements, ensure the default state (e.g., #6A889A) and hover state (e.g., #4F6D7A) are clearly distinguishable.

Recommended combinations

Serene Title

Primary heading text on a soft, light background for a calm introduction.

#4F6D7A · #C7D4DF · #6A889A

Subtle Button

A secondary button style with a gentle color shift for hover.

#6A889A · #7E9DAF · #9CAAB8

Layered UI

Creating subtle depth for cards or panels in a user interface.

#C7D4DF · #9CAAB8 · #4F6D7A

CSS variables

:root {
  --misty-coastal-inlet-1: #6A889A;
  --misty-coastal-inlet-2: #9CAAB8;
  --misty-coastal-inlet-3: #C7D4DF;
  --misty-coastal-inlet-4: #4F6D7A;
  --misty-coastal-inlet-5: #7E9DAF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-coastal-inlet": {
        1: "#6A889A",
        2: "#9CAAB8",
        3: "#C7D4DF",
        4: "#4F6D7A",
        5: "#7E9DAF",
      }
    }
  }
}

Related searches

misty blue grey palettetranquil coastal colorsserene water huesmuted ocean tonescalm inlet design

Palette colors

Hex values

Color 1#6A889A
·
Color 2#9CAAB8
·
Color 3#C7D4DF
·
Color 4#4F6D7A
·
Color 5#7E9DAF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
1.5:1Fail
1.3:1Fail
2
1.6:1Fail
1.6:1Fail
2.3:1Fail
1.2:1Fail
3
2.5:1Fail
1.6:1Fail
3.7:1AA18
1.9:1Fail
4
1.5:1Fail
2.3:1Fail
3.7:1AA18
1.9:1Fail
5
1.3:1Fail
1.2:1Fail
1.9:1Fail
1.9:1Fail

Similar palettes

More like Misty Coastal Inlet

View all Cool
Coastal Pebble Wash
Misty Mountain Peaks
Raindrop Serenity
Serene Waterfall Mist
Aegean Coastline Muse
Enchanted Riverbed