Palette

Stormy Nordic Coast

Cool, muted blues and grays, capturing the brooding atmosphere of a stormy Nordic coastline.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4A5A#6D7E8E#9EB1B9#D0DDE3#2A3D4D

Palette guide

How to use Stormy Nordic Coast

Overview

The Stormy Nordic Coast palette embodies a sophisticated and tranquil yet powerful aesthetic, drawing inspiration from rugged northern seascapes. This collection of cool, muted blues and grays, featuring the deep blue-grey of #3A4A5A and the serene light grey of #D0DDE3, provides a versatile foundation for design projects. The mid-tones, such as the balanced #6D7E8E and the airy #9EB1B9, offer excellent opportunities for layering and subtle contrast. With the grounding presence of #2A3D4D, this palette is ideal for conveying professionalism, calm, or a connection to nature. Designers and developers will find these hex codes perfect for creating cohesive branding, intuitive user interfaces, or atmospheric digital experiences that evoke a sense of quiet strength.

Best used for

Luxury travel branding
Architectural design portfolios
High-end tech company websites
Environmental conservation initiatives
Winter fashion lookbooks
Documentary film titles

Suggested color roles

primary

Employ #3A4A5A as a dominant brand color for headers, navigation, or strong visual statements, establishing a deep, authoritative presence.

secondary

Apply #6D7E8E for supporting sections, subheadings, or as a complementary background for content blocks.

accent

Introduce #9EB1B9 sparingly for call-to-action buttons, key data visualization, or subtle highlights, drawing attention without overpowering.

background

Utilize #D0DDE3 for clean, expansive page backgrounds, offering a light, airy canvas that enhances readability.

text

Utilize #2A3D4D for primary body text against lighter backgrounds like #D0DDE3 for optimal readability. For darker backgrounds, a crisp white or near-white is recommended.

Accessibility notes

Ensure #2A3D4D text on #D0DDE3 backgrounds meets WCAG AA contrast standards for readability.
Avoid using #6D7E8E for small text on #9EB1B9 as contrast may be insufficient for accessibility.
Pair a strong white text with #3A4A5A or #2A3D4D for headings and essential information to guarantee legibility.
Always test color combinations for interactive elements to ensure clear states for users with visual impairments.

Recommended combinations

Core Contrast

Ideal for primary branding, with #3A4A5A for main elements, #D0DDE3 for backgrounds, and #2A3D4D for body text.

#3A4A5A · #D0DDE3 · #2A3D4D

Subtle Depth

Perfect for secondary information, layered UI components, or subtle gradients, creating visual interest.

#6D7E8E · #9EB1B9 · #D0DDE3

Accent Highlight

Use #2A3D4D for strong text, #9EB1B9 for interactive accents, and #6D7E8E for supporting elements.

#2A3D4D · #9EB1B9 · #6D7E8E

CSS variables

:root {
  --stormy-nordic-coast-1: #3A4A5A;
  --stormy-nordic-coast-2: #6D7E8E;
  --stormy-nordic-coast-3: #9EB1B9;
  --stormy-nordic-coast-4: #D0DDE3;
  --stormy-nordic-coast-5: #2A3D4D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-nordic-coast": {
        1: "#3A4A5A",
        2: "#6D7E8E",
        3: "#9EB1B9",
        4: "#D0DDE3",
        5: "#2A3D4D",
      }
    }
  }
}

Hex values

Color 1#3A4A5A

Color 2#6D7E8E

Color 3#9EB1B9

Color 4#D0DDE3

Color 5#2A3D4D

Accessibility

Contrast checker

2.2:1Fail

4.1:1AA18

6.6:1AA

1.2:1Fail

2.2:1Fail

1.9:1Fail

3:1AA18

2.7:1Fail

4.1:1AA18

1.9:1Fail

1.6:1Fail

5:1AA

6.6:1AA

3:1AA18

1.6:1Fail

8.1:1AAA

1.2:1Fail

2.7:1Fail

5:1AA

8.1:1AAA

Similar palettes

More like Stormy Nordic Coast

View all cool

Coastal Tempest Gloom