Back to palettes

Palette

Deep Ocean Abyss

A monochromatic gradient reflecting the profound and mysterious depths of the ocean abyss, full of cool blues.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000033#000066#000099#0000CC#0000FF

Palette guide

How to use Deep Ocean Abyss

Overview

The Deep Ocean Abyss palette (version 7) presents a monochromatic gradient reflecting the profound and mysterious depths of the ocean. Comprising pure blues from the deepest #000033 to the most vibrant #0000FF, this palette offers a clean, direct, and scientific aesthetic. It's ideal for designs that require clarity, focus, and a strong sense of progression within a single hue. Designers and developers can utilize its consistent blue scale to create minimalist interfaces, precise data visualizations, or brand identities that convey depth and unwavering reliability.

Best used for

  • Scientific research publications
  • Data visualization and infographics
  • Minimalist website designs
  • Tech product interfaces
  • Educational content and presentations
  • Brand identity with a strong blue focus

Suggested color roles

primary

Designate #000033 as the deepest, foundational blue for robust sections and immersive backgrounds.

secondary

Utilize #000066 for supporting content, adding a consistent layer of depth.

accent

Apply #0000FF as a pure, vibrant highlight for calls to action, interactive elements, or key information.

background

Employ #000033 as a dark, immersive background to create a focused and sophisticated canvas.

text

For optimal readability on dark backgrounds, #0000FF or a crisp white provides excellent contrast. #0000CC can be used for headings.

Accessibility notes

  • Ensure #0000FF text has high contrast against all darker blues for optimal readability, especially for small text.
  • Be cautious when using #000099 text on #000066 backgrounds; always check contrast ratios.
  • Use the brightest color, #0000FF, for critical interactive elements to ensure visibility and clarity.
  • For body text on backgrounds like #000033 or #000066, white or a very light grey often provides the best contrast.

Recommended combinations

Monochromatic Depth

Creates a rich, layered depth within a single color family, ideal for immersive backgrounds.

#000033 · #000066 · #000099

Vibrant Highlight

Offers striking contrast, perfect for drawing attention to key interactive elements or data points.

#000033 · #0000FF · #0000CC

Clear Progression

Provides a smooth visual gradient, excellent for conveying steps, progress, or data tiers.

#000066 · #000099 · #0000CC

CSS variables

:root {
  --deep-ocean-abyss-7-1: #000033;
  --deep-ocean-abyss-7-2: #000066;
  --deep-ocean-abyss-7-3: #000099;
  --deep-ocean-abyss-7-4: #0000CC;
  --deep-ocean-abyss-7-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-abyss-7": {
        1: "#000033",
        2: "#000066",
        3: "#000099",
        4: "#0000CC",
        5: "#0000FF",
      }
    }
  }
}

Related searches

monochromatic blue palettepure blue color schemedeep blue gradientscientific blue colorsminimalist blue design

Palette colors

Hex values

Color 1#000033
·
Color 2#000066
·
Color 3#000099
·
Color 4#0000CC
·
Color 5#0000FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.4:1Fail
1.8:1Fail
2.3:1Fail
2
1.1:1Fail
1.2:1Fail
1.6:1Fail
2.1:1Fail
3
1.4:1Fail
1.2:1Fail
1.3:1Fail
1.7:1Fail
4
1.8:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
5
2.3:1Fail
2.1:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Deep Ocean Abyss

View all monochrome
Indigo Ocean Depths
Neptune's Embrace
Indigo Current Flow
Charcoal Ember Haze
City Twilight Mist
Deep Azure Plunge