Back to palettes

Palette

Indigo Ocean Depth

A tranquil gradient of deep to light indigo, reflecting the serene and profound depths of the ocean.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Indigo Ocean Depth 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 Indigo Ocean Depth.

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

Data visualization

#0F0F2D#2C2C5E#4E4E8D#7070BF#9292E1

Palette guide

How to use Indigo Ocean Depth

Overview

The 'Indigo Ocean Depth' palette offers a tranquil gradient of deep to light indigo, reflecting the serene and profound depths of the ocean. This cohesive collection, featuring the profound #0F0F2D, the rich #2C2C5E, and the elegant #4E4E8D, alongside the luminous #7070BF and the gentle #9292E1, provides a calming and sophisticated range. Designers can leverage these hues to evoke tranquility, stability, and a sense of expansive serenity, perfect for projects requiring a deep yet approachable cool-toned aesthetic. Developers will find this palette excellent for crafting immersive user interfaces and branding that feels both established and refreshingly clear.

Best used for

  • Marine or environmental conservation websites
  • Wellness and meditation app interfaces
  • Corporate branding for stable, trustworthy companies
  • Educational platforms focusing on science or nature
  • Luxury travel or resort website designs
  • User dashboards requiring clarity and a calming feel

Suggested color roles

primary

Utilize #0F0F2D as the foundational deep indigo for headers, footers, or large content blocks, conveying stability.

secondary

Employ #2C2C5E for secondary navigation, subheadings, or important content panels, maintaining a strong, cohesive visual.

accent

Apply #7070BF or #9292E1 for interactive elements, calls-to-action, or highlight states, offering a luminous, inviting contrast.

background

The lightest shade, #9292E1, or a crisp white, works beautifully as a clean background. A subtle gradient using #7070BF could also be effective.

text

On lighter backgrounds, #0F0F2D provides excellent readability. On darker blues, pure white or a very light grey like #9292E1 ensures clarity.

Accessibility notes

  • Ensure #0F0F2D and #2C2C5E have sufficient contrast against white or #9292E1 for body text.
  • Avoid using #7070BF for small text on mid-tone blues like #4E4E8D due to potential contrast issues.
  • Always check contrast ratios for text over #4E4E8D, especially if the text color is also a mid-tone.
  • For interactive elements, ensure distinct visual cues beyond color, especially with the lighter shades.

Recommended combinations

Deep Tranquility

Excellent for creating a strong, authoritative base in corporate or educational branding, evoking depth.

#0F0F2D · #2C2C5E · #4E4E8D

Ocean Glow

Ideal for differentiating content sections or creating a gentle visual hierarchy in interfaces, like light through water.

#4E4E8D · #7070BF · #9292E1

Serene Contrast

Use the lighter blues as accents against the deep primary for dynamic calls-to-action or highlights.

#0F0F2D · #7070BF · #9292E1

CSS variables

:root {
  --indigo-ocean-depth-1: #0F0F2D;
  --indigo-ocean-depth-2: #2C2C5E;
  --indigo-ocean-depth-3: #4E4E8D;
  --indigo-ocean-depth-4: #7070BF;
  --indigo-ocean-depth-5: #9292E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "indigo-ocean-depth": {
        1: "#0F0F2D",
        2: "#2C2C5E",
        3: "#4E4E8D",
        4: "#7070BF",
        5: "#9292E1",
      }
    }
  }
}

Related searches

indigo blue ocean palettedeep sea color scheme UIcalming blue web designtranquil indigo gradientmarine blue branding

Palette colors

Hex values

Color 1#0F0F2D
·
Color 2#2C2C5E
·
Color 3#4E4E8D
·
Color 4#7070BF
·
Color 5#9292E1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.5:1Fail
4.2:1AA18
6.6:1AA
2
1.4:1Fail
1.7:1Fail
2.9:1Fail
4.6:1AA
3
2.5:1Fail
1.7:1Fail
1.7:1Fail
2.7:1Fail
4
4.2:1AA18
2.9:1Fail
1.7:1Fail
1.6:1Fail
5
6.6:1AA
4.6:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Indigo Ocean Depth

View all Cool
Aegean Coastline Muse
Ancient Indigo Dye
Celestial Ocean Twilight
Indigo Dye House
Moonlit Ocean Glow
Muted Ocean Depth