Palette

Midnight Sapphire Depth

Plunge into the mysterious and elegant depths of a sapphire ocean at midnight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Sapphire Depth 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 Midnight Sapphire Depth.

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

Data visualization

#0A0A2A#1E3F66#3E7CB1#7FB0DA#C0DFFD

Palette guide

How to use Midnight Sapphire Depth

Overview

The "Midnight Sapphire Depth" palette is a captivating journey into the profound elegance of deep blues, reminiscent of a mysterious ocean at night. Anchored by an almost black sapphire (#0A0A2A), it transitions through a rich midnight blue (#1E3F66) and a vibrant ocean blue (#3E7CB1). The palette brightens with a serene sky blue (#7FB0DA) and culminates in a delicate, airy light blue (#C0DFFD). This harmonious progression of blues offers designers and developers a versatile tool for creating designs that exude sophistication, trust, and a sense of calm, making it ideal for corporate, tech, or luxury applications.

Best used for

Corporate branding and professional websites
Tech product interfaces or dashboards
Maritime or oceanic themed designs
Luxury goods marketing, especially jewelry
Financial services web applications
Elegant architectural visualizations

Suggested color roles

primary

#0A0A2A serves as a powerful dark base for backgrounds, headers, or foundational UI elements, conveying depth and stability.

secondary

#1E3F66 is perfect for secondary navigation, card backgrounds, or information panels, providing a sophisticated layer.

accent

#3E7CB1 offers a vibrant, trustworthy accent for call-to-actions, active states, or key data points, drawing attention effectively.

background

#C0DFFD provides a clean, expansive canvas for content, ensuring high readability and a fresh, open feel.

text

For dark backgrounds like #0A0A2A, use #C0DFFD or white. For light backgrounds like #C0DFFD, use #0A0A2A or a dark navy for optimal legibility.

Accessibility notes

Ensure #0A0A2A text on #C0DFFD background meets WCAG AAA contrast for body text.
#1E3F66 provides good contrast on #C0DFFD for headings and larger text.
Be cautious using #7FB0DA for small text on #C0DFFD; it may lack sufficient contrast.
For interactive elements, ensure the accent color #3E7CB1 has adequate contrast against its background.

Recommended combinations

Deep Ocean

Creates a strong, professional dark theme suitable for corporate websites or sophisticated applications.

#0A0A2A · #1E3F66 · #3E7CB1

Sky & Sea

Ideal for light-themed interfaces, evoking a sense of calm and clarity, perfect for informational sites.

#3E7CB1 · #7FB0DA · #C0DFFD

Elegant Gradient

Excellent for subtle visual transitions, banners, or background elements that require a smooth, modern look.

#1E3F66 · #3E7CB1 · #7FB0DA

CSS variables

:root {
  --midnight-sapphire-depth-1: #0A0A2A;
  --midnight-sapphire-depth-2: #1E3F66;
  --midnight-sapphire-depth-3: #3E7CB1;
  --midnight-sapphire-depth-4: #7FB0DA;
  --midnight-sapphire-depth-5: #C0DFFD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-sapphire-depth": {
        1: "#0A0A2A",
        2: "#1E3F66",
        3: "#3E7CB1",
        4: "#7FB0DA",
        5: "#C0DFFD",
      }
    }
  }
}

Hex values

Color 1#0A0A2A

Color 2#1E3F66

Color 3#3E7CB1

Color 4#7FB0DA

Color 5#C0DFFD

Accessibility

Contrast checker

1.8:1Fail

4.3:1AA18

8.4:1AAA

14:1AAA

1.8:1Fail

2.4:1Fail

4.7:1AA

7.8:1AAA

4.3:1AA18

2.4:1Fail

1.9:1Fail

3.2:1AA18

8.4:1AAA

4.7:1AA

1.9:1Fail

1.7:1Fail

14:1AAA

7.8:1AAA

3.2:1AA18

1.7:1Fail

Similar palettes

More like Midnight Sapphire Depth

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow