Back to palettes

Palette

Deep Sea Bloom

Captures the stunning bioluminescence and dark depths of an unexplored oceanic trench.

vibrantdark5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1C30#1F3F5F#3A7CA5#6BCBCC#FFD07A

Palette guide

How to use Deep Sea Bloom

Overview

The Deep Sea Bloom palette captures the stunning bioluminescence and dark depths of an unexplored oceanic trench. Anchored by the profound #0A1C30 and the rich #1F3F5F, these deep blues provide a mysterious, oceanic foundation. Lighter blues like #3A7CA5 and the vibrant teal #6BCBCC introduce a sense of depth and the subtle glow of underwater life. The unexpected burst of #FFD07A, a warm, golden yellow, acts as a spectacular highlight, mimicking the rare, brilliant flora found in the abyss. This palette is perfect for designers looking to create immersive, dramatic digital experiences with a touch of radiant wonder.

Best used for

  • Underwater documentary interfaces
  • Sci-fi game UI
  • Marine research institute branding
  • Dramatic website themes
  • Digital art depicting ocean scenes
  • Theatrical lighting designs

Suggested color roles

primary

#0A1C30 (The deepest blue, ideal for large background areas or main sections, setting a mysterious tone.)

secondary

#1F3F5F (A slightly lighter, rich blue for secondary panels, navigation, or subtle layering.)

accent

#FFD07A (The bright, warm golden yellow, perfect for calls to action, interactive elements, or focal points that need to pop.)

background

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

text

For primary body text, a light contrasting color like white or a very light grey (e.g., #F0F0F0) is essential for readability on dark backgrounds. For headings or highlights, #6BCBCC offers good contrast and a fresh feel.

Accessibility notes

  • Ensure #FFD07A and #6BCBCC have sufficient contrast against the darker blues like #0A1C30 and #1F3F5F for text and interactive elements.
  • Use a light, legible color for body text on #0A1C30 and #1F3F5F to meet WCAG contrast requirements.
  • The vibrant #FFD07A should be tested for readability when used as text, especially on mid-tone backgrounds.
  • Consider larger font sizes or bolding when using #6BCBCC for text to improve readability on darker blues.

Recommended combinations

Abyssal Depths

Gradual transition of deep blues for backgrounds and layered elements.

#0A1C30 · #1F3F5F · #3A7CA5

Bioluminescent Touch

High contrast for glowing accents and key interactive components.

#0A1C30 · #6BCBCC · #FFD07A

Oceanic Glow

Subtle gradient for UI elements, cards, or progress indicators.

#1F3F5F · #3A7CA5 · #6BCBCC

CSS variables

:root {
  --deep-sea-bloom-1: #0A1C30;
  --deep-sea-bloom-2: #1F3F5F;
  --deep-sea-bloom-3: #3A7CA5;
  --deep-sea-bloom-4: #6BCBCC;
  --deep-sea-bloom-5: #FFD07A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-bloom": {
        1: "#0A1C30",
        2: "#1F3F5F",
        3: "#3A7CA5",
        4: "#6BCBCC",
        5: "#FFD07A",
      }
    }
  }
}

Related searches

deep ocean web designbioluminescence color schememarine ui palettedark blue and yellow palettemysterious ocean colors

Palette colors

Hex values

Color 1#0A1C30
·
Color 2#1F3F5F
·
Color 3#3A7CA5
·
Color 4#6BCBCC
·
Color 5#FFD07A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.8:1AA18
9:1AAA
11.9:1AAA
2
1.6:1Fail
2.4:1Fail
5.7:1AA
7.5:1AAA
3
3.8:1AA18
2.4:1Fail
2.4:1Fail
3.2:1AA18
4
9:1AAA
5.7:1AA
2.4:1Fail
1.3:1Fail
5
11.9:1AAA
7.5:1AAA
3.2:1AA18
1.3:1Fail

Similar palettes

More like Deep Sea Bloom

View all vibrant