Back to palettes

Palette

Stormy Sea Glass

Reflects the calming yet mysterious colors of sea glass found on a stormy shoreline.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Sea Glass 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 Sea Glass.

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

Data visualization

#4D6D7E#7B9FA6#AEC0C6#3A5763#62838D

Palette guide

How to use Stormy Sea Glass

Overview

The Stormy Sea Glass palette reflects the calming yet mysterious colors of sea glass found on a stormy shoreline, offering a muted and sophisticated aesthetic. This collection of cool blue-grays ranges from the deep, grounding #3A5763 to the airy, translucent #AEC0C6. Key mid-tones like #4D6D7E, #62838D, and #7B9FA6 provide a harmonious gradient, perfect for creating a sense of calm, introspection, or subtle elegance. Designers and developers will find these hex codes ideal for projects that require a soft, natural, and timeless feel. It's particularly effective for conveying tranquility, professionalism, or a connection to natural elements without being overtly vibrant.

Best used for

  • Handmade craft websites
  • Sustainable fashion brands
  • Interior design visualization
  • Mindfulness and meditation apps
  • Nature-inspired product packaging
  • Artisan jewelry e-commerce

Suggested color roles

primary

Utilize #3A5763 as the primary dark anchor for branding elements, headers, or strong text, providing a solid, calming foundation.

secondary

Apply #4D6D7E for supporting sections, content blocks, or subheadings, offering a harmonious and slightly lighter tone.

accent

Introduce #7B9FA6 sparingly for interactive elements, subtle highlights, or graphical accents to provide a gentle visual cue.

background

Employ #AEC0C6 for clean, expansive page backgrounds, offering a light, muted canvas that enhances readability and tranquility.

text

Use a dark text like #3A5763 for body copy on #AEC0C6 backgrounds for optimal readability. For darker backgrounds, a crisp white or very light grey is recommended.

Accessibility notes

  • Ensure #3A5763 text on #AEC0C6 backgrounds meets WCAG AA contrast standards for legibility.
  • Avoid using #62838D for small text on #7B9FA6, as contrast may be insufficient for accessibility.
  • Verify that all interactive elements have distinct focus and hover states with adequate contrast.
  • Prioritize high contrast for essential information, especially against the lighter shades in this palette.

Recommended combinations

Quiet Contrast

For a serene base: #3A5763 for primary, #AEC0C6 for backgrounds, and #4D6D7E for text/secondary elements.

#3A5763 · #AEC0C6 · #4D6D7E

Muted Harmony

Ideal for subtle layering in UI components, creating gentle depth and visual interest.

#4D6D7E · #62838D · #7B9FA6

Glassy Accents

Use #3A5763 for strong text, #7B9FA6 for soft accents, and #AEC0C6 for clean backgrounds.

#3A5763 · #7B9FA6 · #AEC0C6

CSS variables

:root {
  --stormy-sea-glass-1: #4D6D7E;
  --stormy-sea-glass-2: #7B9FA6;
  --stormy-sea-glass-3: #AEC0C6;
  --stormy-sea-glass-4: #3A5763;
  --stormy-sea-glass-5: #62838D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-sea-glass": {
        1: "#4D6D7E",
        2: "#7B9FA6",
        3: "#AEC0C6",
        4: "#3A5763",
        5: "#62838D",
      }
    }
  }
}

Related searches

stormy sea glass colorsmuted blue grey palettecalm ocean tones designnatural elegant color schemesoft coastal aesthetic

Palette colors

Hex values

Color 1#4D6D7E
·
Color 2#7B9FA6
·
Color 3#AEC0C6
·
Color 4#3A5763
·
Color 5#62838D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
2.9:1Fail
1.4:1Fail
1.4:1Fail
2
1.9:1Fail
1.5:1Fail
2.7:1Fail
1.4:1Fail
3
2.9:1Fail
1.5:1Fail
4.1:1AA18
2.2:1Fail
4
1.4:1Fail
2.7:1Fail
4.1:1AA18
1.9:1Fail
5
1.4:1Fail
1.4:1Fail
2.2:1Fail
1.9:1Fail

Similar palettes

More like Stormy Sea Glass

View all cool
Coastal Serenity Shores
Misty Coastal Cliffs
Morning Fog Harbor
Muted Ocean Shallows
Ocean Mist Pebbles
Ocean Spray Mist