Back to palettes

Palette

Coastal Horizon Haze

Soft, muted blues and greys capturing the hazy, tranquil beauty of a distant coastline at dawn.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#93B5C6#C6DCE4#E8F0F2#B3CCCE#69808E

Palette guide

How to use Coastal Horizon Haze

Overview

The Coastal Horizon Haze palette captures the soft, muted essence of a distant coastline veiled in dawn's tranquility. This serene collection features gentle blue-greys like #E8F0F2 and #C6DCE4, blended with deeper, grounding tones such as #93B5C6 and #69808E, and a subtle hint of green in #B3CCCE. These colors are ideal for creating designs that exude calm, natural beauty, and understated sophistication. Developers will find them versatile for crafting harmonious user interfaces, eco-friendly branding, and peaceful digital experiences that reflect a quiet, expansive aesthetic.

Best used for

  • Nature photography websites
  • Eco-conscious brand identities
  • Wellness and mindfulness applications
  • Serene interior design concepts
  • Travel blogs and destination marketing
  • Soft and inviting editorial layouts

Suggested color roles

primary

Utilize #93B5C6 as a prominent, calming blue-grey for main sections, headers, or significant UI elements.

secondary

Employ #B3CCCE for secondary information, card backgrounds, or to introduce a subtle, fresh green-grey hue.

accent

Apply #69808E sparingly for strong text, important icons, or calls-to-action that require clear emphasis and depth.

background

The lightest shade, #E8F0F2, is ideal for expansive backgrounds, providing a clean, airy, and ethereal foundation.

text

For optimal readability, use #69808E on lighter backgrounds like #E8F0F2, or a deep charcoal like #333333 for stronger contrast.

Accessibility notes

  • Ensure #69808E text has sufficient contrast against #E8F0F2 or #C6DCE4 backgrounds.
  • Avoid using #B3CCCE or #C6DCE4 for small text on #E8F0F2, as contrast may be too low.
  • Always test all text and interactive elements with a WCAG contrast checker for compliance.
  • This palette features many light shades, so prioritize text readability and consider high-contrast options.

Recommended combinations

Horizon Blend

Create subtle, atmospheric gradients or layered background effects for a soft, expansive feel.

#E8F0F2 · #C6DCE4 · #93B5C6

Hazy Depth

Ideal for main content blocks, with a primary blue-green, a secondary blue-grey, and a grounding darker accent.

#B3CCCE · #93B5C6 · #69808E

Gentle Accent

Use for clear text on a clean background, with a mid-tone for supporting elements or subtle dividers.

#E8F0F2 · #69808E · #C6DCE4

CSS variables

:root {
  --coastal-horizon-haze-1: #93B5C6;
  --coastal-horizon-haze-2: #C6DCE4;
  --coastal-horizon-haze-3: #E8F0F2;
  --coastal-horizon-haze-4: #B3CCCE;
  --coastal-horizon-haze-5: #69808E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-horizon-haze": {
        1: "#93B5C6",
        2: "#C6DCE4",
        3: "#E8F0F2",
        4: "#B3CCCE",
        5: "#69808E",
      }
    }
  }
}

Related searches

horizon blue grey paletteserene coastal dawnmuted blue green schemetranquil light colorsgentle web design

Palette colors

Hex values

Color 1#93B5C6
·
Color 2#C6DCE4
·
Color 3#E8F0F2
·
Color 4#B3CCCE
·
Color 5#69808E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.9:1Fail
1.3:1Fail
1.9:1Fail
2
1.5:1Fail
1.2:1Fail
1.2:1Fail
2.9:1Fail
3
1.9:1Fail
1.2:1Fail
1.5:1Fail
3.6:1AA18
4
1.3:1Fail
1.2:1Fail
1.5:1Fail
2.5:1Fail
5
1.9:1Fail
2.9:1Fail
3.6:1AA18
2.5:1Fail

Similar palettes

More like Coastal Horizon Haze

View all cool
Sunlit Coastal Blues
Weathered Beach Stone
Aegean Coast Whisper
Alpine Mist
Azure Coast Serenity
Coastal Breeze Mist