Back to palettes

Palette

Stormy Coast Lighthouse

Deep, moody greys and cool blues evoking the dramatic scenery of a lighthouse during a coastal storm.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Coast Lighthouse 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 Stormy Coast Lighthouse.

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

Data visualization

#3A4750#6E8B9E#A0BBD0#D2E0EB#EAEFF2

Palette guide

How to use Stormy Coast Lighthouse

Overview

The "Stormy Coast Lighthouse" palette is a deeply atmospheric collection that evokes the dramatic scenery of a lighthouse standing sentinel during a coastal storm. It features a stunning progression of deep, moody greys and cool blues, from the grounding #3A4750 to the almost luminous #EAEFF2. Mid-tones like #6E8B9E, #A0BBD0, and #D2E0EB provide smooth, misty transitions. Designers and developers can leverage this palette to create sophisticated, serene, yet powerful interfaces and branding. It's ideally suited for projects aiming to convey resilience, calm, or a connection to maritime heritage, ensuring a cohesive and impactful visual presence.

Best used for

  • Maritime museum websites
  • Nautical brand identity
  • Coastal real estate developments
  • Weather forecasting apps
  • Documentary film titles
  • Luxury travel agencies

Suggested color roles

primary

#3A4750 serves as a very strong, deep primary color, excellent for backgrounds, main headers, or foundational structural elements in a dark theme.

secondary

Use #6E8B9E for secondary sections, large content blocks, or navigation, offering a slightly lighter, cool grey-blue depth.

accent

#A0BBD0 provides a soft yet distinct cool blue accent, perfect for highlights, interactive elements, or subtle calls to action.

background

#EAEFF2 offers a clean, bright, near-white background, providing excellent contrast for darker text and an expansive feel.

text

For light backgrounds, #3A4750 or #6E8B9E ensures strong readability. For dark backgrounds, #EAEFF2 or #D2E0EB provides clear, contrasting text.

Accessibility notes

  • Ensure #3A4750 text on #EAEFF2 background meets WCAG AAA contrast.
  • #D2E0EB on #EAEFF2 may not be sufficient for small text; use for large headings or accents.
  • For interactive elements, ensure sufficient contrast, e.g., #6E8B9E buttons on #EAEFF2.
  • Text in #EAEFF2 on #3A4750 background offers excellent readability.

Recommended combinations

Lighthouse Beacon

Ideal for a strong dark background, bright text, and a distinct cool blue accent for key information.

#3A4750 · #EAEFF2 · #A0BBD0

Misty Coast

Perfect for creating subtle, atmospheric gradients or layered UI elements, reminiscent of a misty coastal scene.

#6E8B9E · #A0BBD0 · #D2E0EB

Nautical Depth

Use #EAEFF2 as a clean background, #3A4750 for strong text, and #6E8B9E for secondary elements or borders.

#EAEFF2 · #3A4750 · #6E8B9E

CSS variables

:root {
  --stormy-coast-lighthouse-1: #3A4750;
  --stormy-coast-lighthouse-2: #6E8B9E;
  --stormy-coast-lighthouse-3: #A0BBD0;
  --stormy-coast-lighthouse-4: #D2E0EB;
  --stormy-coast-lighthouse-5: #EAEFF2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-coast-lighthouse": {
        1: "#3A4750",
        2: "#6E8B9E",
        3: "#A0BBD0",
        4: "#D2E0EB",
        5: "#EAEFF2",
      }
    }
  }
}

Related searches

maritime grey blue palettelighthouse color schemecool coastal storm colorsmoody ocean grey designnautical calm palette

Palette colors

Hex values

Color 1#3A4750
·
Color 2#6E8B9E
·
Color 3#A0BBD0
·
Color 4#D2E0EB
·
Color 5#EAEFF2
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.7:1Fail
4.8:1AA
7.1:1AAA
8.3:1AAA
2
2.7:1Fail
1.8:1Fail
2.7:1Fail
3.1:1AA18
3
4.8:1AA
1.8:1Fail
1.5:1Fail
1.7:1Fail
4
7.1:1AAA
2.7:1Fail
1.5:1Fail
1.2:1Fail
5
8.3:1AAA
3.1:1AA18
1.7:1Fail
1.2:1Fail

Similar palettes

More like Stormy Coast Lighthouse

View all cool
Stormy Coast Blues
City Twilight Gloom
Coastal Tempest Gloom
Oceanic Storm Surge
Shoreline Lantern Glow
Stormy Coast Drift