Palette

Sunken Shipwreck Moss

Deep, watery greens and muted blues capturing the eerie calm of an ancient shipwreck slowly claimed by moss.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunken Shipwreck Moss 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 Sunken Shipwreck Moss.

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

Data visualization

#3E5C6B#6A8A99#97B8C7#C4E5F6#2C4753

Palette guide

How to use Sunken Shipwreck Moss

Overview

The Sunken Shipwreck Moss palette evokes the serene yet mysterious calm of an underwater relic, with its gradient of cool, muted blues and blue-grays. This tranquil collection features the deep #2C4753, transitioning through #3E5C6B and #6A8A99 to the lighter #97B8C7 and #C4E5F6. Designers can leverage these colors to create a peaceful, contemplative, or slightly melancholic atmosphere. Developers will find this palette ideal for crafting calming user interfaces, environmental designs, or branding for themes related to nature, tranquility, or subtle mystery, offering a cohesive and visually soothing experience.

Best used for

Spa and wellness brand identity
Nature conservation websites
Underwater photography portfolios
Calm meditation app UI
Eco-friendly product packaging
Nautical or coastal-themed interior design

Suggested color roles

primary

#2C4753 - This very dark blue-gray provides a deep, stable base for backgrounds, headers, or dominant sections, establishing a profound, calm presence.

secondary

#3E5C6B - Use this dark blue-gray for supporting elements like subheadings, navigation, or larger content blocks, maintaining the cool, watery theme.

accent

#97B8C7 - A soft, light blue-gray perfect for subtle highlights, interactive elements, or key information, drawing attention gently without stark contrast.

background

#C4E5F6 - This very light blue offers an airy, expansive background, providing excellent contrast for darker text and reinforcing the palette's serene mood.

text

#2C4753 - For primary text, this very dark blue-gray ensures excellent readability against lighter backgrounds like #C4E5F6. For dark backgrounds, use white or a very light gray.

Accessibility notes

Ensure sufficient contrast when using lighter shades like #97B8C7 for text against mid-tones.
#2C4753 provides strong contrast for text on #C4E5F6, ideal for readability.
Avoid placing #6A8A99 text on #3E5C6B due to low contrast.
Use clear visual indicators for interactive elements beyond color, such as underlines or icons, to aid accessibility.

Recommended combinations

Deep Water Blues

Creates a profound, immersive underwater feel, ideal for backgrounds or large design areas.

#2C4753 · #3E5C6B · #6A8A99

Surface Shimmer

Perfect for subtle gradients, content cards, or conveying a sense of lightness and tranquility.

#6A8A99 · #97B8C7 · #C4E5F6

Shipwreck Details

Provides a strong contrast for text and interactive elements, ensuring clarity within a calm aesthetic.

#2C4753 · #97B8C7 · #C4E5F6

CSS variables

:root {
  --sunken-shipwreck-moss-1: #3E5C6B;
  --sunken-shipwreck-moss-2: #6A8A99;
  --sunken-shipwreck-moss-3: #97B8C7;
  --sunken-shipwreck-moss-4: #C4E5F6;
  --sunken-shipwreck-moss-5: #2C4753;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunken-shipwreck-moss": {
        1: "#3E5C6B",
        2: "#6A8A99",
        3: "#97B8C7",
        4: "#C4E5F6",
        5: "#2C4753",
      }
    }
  }
}

Hex values

Color 1#3E5C6B

Color 2#6A8A99

Color 3#97B8C7

Color 4#C4E5F6

Color 5#2C4753

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.4:1AA

1.4:1Fail

1.9:1Fail

1.8:1Fail

2.8:1Fail

2.7:1Fail

3.4:1AA18

1.8:1Fail

1.6:1Fail

4.7:1AA

5.4:1AA

2.8:1Fail

1.6:1Fail

7.4:1AAA

1.4:1Fail

2.7:1Fail

4.7:1AA

7.4:1AAA

Similar palettes

More like Sunken Shipwreck Moss

View all cool

Aqua Marine Vista

Arctic Moss Glaze

Celestial Aurora Dance

Cerulean Coastline Calm

Coastal Breeze Mist

Coastal Fog Drift