Palette

Abyssal Depths

Plunge into the mysterious and profound blues of the ocean's abyssal zones, full of unexplored grandeur.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyssal Depths 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 Abyssal Depths.

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

Data visualization

#000080#191970#0000CD#4169E1#6495ED

Palette guide

How to use Abyssal Depths

Overview

Plunge into the mysterious and profound blues of the Abyssal Depths palette, full of unexplored grandeur. This collection, from the deep #000080 to the vibrant #6495ED, offers a rich spectrum of blues, perfect for conveying trust, professionalism, and depth. The foundational #191970 and #0000CD provide a solid, sophisticated base, while the royal #4169E1 adds a touch of regal elegance. Designers can harness this palette for projects requiring a sense of authority and calm. Developers will find the clear progression from dark to light, especially with the bright #6495ED, excellent for establishing strong visual hierarchies and intuitive user flows in interfaces and data visualizations.

Best used for

Corporate and financial branding
Educational technology platforms
Government or official websites
Professional services marketing
Luxury product packaging
Abstract art and digital installations

Suggested color roles

primary

Use #191970 as a strong, reliable primary color for main content areas and important structural elements.

secondary

Employ #0000CD for secondary information, subheadings, or interactive states, offering a slightly brighter, engaging blue.

accent

Highlight key features, calls to action, or data points with #4169E1 to draw attention with a noble touch.

background

Establish a deep, stable foundation with #000080, ideal for dark themes or strong visual anchors.

text

For highlight text or very light accents, use #6495ED. For primary text, a crisp white or light grey is recommended against the darker blues.

Accessibility notes

Ensure #6495ED or white provides sufficient contrast for text against #000080, #191970, and #0000CD.
The contrast between adjacent shades like #191970 and #000080 might be too low for small text; use for larger elements.
When using #4169E1 for text, ensure its background is sufficiently dark (e.g., #000080) for good readability.
Always test text legibility for all pairings, especially with the mid-tones to ensure accessibility compliance.

Recommended combinations

Navy Grandeur

Ideal for a deep background with primary content and a luminous, highly readable text or highlight.

#000080 · #191970 · #6495ED

Royal Flow

Creates a harmonious blue gradient, perfect for layered UI components, charts, or subtle background animations.

#191970 · #0000CD · #4169E1

Depth Accent

Excellent for hero sections, combining a deep base with vibrant and luminous accents for dynamic visuals.

#000080 · #4169E1 · #6495ED

CSS variables

:root {
  --abyssal-depths-1: #000080;
  --abyssal-depths-2: #191970;
  --abyssal-depths-3: #0000CD;
  --abyssal-depths-4: #4169E1;
  --abyssal-depths-5: #6495ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-depths": {
        1: "#000080",
        2: "#191970",
        3: "#0000CD",
        4: "#4169E1",
        5: "#6495ED",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#191970

Color 3#0000CD

Color 4#4169E1

Color 5#6495ED

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

3.3:1AA18

5.4:1AA

1.1:1Fail

1.3:1Fail

3.1:1AA18

5:1AA

1.4:1Fail

1.3:1Fail

2.3:1Fail

3.8:1AA18

3.3:1AA18

3.1:1AA18

2.3:1Fail

1.6:1Fail

5.4:1AA

5:1AA

3.8:1AA18

1.6:1Fail

Similar palettes

More like Abyssal Depths

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow