Palette

Dusky Harbor Twilight

The quiet introspection of a harbor as day turns to night, with softened lights and fading colors.

Darkdark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dusky Harbor Twilight 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 Dusky Harbor Twilight.

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

Data visualization

#0F2540#708090#FFA07A#B6A8D0#2F4F4F

Palette guide

How to use Dusky Harbor Twilight

Overview

The "Dusky Harbor Twilight" palette captures the quiet introspection of a harbor as day turns to night, with softened lights and fading colors. This moody and sophisticated collection features a very deep navy blue #0F2540, a cool slate gray #708090, a surprising bright coral #FFA07A, a muted lavender #B6A8D0, and a deep, dark slate gray #2F4F4F. It's ideal for designs seeking a dramatic, elegant, and contemplative aesthetic. Designers can utilize this palette for luxury branding, atmospheric digital interfaces, or sophisticated editorial layouts. Developers will find these hex codes excellent for creating immersive user experiences that convey mystery, depth, and a touch of unexpected warmth.

Best used for

Luxury brand websites or high-end product displays
Nightlife or sophisticated entertainment venue branding
Artistic photography or creative portfolio sites
Dark mode UI for professional applications
Nautical-themed luxury goods or services
Mystery novel covers or cinematic branding

Suggested color roles

primary

#0F2540 - A very deep navy blue, excellent for main backgrounds, headers, or to establish a dramatic, sophisticated base.

secondary

#708090 - A cool slate gray, perfect for subheadings, navigation elements, or subtle text on darker backgrounds.

accent

#FFA07A - A bright coral, ideal for calls-to-action, key interactive elements, or to provide a striking, warm contrast.

background

#0F2540 - The darkest navy, providing a deep, immersive canvas that allows lighter colors to glow.

text

#B6A8D0 (muted lavender) or pure white - A light, muted lavender offers elegant readability on dark backgrounds. Pure white can be used for stronger contrast.

Accessibility notes

For text on #0F2540 and #2F4F4F, use #B6A8D0, #FFA07A, or pure white for sufficient contrast.
#FFA07A provides excellent contrast on #0F2540 and #2F4F4F, making it suitable for important alerts or calls-to-action.
Avoid using #708090 for small text on #2F4F4F or #0F2540, as contrast may be insufficient.
Always verify contrast ratios for all text and interactive elements, especially with dark-mode palettes.

Recommended combinations

Twilight Drama

Creates a deep, moody background gradient or layered elements, evoking the quiet depth of night.

#0F2540 · #2F4F4F · #708090

Harbor Glow

Use the dark navy as a base with the vibrant coral for striking accents and lavender for elegant details.

#0F2540 · #FFA07A · #B6A8D0

Subtle Lights

Ideal for content blocks on a dark background, showcasing softer grays and a pop of warm color.

#708090 · #B6A8D0 · #FFA07A

CSS variables

:root {
  --dusky-harbor-twilight-1: #0F2540;
  --dusky-harbor-twilight-2: #708090;
  --dusky-harbor-twilight-3: #FFA07A;
  --dusky-harbor-twilight-4: #B6A8D0;
  --dusky-harbor-twilight-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusky-harbor-twilight": {
        1: "#0F2540",
        2: "#708090",
        3: "#FFA07A",
        4: "#B6A8D0",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#0F2540

Color 2#708090

Color 3#FFA07A

Color 4#B6A8D0

Color 5#2F4F4F

Accessibility

Contrast checker

3.8:1AA18

7.8:1AAA

7:1AA

1.7:1Fail

3.8:1AA18

2:1Fail

1.8:1Fail

2.2:1Fail

7.8:1AAA

2:1Fail

1.1:1Fail

4.5:1AA18

7:1AA

1.8:1Fail

1.1:1Fail

4:1AA18

1.7:1Fail

2.2:1Fail

4.5:1AA18

4:1AA18

Similar palettes

More like Dusky Harbor Twilight

View all Dark

Mystic Woods Shroud

Urban Rain Puddles

Abyssal Light Organism

Ancient Bronze Ritual

Arid Dusk Hues

Celestial Ocean Depth