Palette

Deep Sea Challenger

Explores the mysterious dark blues and shimmering depths found in the farthest reaches of the ocean.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Sea Challenger 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 Sea Challenger.

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

Data visualization

#051A2C#1A3B5C#3A6A9C#6FA6D2#A8CDE8

Palette guide

How to use Deep Sea Challenger

Overview

The Deep Sea Challenger palette explores the mysterious dark blues and shimmering depths found in the farthest reaches of the ocean. Beginning with the profound #051A2C, it transitions through a beautiful gradient of oceanic blues: #1A3B5C, #3A6A9C, and #6FA6D2, culminating in the ethereal #A8CDE8. This palette perfectly captures the essence of deep-sea exploration, from crushing darkness to moments of discovery and light. It's incredibly versatile for creating designs that feel both profound and clear, making it ideal for conveying trust, depth, and a sense of calm authority.

Best used for

Scientific research websites
Educational documentaries
Marine-themed video games
Luxury brand websites (serene)
Corporate identity (stability, depth)
Environmental conservation initiatives

Suggested color roles

primary

#051A2C (The deepest, almost black-blue, establishing a strong, mysterious foundation for backgrounds.)

secondary

#1A3B5C (A rich, deep blue for secondary content areas, panels, or layered backgrounds.)

accent

#A8CDE8 (The brightest, most ethereal blue, perfect for highlights, active states, or calls to action, mimicking distant light.)

background

#051A2C (Provides an immersive, dark, and professional backdrop, making lighter elements stand out.)

text

#A8CDE8 (Excellent for primary text on dark backgrounds, ensuring clear readability and a soft glow.)

Accessibility notes

#A8CDE8 provides strong contrast against #051A2C, #1A3B5C, and #3A6A9C, making it suitable for body text and interactive elements.
Ensure #6FA6D2 has sufficient contrast when used as text on #051A2C or #1A3B5C.
Avoid using the darkest blues for text on other dark blues to prevent readability issues.
The natural gradient from dark to light aids in creating an accessible visual hierarchy.

Recommended combinations

Challenger Depths

Layered dark blues for backgrounds and structural elements, conveying immense depth.

#051A2C · #1A3B5C · #3A6A9C

Oceanic Clarity

Lighter blues for headers, cards, or interactive components, mimicking light penetration.

#3A6A9C · #6FA6D2 · #A8CDE8

Discovery Contrast

Strong contrast for clear readability and highlighting key information, evoking discovery.

#051A2C · #A8CDE8 · #6FA6D2

CSS variables

:root {
  --deep-sea-challenger-1: #051A2C;
  --deep-sea-challenger-2: #1A3B5C;
  --deep-sea-challenger-3: #3A6A9C;
  --deep-sea-challenger-4: #6FA6D2;
  --deep-sea-challenger-5: #A8CDE8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-challenger": {
        1: "#051A2C",
        2: "#1A3B5C",
        3: "#3A6A9C",
        4: "#6FA6D2",
        5: "#A8CDE8",
      }
    }
  }
}

Hex values

Color 1#051A2C

Color 2#1A3B5C

Color 3#3A6A9C

Color 4#6FA6D2

Color 5#A8CDE8

Accessibility

Contrast checker

1.5:1Fail

3.1:1AA18

6.8:1AA

10.6:1AAA

1.5:1Fail

2:1Fail

4.4:1AA18

6.9:1AA

3.1:1AA18

2:1Fail

2.2:1Fail

3.4:1AA18