Back to palettes

Palette

Deep Sea Phytoplankton

Mysterious deep blues to luminous aquas, like light filtering through deep-sea phytoplankton blooms.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0f1f2e#2a4a6e#4c7ba3#7bb4d9#ace7ff

Palette guide

How to use Deep Sea Phytoplankton

Overview

The Deep Sea Phytoplankton palette transitions from mysterious deep blues to luminous aquas, like light filtering through deep-sea phytoplankton blooms. This captivating gradient, from the profound #0f1f2e to the ethereal #ace7ff, offers a refreshing yet deep aesthetic. The intermediate shades, including #2a4a6e, #4c7ba3, and #7bb4d9, create a seamless visual flow, perfect for designs that aim to convey natural beauty, scientific wonder, or a refreshing sense of clarity. Designers can leverage this palette to create immersive backgrounds, highlight environmental themes, or establish a brand identity that speaks to growth and vitality, ideal for engaging user experiences.

Best used for

  • Environmental conservation websites and apps
  • Scientific research and educational platforms
  • Wellness and natural product branding
  • Documentary film graphics and titles
  • Coastal tourism marketing materials
  • Refreshing app interfaces and dashboards

Suggested color roles

primary

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

secondary

Apply #2a4a6e 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 #ace7ff, providing a luminous and refreshing contrast.

background

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

text

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

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #7bb4d9 on #4c7ba3 or similar mid-tones.
  • The very light #ace7ff should be paired with a very dark text color (e.g., black or #0f1f2e) for readability.
  • Always check text and background color combinations against WCAG guidelines for readability.
  • Avoid using #ace7ff as a primary background for large text areas unless the text color is extremely dark and passes contrast.

Recommended combinations

Bloom Depths

Creates a deep, natural base with a luminous accent, perfect for hero sections or prominent calls to action, evoking light filtering.

#0F1F2E · #2A4A6E · #ACE7FF

Phytoplankton Gradient

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

#2A4A6E · #4C7BA3 · #7BB4D9

Luminous Ecosystem

Perfect for a dark background, a glowing accent for interactive elements, and a supportive mid-blue for secondary elements.

#0F1F2E · #ACE7FF · #4C7BA3

CSS variables

:root {
  --deep-sea-phytoplankton-1: #0f1f2e;
  --deep-sea-phytoplankton-2: #2a4a6e;
  --deep-sea-phytoplankton-3: #4c7ba3;
  --deep-sea-phytoplankton-4: #7bb4d9;
  --deep-sea-phytoplankton-5: #ace7ff;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-phytoplankton": {
        1: "#0f1f2e",
        2: "#2a4a6e",
        3: "#4c7ba3",
        4: "#7bb4d9",
        5: "#ace7ff",
      }
    }
  }
}

Related searches

deep sea phytoplankton colorsblue aqua gradient paletteenvironmental ocean designluminous marine UI colorscool blue nature theme

Palette colors

Hex values

Color 1#0f1f2e
·
Color 2#2a4a6e
·
Color 3#4c7ba3
·
Color 4#7bb4d9
·
Color 5#ace7ff
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.7:1AA18
7.5:1AAA
12.4:1AAA
2
1.8:1Fail
2:1Fail
4.1:1AA18
6.8:1AA
3
3.7:1AA18
2:1Fail
2:1Fail
3.3:1AA18
4
7.5:1AAA
4.1:1AA18
2:1Fail
1.7:1Fail
5
12.4:1AAA
6.8:1AA
3.3:1AA18
1.7:1Fail

Similar palettes

More like Deep Sea Phytoplankton

View all cool