Palette

Deep Sea Flora

Mysterious and aquatic, resembling the muted colors of flora swaying in the deep ocean currents.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#012026#003E48#006775#008D9B#00B1B3

Palette guide

How to use Deep Sea Flora

Overview

The Deep Sea Flora palette (version 3) is mysterious and aquatic, resembling the muted colors of flora swaying in the deep ocean currents. It presents a captivating gradient of deep teal-greens, starting with the profound #012026 and progressing through #003E48, #006775, and #008D9B. The palette culminates in #00B1B3, a vibrant yet still deep aqua that evokes the subtle glow of underwater plant life. This collection is ideal for designers seeking a calming, sophisticated, and immersive aesthetic, perfect for conveying natural beauty, tranquility, and environmental consciousness.

Best used for

Environmental non-profit websites
Nature-themed educational apps
Spa and relaxation services
Sustainable living brands
Marine biology documentaries
Clean and modern web interfaces

Suggested color roles

primary

#012026 (The deepest, almost black-teal, ideal for foundational backgrounds, setting a profound and calming mood.)

secondary

#003E48 (A rich, deep teal for secondary content areas, navigation, or subtle layering.)

accent

#00B1B3 (The brightest, most vibrant aqua, perfect for calls to action, interactive elements, or highlighting key information.)

background

#012026 (Provides an immersive, truly dark ocean backdrop, enhancing the vibrancy of other colors.)

text

#00B1B3 (Excellent for headings and important text on dark backgrounds. For body text, a light grey or white (e.g., #F0F0F0) is recommended for optimal readability.)

Accessibility notes

#00B1B3 provides strong contrast against #012026, #003E48, and #006775, making it suitable for text and interactive elements.
Always use a light, high-contrast color (e.g., white or light grey) for body text on the darkest backgrounds to ensure WCAG compliance.
Avoid using the darker teal-greens for text on similar dark backgrounds to prevent readability issues.
The palette's depth benefits from careful placement of the accent color for critical information.

Recommended combinations

Deepest Greens

Layered darkest tones for ultimate depth and a sense of the unknown.

#012026 · #003E48 · #006775

Flora's Glow

Strong contrast for highlighting key information or interactive elements, mimicking bioluminescence.

#012026 · #00B1B3 · #008D9B

Teal Progression

Variations of deep teal for secondary UI components or subtle gradients.

#003E48 · #006775 · #008D9B

CSS variables

:root {
  --deep-sea-flora-3-1: #012026;
  --deep-sea-flora-3-2: #003E48;
  --deep-sea-flora-3-3: #006775;
  --deep-sea-flora-3-4: #008D9B;
  --deep-sea-flora-3-5: #00B1B3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-flora-3": {
        1: "#012026",
        2: "#003E48",
        3: "#006775",
        4: "#008D9B",
        5: "#00B1B3",
      }
    }
  }
}

Hex values

Color 1#012026

Color 2#003E48

Color 3#006775

Color 4#008D9B

Color 5#00B1B3

Accessibility

Contrast checker

1.4:1Fail

2.6:1Fail

4.3:1AA18

6.4:1AA

1.4:1Fail

1.8:1Fail

3:1Fail

4.5:1AA18

2.6:1Fail

1.8:1Fail

1.7:1Fail

2.5:1Fail

4.3:1AA18

3:1Fail

1.7:1Fail

1.5:1Fail

6.4:1AA

4.5:1AA18

2.5:1Fail

1.5:1Fail

Similar palettes

More like Deep Sea Flora