Back to palettes

Palette

Deep Sea Flora

Mysterious deep blues and enchanting teals like hidden flora in the ocean's depths.

cooldark5 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

#1A2C3D#3B5A6D#6C9BA8#A8D8BF#DBF2EC

Palette guide

How to use Deep Sea Flora

Overview

The Deep Sea Flora palette (version 2) presents mysterious deep blues and enchanting teals, like hidden flora in the ocean's depths. It transitions gracefully from the profound #1A2C3D to the rich #3B5A6D and the calming #6C9BA8. The palette brightens considerably with the serene #A8D8BF, a soft teal-green, and culminates in the ethereal, almost white #DBF2EC. This collection is perfect for designers seeking a calming, refreshing, and highly versatile aesthetic, capable of evoking peace, natural beauty, and clarity. It’s excellent for creating interfaces that feel spacious and inviting.

Best used for

  • Eco-conscious brand websites
  • Nature-themed mobile apps
  • Spa and wellness product packaging
  • Educational content about marine life
  • Serene digital art and photography
  • Clean and modern web interfaces

Suggested color roles

primary

#1A2C3D (The deepest blue, ideal for foundational backgrounds or main structural elements, conveying calm and depth.)

secondary

#3B5A6D (A rich, deep blue for secondary content areas, navigation, or subtle layering.)

accent

#DBF2EC (The lightest, almost white aqua, perfect for highlights, active states, or ethereal calls to action.)

background

#DBF2EC (Provides a light, airy, and refreshing canvas, enhancing the cooler, deeper tones.)

text

#1A2C3D (Excellent for primary body text on light backgrounds like #DBF2EC. For headings, #3B5A6D provides a clear, readable option.)

Accessibility notes

  • #1A2C3D and #3B5A6D provide strong contrast against #DBF2EC and #A8D8BF, making them suitable for body text.
  • Ensure #6C9BA8 has sufficient contrast when used as text on #DBF2EC.
  • Avoid using #A8D8BF for text on #DBF2EC, as contrast will likely be insufficient.
  • The progression from dark to light ensures good visual hierarchy and accessibility when used thoughtfully.

Recommended combinations

Deep Forest Floor

Deep, calming blues for backgrounds and structural elements.

#1A2C3D · #3B5A6D · #6C9BA8

Flora's Light

Light, airy blues and greens for headers, cards, or light-filled sections.

#A8D8BF · #DBF2EC · #6C9BA8

Natural Contrast

Strong contrast for clear readability and highlighting key information, evoking natural balance.

#1A2C3D · #DBF2EC · #3B5A6D

CSS variables

:root {
  --deep-sea-flora-2-1: #1A2C3D;
  --deep-sea-flora-2-2: #3B5A6D;
  --deep-sea-flora-2-3: #6C9BA8;
  --deep-sea-flora-2-4: #A8D8BF;
  --deep-sea-flora-2-5: #DBF2EC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-flora-2": {
        1: "#1A2C3D",
        2: "#3B5A6D",
        3: "#6C9BA8",
        4: "#A8D8BF",
        5: "#DBF2EC",
      }
    }
  }
}

Related searches

deep teal green palettemarine flora colorsserene natural web designcool tone light dark paletteeco friendly ui colors

Palette colors

Hex values

Color 1#1A2C3D
·
Color 2#3B5A6D
·
Color 3#6C9BA8
·
Color 4#A8D8BF
·
Color 5#DBF2EC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
4.7:1AA
9:1AAA
12.2:1AAA
2
1.9:1Fail
2.4:1Fail
4.6:1AA
6.2:1AA
3
4.7:1AA
2.4:1Fail
1.9:1Fail
2.6:1Fail
4
9:1AAA
4.6:1AA
1.9:1Fail
1.4:1Fail
5
12.2:1AAA
6.2:1AA
2.6:1Fail
1.4:1Fail

Similar palettes

More like Deep Sea Flora

View all cool
Sunken Treasure Glow
Teal Abyss
Abyssal Bioluminescence
Abyssal Current Glide
Bioluminescent Abyss
Deep Ocean Bloom