Palette

Deep Sea Siren

Dive into the mysterious depths of the ocean, where sunlight fades and ancient secrets stir.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Sea Siren 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 Deep Sea Siren.

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

Data visualization

#0A0F0D#1C313A#2C4251#7A9E9F#ABCED1

Palette guide

How to use Deep Sea Siren

Overview

The Deep Sea Siren palette invites designers to dive into the mysterious depths of the ocean, where sunlight fades and ancient secrets stir. From the near-black #0A0F0D to the ethereal #ABCED1, this collection offers a cool, sophisticated, and subtly haunting aesthetic. The intermediate shades, including #1C313A, #2C4251, and #7A9E9F, create a seamless visual flow, perfect for designs that aim to convey intrigue, tranquility, or a sense of profound discovery. Designers can leverage this palette to create immersive backgrounds, highlight mysterious themes, or establish a brand identity that speaks to hidden beauty and timeless allure, ideal for captivating user experiences.

Best used for

Art and photography portfolios (dark themes)
Luxury brand websites and apps
Mystery or fantasy novel covers
Dark mode UI themes for sophisticated apps
Environmental conservation initiatives
Elegant event branding

Suggested color roles

primary

Use #0A0F0D as the dominant background or primary brand color to establish a deep, mysterious, and immersive foundation.

secondary

Apply #1C313A for major content sections, navigation, or as a slightly lighter dark tone to add subtle visual structure.

accent

Highlight interactive elements, calls to action, or key visual features with #ABCED1, providing a soft yet clear contrast.

background

The profound #0A0F0D creates an excellent, almost black canvas, ensuring content stands out with optimal readability for light text.

text

For primary text, use crisp white or a very pale blue-gray (e.g., #F0F8FF) on dark backgrounds. #7A9E9F can be used for secondary text on darker blues.

Accessibility notes

Ensure sufficient contrast for text, especially when using #7A9E9F on #2C4251 or similar dark shades.
The very light #ABCED1 should be paired with a very dark text color (e.g., black or #0A0F0D) for readability.
Always check text and background color combinations against WCAG guidelines for readability.
Avoid using #ABCED1 as a primary background for large text areas unless the text color is extremely dark and passes contrast.

Recommended combinations

Siren Depths

Creates a deep, mysterious base with a soft, ethereal highlight for headings or important UI elements, evoking allure.

#0A0F0D · #1C313A · #ABCED1

Cool Stratum

Ideal for seamless background transitions, subtle depth effects, or progressive disclosure in user interfaces, with graduated cool tones.

#1C313A · #2C4251 · #7A9E9F

Mystic Allure

Perfect for a very dark background, a light accent for interactive elements, and a supportive deep teal for secondary elements.

#0A0F0D · #ABCED1 · #2C4251

CSS variables

:root {
  --deep-sea-siren-1: #0A0F0D;
  --deep-sea-siren-2: #1C313A;
  --deep-sea-siren-3: #2C4251;
  --deep-sea-siren-4: #7A9E9F;
  --deep-sea-siren-5: #ABCED1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-siren": {
        1: "#0A0F0D",
        2: "#1C313A",
        3: "#2C4251",
        4: "#7A9E9F",
        5: "#ABCED1",
      }
    }
  }
}

Hex values

Color 1#0A0F0D

Color 2#1C313A

Color 3#2C4251

Color 4#7A9E9F

Color 5#ABCED1

Accessibility

Contrast checker

1.4:1Fail

1.8:1Fail

6.6:1AA

11.5:1AAA

1.4:1Fail

1.3:1Fail

4.7:1AA

8.1:1AAA

1.8:1Fail

1.3:1Fail

3.6:1AA18

6.2:1AA

6.6:1AA

4.7:1AA

3.6:1AA18

1.7:1Fail

11.5:1AAA

8.1:1AAA

6.2:1AA

1.7:1Fail

Similar palettes

More like Deep Sea Siren

Abyssal Bioluminescence

Abyssal Current Glide

Arctic Ocean Depths