Palette

Shoreline Lantern Glow

Deep blues and a solitary warm glow evoke the stark beauty of a lighthouse casting its beam across a moody evening sea.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shoreline Lantern Glow 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 Shoreline Lantern Glow.

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

Data visualization

#1E2D38#3E576B#6A8CA6#E7B152#293D4A

Palette guide

How to use Shoreline Lantern Glow

Overview

The Shoreline Lantern Glow palette conjures the atmospheric scene of a lone lantern against a moody coastal night. Dominated by deep, cool blues and greys—from the profound #1E2D38 and #293D4A to the more muted #3E576B and #6A8CA6—it is dramatically punctuated by a warm, inviting #E7B152, reminiscent of a beacon. This palette is perfect for designs that aim to be sophisticated, dramatic, and emotionally resonant, ideal for creating a sense of calm, mystery, or a focused point of warmth within a cool environment. It's excellent for dark mode interfaces or projects needing a strong narrative.

Best used for

Dark mode web and app interfaces
Coastal-themed luxury branding
Photography portfolios (especially night/moody shots)
Cinematic title sequences or game environments
Interior design for cozy, sophisticated spaces
Event branding for evening gatherings

Suggested color roles

primary

Use #1E2D38 for main backgrounds or strong structural elements, establishing a deep, sophisticated base.

secondary

Apply #3E576B or #293D4A for panels, subheadings, or secondary navigation, providing subtle variation.

accent

#E7B152 is the crucial accent, perfect for calls to action, important notifications, or key interactive elements to draw the eye.

background

#1E2D38 or #293D4A provide a deep, immersive background. #6A8CA6 can be used for lighter content blocks.

text

For body text, a clean white or very light grey (#6A8CA6 is too dark for most text on #1E2D38) is essential for contrast. #E7B152 can be used for highlights in text.

Accessibility notes

Ensure white or light grey text has sufficient contrast against #1E2D38, #3E576B, and #293D4A.
The accent color #E7B152 should be tested for contrast against all possible backgrounds if used for text.
Avoid using #6A8CA6 for small text on darker backgrounds; it's better suited for larger headings or graphic elements.
Provide clear focus states for interactive elements, possibly using #E7B152 for visual emphasis.

Recommended combinations

Beacon Night

Striking for hero sections, logos, or key calls to action, leveraging the warm accent.

#1E2D38 · #E7B152 · #6A8CA6

Deep Coastal

Excellent for building depth in dark mode UI, backgrounds, and content panels.

#293D4A · #3E576B · #6A8CA6

Lantern Glow

Perfect for interactive elements, highlights, or creating focal points.

#E7B152 · #1E2D38 · #3E576B

CSS variables

:root {
  --shoreline-lantern-glow-1: #1E2D38;
  --shoreline-lantern-glow-2: #3E576B;
  --shoreline-lantern-glow-3: #6A8CA6;
  --shoreline-lantern-glow-4: #E7B152;
  --shoreline-lantern-glow-5: #293D4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shoreline-lantern-glow": {
        1: "#1E2D38",
        2: "#3E576B",
        3: "#6A8CA6",
        4: "#E7B152",
        5: "#293D4A",
      }
    }
  }
}

Hex values

Color 1#1E2D38

Color 2#3E576B

Color 3#6A8CA6

Color 4#E7B152

Color 5#293D4A

Accessibility

Contrast checker

1.9:1Fail

4:1AA18

7.3:1AAA

1.3:1Fail

1.9:1Fail

2.1:1Fail

3.9:1AA18

1.5:1Fail

4:1AA18

2.1:1Fail

1.8:1Fail

3.2:1AA18

7.3:1AAA

3.9:1AA18

1.8:1Fail

5.8:1AA

1.3:1Fail

1.5:1Fail

3.2:1AA18

5.8:1AA

Similar palettes

More like Shoreline Lantern Glow

View all cool

Abyssal Current Glide

Bioluminescent Abyss

Coastal Tempest Gloom

Cobalt Abyss Depths

Cobalt Midnight Sky

Cosmic Dust Whisper