Back to palettes

Palette

Sapphire Ocean Trench

Intense, deep blues reflecting the profound, enigmatic depths of the ocean's sapphire trenches.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sapphire Ocean Trench 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 Sapphire Ocean Trench.

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

Data visualization

#000080#0000CD#0000FF#00004C#0000B0

Palette guide

How to use Sapphire Ocean Trench

Overview

The Sapphire Ocean Trench palette plunges into the profound and intense depths of the ocean, featuring a powerful range of deep blues. Dominated by true navies like #000080 and #00004C, with striking accents of royal blue like #0000CD and the vivid #0000FF, this collection is both dramatic and authoritative. Designers can create impactful visuals that convey seriousness and depth, perfect for projects requiring a strong, unwavering presence. Developers will find these blues excellent for establishing clear visual hierarchies and creating interfaces with a commanding aesthetic. This palette is ideal for conveying strength, mystery, and deep-seated reliability.

Best used for

  • Cybersecurity and data protection branding
  • Legal and governmental agency websites
  • Deep-sea exploration and research organizations
  • Luxury watch or jewelry product showcases
  • High-stakes corporate finance platforms
  • Science fiction or mystery novel covers

Suggested color roles

primary

#000080 - A classic, deep navy that provides an unshakeable foundation, conveying authority and stability. Excellent for main branding or large background areas.

secondary

#0000CD - A rich royal blue that offers a strong complement, suitable for important headings, navigation, or significant data points.

accent

#0000FF - A vibrant, pure blue that provides a sharp, energetic contrast. Perfect for crucial calls-to-action, alerts, or interactive elements that demand immediate attention.

background

#00004C - An extremely dark, almost black-blue, ideal for creating an immersive, profound backdrop that makes lighter elements glow with intensity.

text

Pure white or a very light gray is essential for text on these deep blues, ensuring maximum readability and accessibility. #0000FF is too bright for most text.

Accessibility notes

  • Pure white text is crucial for readability against all colors in this palette (#000080, #0000CD, #0000FF, #00004C, #0000B0).
  • The vibrant #0000FF should be used sparingly for text, primarily for large headlines or accents, always with strong contrast.
  • Ensure interactive elements have distinct hover/focus states, as the palette is monochromatic and relies on brightness differences.
  • High contrast is inherent with white text on these blues, but always double-check against WCAG guidelines.

Recommended combinations

Trench Depth

Creates a dramatic, high-contrast pairing for impactful headlines or alerts on a dark background.

#00004C · #0000FF · #000080

Ocean Layers

Excellent for subtle gradients or layered graphical elements, adding depth to dark interfaces.

#000080 · #0000CD · #0000B0

Vivid Command

Use #00004C as background, #000080 for main content, and #0000FF for critical calls-to-action.

#00004C · #000080 · #0000FF

CSS variables

:root {
  --sapphire-ocean-trench-1: #000080;
  --sapphire-ocean-trench-2: #0000CD;
  --sapphire-ocean-trench-3: #0000FF;
  --sapphire-ocean-trench-4: #00004C;
  --sapphire-ocean-trench-5: #0000B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-ocean-trench": {
        1: "#000080",
        2: "#0000CD",
        3: "#0000FF",
        4: "#00004C",
        5: "#0000B0",
      }
    }
  }
}

Related searches

deep navy color schemeocean trench bluespowerful blue brandingdark authoritative palettevivid royal blue accents

Palette colors

Hex values

Color 1#000080
·
Color 2#0000CD
·
Color 3#0000FF
·
Color 4#00004C
·
Color 5#0000B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
1.2:1Fail
1.2:1Fail
2
1.4:1Fail
1.3:1Fail
1.7:1Fail
1.2:1Fail
3
1.9:1Fail
1.3:1Fail
2.2:1Fail
1.5:1Fail
4
1.2:1Fail
1.7:1Fail
2.2:1Fail
1.5:1Fail
5
1.2:1Fail
1.2:1Fail
1.5:1Fail
1.5:1Fail

Similar palettes

More like Sapphire Ocean Trench

View all cool
Abyssal Bioluminescence
Abyssal Current Glide
Arctic Ocean Depths
Bioluminescent Abyss
Cobalt Abyss Depths
Cobalt Arctic Depth