Palette

Arctic Shore Twilight

The dramatic, cold blues of an arctic coast at twilight, just before the full night descends.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Shore 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 Arctic Shore Twilight.

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

Data visualization

#191970#4682B4#87CEEB#B0E0E6#F0F8FF

Palette guide

How to use Arctic Shore Twilight

Overview

The Arctic Shore Twilight palette captures the dramatic, cold blues of an arctic coast at twilight, just before the full night descends. It spans from the profound, inky #191970, through the robust steel blue #4682B4 and classic sky blue #87CEEB. Lighter shades like #B0E0E6 and the almost-white #F0F8FF complete the spectrum, mimicking the last glimmers of light. This palette is perfect for designers and developers aiming to create sophisticated, moody, and atmospheric experiences. Its strong contrast range allows for dynamic visual hierarchy, making it suitable for compelling storytelling, elegant branding, and immersive digital environments.

Best used for

Luxury brand websites
Cinematic digital experiences
Night sky photography portfolios
High-end event invitations
Dark mode UI designs
Mysterious or ethereal themes

Suggested color roles

primary

The deep #191970 is ideal for foundational elements, navigation, and dominant text, providing a luxurious depth.

secondary

Use #4682B4 for subheadings, secondary calls-to-action, or important informational blocks, offering excellent readability.

accent

The vibrant #87CEEB can serve as a striking accent for interactive elements, highlights, or illustrative details against dark backgrounds.

background

Employ #191970 as a sophisticated dark background, creating an immersive and elegant atmosphere. Alternatively, #F0F8FF for a light mode.

text

For dark backgrounds, use #F0F8FF or #B0E0E6 for primary text. For light backgrounds (e.g., #F0F8FF), use #191970 or black.

Accessibility notes

Ensure high contrast between light text (#F0F8FF, #B0E0E6) and dark backgrounds (#191970, #4682B4) to meet WCAG AA standards.
Avoid using #B0E0E6 as text on #87CEEB, as their contrast might be insufficient for readability.
Verify that all interactive elements have clear visual indicators for focus and hover states, especially on dark backgrounds.
Consider using an even brighter white for critical calls-to-action against the deepest blues for maximum impact and readability.

Recommended combinations

Twilight Depths

Excellent for dramatic hero sections, with deep blues for background and light for prominent text/elements.

#191970 · #4682B4 · #F0F8FF

Shoreline Glow

Ideal for creating soft gradients, background textures, or celestial illustrations that evoke an ethereal light.

#87CEEB · #B0E0E6 · #F0F8FF

Midnight Contrast

Use for navigation elements or data visualization, creating clear distinctions within a dark aesthetic.

#4682B4 · #191970 · #87CEEB

CSS variables

:root {
  --arctic-shore-twilight-1: #191970;
  --arctic-shore-twilight-2: #4682B4;
  --arctic-shore-twilight-3: #87CEEB;
  --arctic-shore-twilight-4: #B0E0E6;
  --arctic-shore-twilight-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-shore-twilight": {
        1: "#191970",
        2: "#4682B4",
        3: "#87CEEB",
        4: "#B0E0E6",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#4682B4

Color 3#87CEEB

Color 4#B0E0E6

Color 5#F0F8FF

Accessibility

Contrast checker

3.6:1AA18

8.5:1AAA

10.4:1AAA

13.8:1AAA

3.6:1AA18

2.4:1Fail

2.9:1Fail

3.8:1AA18

8.5:1AAA

2.4:1Fail

1.2:1Fail

1.6:1Fail

10.4:1AAA

2.9:1Fail

1.2:1Fail

1.3:1Fail

13.8:1AAA

3.8:1AA18

1.6:1Fail

1.3:1Fail

Similar palettes

More like Arctic Shore Twilight

Abyssal Bioluminescence