Palette

Oceanic Stormy Horizon

A muted, stormy palette reflecting misty coastal weather and deep sea grays.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Stormy Horizon 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 Oceanic Stormy Horizon.

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

Data visualization

#2F4F4F#708090#A9A9A9#B0C4DE#D3D3D3

Palette guide

How to use Oceanic Stormy Horizon

Overview

The "Oceanic Stormy Horizon" palette offers a sophisticated collection of cool, desaturated tones inspired by misty coastlines and deep sea grays. Featuring hex codes like the profound #2F4F4F, the balanced #708090, and the airy #D3D3D3, this guide provides a practical framework for designers and developers. These colors, including #A9A9A9 and #B0C4DE, are perfect for creating serene yet impactful digital interfaces, branding, or editorial layouts. Their muted quality ensures versatility, allowing for designs that evoke calm, professionalism, and understated elegance without being overly stark. Use this palette to convey a sense of depth, stability, and quiet strength across various mediums.

Best used for

Corporate branding and professional websites
UI/UX design for productivity or calm-focused apps
Editorial design for sophisticated publications
Interior design concepts evoking tranquility
Packaging for luxury or natural products
Environmental graphics and signage

Suggested color roles

primary

#2F4F4F (Dark Slate Gray). Ideal for commanding headlines, primary navigation elements, or brand logos, establishing a deep, authoritative base.

secondary

#708090 (Slate Gray). Excellent for subheadings, secondary buttons, or large content blocks, providing a softer complement to the primary without losing depth.

accent

#B0C4DE (Light Steel Blue). Use sparingly for interactive elements, highlights, or subtle graphic details to introduce a refreshing, calm visual interest.

background

#D3D3D3 (Light Gray). Provides a clean, neutral canvas for content, ensuring high readability and a spacious feel across web pages or print.

text

#2F4F4F or a near-black like #333333. Ensure strong contrast for body text on lighter backgrounds like #D3D3D3 or #B0C4DE to maintain excellent readability.

Accessibility notes

Ensure #2F4F4F text on #D3D3D3 background meets WCAG AAA standards for optimal readability.
Check contrast ratios for #708090 against #B0C4DE for larger text elements or UI components.
Avoid using #A9A9A9 text on #D3D3D3 as their low contrast will likely fail accessibility requirements.
Always test color combinations with a contrast checker, especially for small text or critical information.

Recommended combinations

Deep Professional

Perfect for main content areas, where #2F4F4F is text, #708090 is a divider or secondary element, and #D3D3D3 is the background.

#2F4F4F · #708090 · #D3D3D3

Serene Interface

Use #B0C4DE as a light background, #A9A9A9 for subtle UI elements, and #2F4F4F for clear, readable text or icons.

#B0C4DE · #A9A9A9 · #2F4F4F

Subtle Depth

Ideal for layered backgrounds or card designs, where #D3D3D3 is the base, #A9A9A9 defines cards, and #708090 provides depth for borders or shadows.

#708090 · #A9A9A9 · #D3D3D3

CSS variables

:root {
  --oceanic-stormy-horizon-1: #2F4F4F;
  --oceanic-stormy-horizon-2: #708090;
  --oceanic-stormy-horizon-3: #A9A9A9;
  --oceanic-stormy-horizon-4: #B0C4DE;
  --oceanic-stormy-horizon-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-stormy-horizon": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#B0C4DE",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#708090

Color 3#A9A9A9

Color 4#B0C4DE

Color 5#D3D3D3

Accessibility

Contrast checker

2.2:1Fail

3.8:1AA18

5:1AA

6:1AA

2.2:1Fail

1.7:1Fail

2.3:1Fail

2.7:1Fail

3.8:1AA18

1.7:1Fail

1.3:1Fail

1.6:1Fail

5:1AA

2.3:1Fail

1.3:1Fail

1.2:1Fail

6:1AA

2.7:1Fail

1.6:1Fail

1.2:1Fail

Similar palettes

More like Oceanic Stormy Horizon

View all cool

Stormy Seafoam Weather

Coastal Morning Haze

Aegean Coastline Calm

Aegean Horizon

Aegean Sea Serene

Agate Grotto