Back to palettes

Palette

Deep Sea Flora

Ventures into the abyss, revealing the muted yet vibrant colors of marine life in the deep sea.

darkdark5 colors
More dark 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

#0A1B2A#1C3C50#3D6B8C#6B9CCC#B0D4ED

Palette guide

How to use Deep Sea Flora

Overview

The Deep Sea Flora palette ventures into the abyss, revealing the muted yet vibrant colors of marine life in the deep sea. It begins with the profound, near-black #0A1B2A and progresses through a beautiful gradient of oceanic blues: #1C3C50, #3D6B8C, and #6B9CCC. The palette culminates in the ethereal #B0D4ED, a light sky blue, evoking the subtle glow of distant light or bioluminescent flora. This collection is perfect for designers seeking a calming, yet sophisticated and immersive aesthetic, capable of conveying depth, mystery, and natural beauty.

Best used for

  • Marine biology educational tools
  • Environmental conservation websites
  • Serene meditation apps
  • Atmospheric video game environments
  • Corporate branding (trust, depth)
  • Luxury spa and wellness services

Suggested color roles

primary

#0A1B2A (The deepest, near-black blue, ideal for foundational backgrounds, establishing a profound and mysterious mood.)

secondary

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

accent

#B0D4ED (The lightest, ethereal sky blue, perfect for highlights, active states, or subtle calls to action, mimicking distant light.)

background

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

text

#B0D4ED (Excellent for primary text on dark backgrounds, ensuring clear readability and a soft, luminous quality.)

Accessibility notes

  • #B0D4ED provides strong contrast against #0A1B2A, #1C3C50, and #3D6B8C, making it suitable for body text and interactive elements.
  • Ensure #6B9CCC has sufficient contrast when used as text on #0A1B2A or #1C3C50.
  • Avoid using the darker blues for text on similar dark blue backgrounds to prevent readability issues.
  • The natural gradient from dark to light aids in creating an accessible visual hierarchy.

Recommended combinations

Abyssal Garden

Deep, layered blues for backgrounds and structural elements, conveying immense depth.

#0A1B2A · #1C3C50 · #3D6B8C

Flora's Glow

Lighter blues for headers, cards, or light-filled sections, mimicking subtle luminescence.

#3D6B8C · #6B9CCC · #B0D4ED

Deep Sea Clarity

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

#0A1B2A · #B0D4ED · #6B9CCC

CSS variables

:root {
  --deep-sea-flora-1: #0A1B2A;
  --deep-sea-flora-2: #1C3C50;
  --deep-sea-flora-3: #3D6B8C;
  --deep-sea-flora-4: #6B9CCC;
  --deep-sea-flora-5: #B0D4ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-flora": {
        1: "#0A1B2A",
        2: "#1C3C50",
        3: "#3D6B8C",
        4: "#6B9CCC",
        5: "#B0D4ED",
      }
    }
  }
}

Related searches

deep blue flora palettemarine life colorsmysterious ocean web designdark blue light blue gradientserene underwater theme

Palette colors

Hex values

Color 1#0A1B2A
·
Color 2#1C3C50
·
Color 3#3D6B8C
·
Color 4#6B9CCC
·
Color 5#B0D4ED
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3.1:1AA18
6:1AA
11.2:1AAA
2
1.5:1Fail
2:1Fail
4:1AA18
7.4:1AAA
3
3.1:1AA18
2:1Fail
2:1Fail
3.7:1AA18
4
6:1AA
4:1AA18
2:1Fail
1.9:1Fail
5
11.2:1AAA
7.4:1AAA
3.7:1AA18
1.9:1Fail

Similar palettes

More like Deep Sea Flora

View all dark
Abyssal Trench Mystery
Abyssal Trench Mystery
Bioluminescent Deep Trench
Deep Fathom Mystery
Deep Ocean Abyss
Deep Ocean Abyss