Back to palettes

Palette

Stormy Sky Loom

Deep, brooding blues and grays capture the intense atmosphere of a gathering storm.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Sky Loom 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 Sky Loom.

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

Data visualization

#2C3E50#34495E#4A637C#6B809D#8DA2BD

Palette guide

How to use Stormy Sky Loom

Overview

The Stormy Sky Loom palette offers a sophisticated blend of deep blues and cool grays, evoking a sense of calm strength and profound depth. This collection, featuring hues like the commanding #2C3E50 and the slightly softer #34495E, provides an excellent foundation for designs aiming for a serious yet elegant aesthetic. Designers can leverage the mid-tone #4A637C for balance, while #6B809D and #8DA2BD introduce lighter variations suitable for secondary elements or backgrounds. This palette is ideal for creating professional interfaces, branding, or digital experiences that require a mature, reliable, and slightly moody atmosphere. Its cohesive range ensures versatility across various design elements, from bold statements to subtle details.

Best used for

  • Corporate branding and identity
  • Elegant website and app UI/UX
  • Professional presentations and reports
  • Luxury product packaging
  • Interior design inspiration
  • Digital photography portfolios

Suggested color roles

primary

Use #2C3E50 for strong branding elements, main calls-to-action, or dominant background sections to convey authority.

secondary

Apply #34495E for subheadings, navigation bars, or significant content blocks, offering a slight visual break from the primary.

accent

Utilize #6B809D for interactive elements like buttons, links, or subtle highlight areas, providing gentle contrast.

background

Employ #8DA2BD for lighter sections, card backgrounds, or subtle gradients to provide a clean, airy foundation.

text

For dark backgrounds, use #8DA2BD or a crisp white for readability. For light backgrounds, #2C3E50 or #34495E ensures excellent contrast for body text.

Accessibility notes

  • Ensure sufficient contrast between #2C3E50 and #8DA2BD for text readability on backgrounds.
  • Avoid using #6B809D on #8DA2BD for small text as contrast might be insufficient.
  • Test interactive elements using #6B809D against various backgrounds for WCAG compliance.
  • Provide ample spacing and larger font sizes when using mid-tone combinations like #4A637C for body text.

Recommended combinations

Deep & Grounded

Excellent for strong headers, primary content blocks, or a sophisticated dark mode theme.

#2C3E50 · #34495E · #4A637C

Subtle Ascent

Ideal for gradients, layered UI elements, or depicting progression and depth in data visualizations.

#4A637C · #6B809D · #8DA2BD

Accented Calm

Pair the darkest and lightest for high contrast, with #6B809D as an accent for buttons or icons.

#2C3E50 · #8DA2BD · #6B809D

CSS variables

:root {
  --stormy-sky-loom-1: #2C3E50;
  --stormy-sky-loom-2: #34495E;
  --stormy-sky-loom-3: #4A637C;
  --stormy-sky-loom-4: #6B809D;
  --stormy-sky-loom-5: #8DA2BD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-sky-loom": {
        1: "#2C3E50",
        2: "#34495E",
        3: "#4A637C",
        4: "#6B809D",
        5: "#8DA2BD",
      }
    }
  }
}

Related searches

dark blue grey palettecool tone branding colorssophisticated UI blue graymoody website color schemecorporate blue gray palette

Palette colors

Hex values

Color 1#2C3E50
·
Color 2#34495E
·
Color 3#4A637C
·
Color 4#6B809D
·
Color 5#8DA2BD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.8:1Fail
2.7:1Fail
4.2:1AA18
2
1.2:1Fail
1.5:1Fail
2.3:1Fail
3.6:1AA18
3
1.8:1Fail
1.5:1Fail
1.5:1Fail
2.4:1Fail
4
2.7:1Fail
2.3:1Fail
1.5:1Fail
1.5:1Fail
5
4.2:1AA18
3.6:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Stormy Sky Loom

View all cool
Bioluminescent Abyss
Coastal Tempest Gloom
Cobalt Abyss Depths
Cobalt Arctic Depth
Deep Sea Phytoplankton
Deep Sea Shimmer