Back to palettes

Palette

Deep Ocean Bloom

Capturing the tranquil mystery of oceanic depths where light subtly penetrates to reveal hidden blooms.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F2D3F#2A5A7B#4B8EBC#7AC4EF#1E445E

Palette guide

How to use Deep Ocean Bloom

Overview

The Deep Ocean Bloom palette captures the tranquil mystery of oceanic depths, offering a serene range of blues. It grounds designs with the deep #0F2D3F, transitioning through the rich #2A5A7B and #1E445E, which provide substantial body. The lighter, more ethereal #4B8EBC and #7AC4EF introduce moments of clarity and subtle light, mimicking sun penetration in water. This collection is highly versatile for both digital interfaces and print materials, providing a calming yet sophisticated aesthetic. Designers and developers can leverage its cool, harmonized tones for branding that evokes trust, nature, or peaceful contemplation.

Best used for

  • Environmental non-profit websites
  • Calm meditation and wellness apps
  • Travel agency branding (oceanic destinations)
  • Educational platforms focused on marine life
  • Corporate reports and presentations
  • Spa and relaxation marketing materials

Suggested color roles

primary

Use #0F2D3F as the primary dark blue for backgrounds, headers, or main content areas, providing a solid, stable base.

secondary

Employ #2A5A7B or #1E445E for secondary sections, navigation, or larger UI components, offering depth and visual weight.

accent

Apply #7AC4EF for highlights, interactive elements, or graphic accents to introduce a refreshing, lighter touch.

background

For a dark theme, #0F2D3F works well. For a lighter, airy background, #7AC4EF can be used with darker text.

text

On dark backgrounds like #0F2D3F or #1E445E, use white or a very light grey. For lighter backgrounds like #7AC4EF, use #0F2D3F or a dark charcoal.

Accessibility notes

  • Ensure sufficient contrast between white or light grey text and the darker blues like #0F2D3F and #1E445E.
  • When using #7AC4EF as a background, pair it with a dark text color such as #0F2D3F to meet WCAG AA standards.
  • Avoid using #4B8EBC for small text on #2A5A7B backgrounds, as contrast might be insufficient.
  • Always test text legibility on all chosen backgrounds, especially for body copy and navigational links.

Recommended combinations

Light & Dark Flow

Creates a clear visual hierarchy, excellent for headers, subheadings, and content separation.

#0F2D3F · #4B8EBC · #7AC4EF

Muted Depth

Ideal for subtle gradients, layered elements, or backgrounds that require a cohesive, understated blue progression.

#1E445E · #2A5A7B · #4B8EBC

Core Spectrum

Forms a strong core identity, suitable for main branding elements and primary UI components.

#0F2D3F · #2A5A7B · #7AC4EF

CSS variables

:root {
  --deep-ocean-bloom-1: #0F2D3F;
  --deep-ocean-bloom-2: #2A5A7B;
  --deep-ocean-bloom-3: #4B8EBC;
  --deep-ocean-bloom-4: #7AC4EF;
  --deep-ocean-bloom-5: #1E445E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-bloom": {
        1: "#0F2D3F",
        2: "#2A5A7B",
        3: "#4B8EBC",
        4: "#7AC4EF",
        5: "#1E445E",
      }
    }
  }
}

Related searches

tranquil blue palettecalm ocean colorsaquatic web designserene blue brandingcool tone UI inspiration

Palette colors

Hex values

Color 1#0F2D3F
·
Color 2#2A5A7B
·
Color 3#4B8EBC
·
Color 4#7AC4EF
·
Color 5#1E445E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
4:1AA18
7.5:1AAA
1.4:1Fail
2
1.9:1Fail
2.1:1Fail
3.9:1AA18
1.4:1Fail
3
4:1AA18
2.1:1Fail
1.9:1Fail
2.9:1Fail
4
7.5:1AAA
3.9:1AA18
1.9:1Fail
5.4:1AA
5
1.4:1Fail
1.4:1Fail
2.9:1Fail
5.4:1AA

Similar palettes

More like Deep Ocean Bloom

View all cool
Abyssal Current Glide
Deep Kelp Forest
Deep Ocean Current
Ocean Current Drift
Sapphire Reef Light
Abyssal Blue Descent