Palette

Tempest Horizon Blue

Reflects the deep, brooding power of a stormy sea under a heavy, grey sky.

Cooldark5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tempest Horizon Blue 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 Tempest Horizon Blue.

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

Data visualization

#2C3E50#34495E#5C7F9D#84A3BF#E8EEF4

Palette guide

How to use Tempest Horizon Blue

Overview

The Tempest Horizon Blue palette captures the serene yet powerful essence of a stormy sea meeting a heavy, grey sky. Featuring deep, grounding blues like #2C3E50 and #34495E, it gradually lightens through atmospheric shades such as #5C7F9D and #84A3BF, culminating in the airy #E8EEF4. This collection is perfect for designers and developers aiming for a calm, sophisticated, and slightly melancholic aesthetic. Its harmonious cool tones offer excellent versatility for web design, branding, and digital art, providing a sense of depth and tranquility while maintaining superb readability and visual appeal across various applications.

Best used for

Coastal and maritime branding
Serene web and app interfaces
Photography portfolios and galleries
Travel and tourism promotions
Editorial layouts with a calm focus
Sustainable and eco-friendly product design

Suggested color roles

primary

Utilize #2C3E50 as the primary color for deep backgrounds, headers, or main branding elements, providing a strong, anchoring presence.

secondary

Employ #34495E for supportive sections, subheadings, or secondary navigation, adding subtle warmth and depth.

accent

Apply #84A3BF for soft highlights, interactive states, or to add a touch of luminosity without being overly bright.

background

Use #E8EEF4 as a light, airy background for main content, or #2C3E50 for a sophisticated dark mode theme.

text

For dark backgrounds like #2C3E50, use #E8EEF4 or a near-white. On lighter backgrounds such as #E8EEF4, use #2C3E50 or a dark charcoal for optimal contrast.

Accessibility notes

Ensure #E8EEF4 text on #2C3E50 backgrounds provides sufficient contrast to meet WCAG AA standards.
Be cautious when using #84A3BF for small text on #5C7F9D, as contrast might be borderline.
For long-form content on light backgrounds, consider a dark charcoal over pure black for a softer, more harmonious look.
Always verify contrast ratios for links and interactive elements, especially against similar tonal values.

Recommended combinations

Horizon Contrast

A balanced contrast of deep blue-grey and light, with a prominent mid-blue, ideal for clear hierarchy in web pages.

#2C3E50 · #E8EEF4 · #5C7F9D

Coastal Blend

Creates a smooth, natural transition, perfect for subtle gradients, layered backgrounds, or visual storytelling elements.

#34495E · #5C7F9D · #84A3BF

Soft Touch

Combines the deepest tone with a soft, atmospheric accent and a light base, suitable for adding gentle emphasis and elegance.

#2C3E50 · #84A3BF · #E8EEF4

CSS variables

:root {
  --tempest-horizon-blue-1: #2C3E50;
  --tempest-horizon-blue-2: #34495E;
  --tempest-horizon-blue-3: #5C7F9D;
  --tempest-horizon-blue-4: #84A3BF;
  --tempest-horizon-blue-5: #E8EEF4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tempest-horizon-blue": {
        1: "#2C3E50",
        2: "#34495E",
        3: "#5C7F9D",
        4: "#84A3BF",
        5: "#E8EEF4",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#34495E

Color 3#5C7F9D

Color 4#84A3BF

Color 5#E8EEF4

Accessibility

Contrast checker

1.2:1Fail

2.6:1Fail

4.2:1AA18

9.4:1AAA

1.2:1Fail

2.2:1Fail

3.5:1AA18

7.9:1AAA

2.6:1Fail

2.2:1Fail

1.6:1Fail

3.6:1AA18

4.2:1AA18

3.5:1AA18

1.6:1Fail

2.3:1Fail

9.4:1AAA

7.9:1AAA

3.6:1AA18

2.3:1Fail

Similar palettes

More like Tempest Horizon Blue

View all Cool

Nebula Cloud Drift

Coastal Tempest Gloom

Stormy Coast Drift

Stormy Coastline Drama

Abyssal Current Flow

Aegean Coastline Muse