Palette

Coastal Mist Horizon

Soft, muted blues and greens that capture the hazy tranquility of a coastal horizon veiled in mist.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Mist Horizon 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 Mist Horizon.

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

Data visualization

#5F8F9A#8FBFCB#BEE0E6#DAF3F5#4A7A85

Palette guide

How to use Coastal Mist Horizon

Overview

The Coastal Mist Horizon palette offers a captivating collection of cool blues and greens, perfectly capturing the hazy tranquility of a misty coastal horizon. With shades ranging from the airy #DAF3F5 to the deep blue-green of #4A7A85, and including the refreshing #BEE0E6, #8FBFCB, and #5F8F9A. This palette is ideal for designs that aim for a serene, sophisticated, and natural aesthetic. Developers will find these colors excellent for crafting environmental branding, calm user interfaces, and immersive digital experiences that evoke peace and the expansive beauty of the sea.

Best used for

Environmental and nature conservation websites
Spa and wellness branding
Serene mobile application themes
Travel and eco-tourism marketing
Sophisticated editorial layouts
Ocean-inspired digital art

Suggested color roles

primary

Utilize #8FBFCB as a prominent, refreshing blue-green for main sections, headers, or interactive elements.

secondary

Employ #5F8F9A for secondary information, card backgrounds, or to introduce a deeper, more grounding blue-green.

accent

Apply #4A7A85 sparingly for strong calls-to-action, important icons, or as a deep footer/header color to provide clear emphasis.

background

The lightest shade, #DAF3F5, is ideal for expansive backgrounds, offering a clean, airy, and ethereal canvas.

text

For optimal readability on lighter backgrounds, use #4A7A85 or a dark blue-green like #3A5F68 to ensure clear text presentation.

Accessibility notes

Ensure #4A7A85 text has sufficient contrast against #DAF3F5 or #BEE0E6 backgrounds.
Avoid using #BEE0E6 or #8FBFCB for small text on #DAF3F5, as contrast may be too low for readability.
Always test all text and interactive elements with a WCAG contrast checker for compliance.
This palette's lighter shades require careful contrast checks, especially for body text.

Recommended combinations

Misty Layers

Excellent for layered content blocks or a soft background with complementary light blue-green mid-tones.

#DAF3F5 · #BEE0E6 · #8FBFCB

Deep Horizon

Create a sense of depth and hierarchy in UI elements, moving from a mid-tone to a deeper, grounding shade.

#5F8F9A · #4A7A85 · #8FBFCB

Gentle Fade

Use a light background with a strong, grounding text color, balanced by a refreshing blue-green accent.

#DAF3F5 · #8FBFCB · #5F8F9A

CSS variables

:root {
  --coastal-mist-horizon-1: #5F8F9A;
  --coastal-mist-horizon-2: #8FBFCB;
  --coastal-mist-horizon-3: #BEE0E6;
  --coastal-mist-horizon-4: #DAF3F5;
  --coastal-mist-horizon-5: #4A7A85;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-mist-horizon": {
        1: "#5F8F9A",
        2: "#8FBFCB",
        3: "#BEE0E6",
        4: "#DAF3F5",
        5: "#4A7A85",
      }
    }
  }
}

Hex values

Color 1#5F8F9A

Color 2#8FBFCB

Color 3#BEE0E6

Color 4#DAF3F5

Color 5#4A7A85

Accessibility

Contrast checker

1.8:1Fail

2.5:1Fail

3.1:1AA18

1.3:1Fail

1.8:1Fail

1.4:1Fail

1.7:1Fail

2.4:1Fail

2.5:1Fail

1.4:1Fail

1.2:1Fail

3.4:1AA18

3.1:1AA18

1.7:1Fail

1.2:1Fail

4.1:1AA18

1.3:1Fail

2.4:1Fail

3.4:1AA18

4.1:1AA18

Similar palettes

More like Coastal Mist Horizon

View all cool

Coastal Breeze Mist

Ocean Spray Whispers

Weathered Beach Stone

Aegean Isle Horizon

Alpine Mist

Arctic Lake Glass