Back to palettes

Palette

Deep Ocean Abyss

A descent into the darkest blues, portraying the profound, unexplored depths of the ocean abyss.

darkdark5 colors
More dark 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 (default version) plunges into the darkest blues, portraying the profound, unexplored depths of the ocean. This monochromatic collection, ranging from #000033 to #0000FF, provides a powerful and consistent blue spectrum. It's ideal for designs that aim to evoke mystery, strength, and a classic deep-sea aesthetic. Designers and developers will find this palette excellent for creating impactful branding, clear digital interfaces, or compelling data visualizations where a strong, pure blue presence is desired, offering both depth and clarity.

Best used for

  • Brand identity and logos
  • Digital interfaces and dashboards
  • Data visualization and infographics
  • Educational content and presentations
  • Tech company branding
  • Abyssal-themed digital art

Suggested color roles

primary

Utilize #000033 as the deepest, anchoring blue for primary branding elements and foundational sections.

secondary

Employ #000066 for supportive content areas, adding a rich, consistent layer of depth.

accent

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

background

Set #000033 as a dark, profound background to create an immersive and sophisticated canvas.

text

For optimal legibility 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

Abyssal Depth

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

#000033 · #000066 · #000099

Electrifying Contrast

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

#000033 · #0000FF · #0000CC

Gradual Illumination

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

#000066 · #0000CC · #0000FF

CSS variables

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

Tailwind config

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

Related searches

deep blue brandingabyssal blue colorsmystery blue palettebold blue schemedark blue UI

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 dark
Abyssal Trench Mystery
Abyssal Trench Mystery
Bioluminescent Deep Trench
Deep Fathom Mystery
Deep Ocean Abyss
Deep Ocean Caverns