Back to palettes

Palette

Deep Sapphire Abyss

Profound blues plunge into a midnight black, reflecting the unfathomable depths of an oceanic trench.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Sapphire 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 Sapphire Abyss.

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

Data visualization

#080808#1B2D46#000080#191970#4169E1

Palette guide

How to use Deep Sapphire Abyss

Overview

The Deep Sapphire Abyss palette plunges profound blues into a midnight black, reflecting the unfathomable depths of an oceanic trench. Ranging from the stark #080808 to the electric #4169E1, this palette is ideal for designs that demand drama, mystery, and a sense of powerful elegance. Designers can craft immersive digital experiences, captivating branding, and impactful UI themes. Developers will find these hex codes perfect for projects related to high-tech, luxury, or any application that benefits from a dark, sophisticated, and visually striking aesthetic. The interplay between #1B2D46 and #000080 allows for dynamic layering and bold statements.

Best used for

  • High-tech cybersecurity interfaces
  • Luxury automotive or watch brands
  • Science fiction game environments
  • Dark mode UI for professional applications
  • Abstract art platforms
  • Event branding for exclusive, high-profile gatherings

Suggested color roles

primary

Utilize #1B2D46 as the main background or primary content color, providing a deep, sophisticated, and stable foundation.

secondary

Apply #000080 for secondary content areas, panels, or navigation, offering a rich visual distinction and layered effect.

accent

Introduce #4169E1 as a powerful, luminous accent for calls-to-action, key features, or interactive elements, ensuring maximum impact.

background

The deepest hue, #080808, is excellent for expansive backgrounds or header sections, establishing an immediate tone of profound abyss.

text

For optimal readability, use a crisp white or very light gray. #4169E1 can be used for larger headings or highlights on the darkest backgrounds.

Accessibility notes

  • Ensure very high contrast for text on #080808, #1B2D46, #000080, and #191970 by using light text (e.g., pure white or #4169E1).
  • The lightest color, #4169E1, provides excellent contrast for primary text against all darker blues and black in the palette.
  • Avoid using adjacent dark blues/black for small text or critical UI elements in close proximity without careful contrast checks.
  • Always test color combinations with accessibility tools to ensure WCAG compliance for readability.

Recommended combinations

Abyssal Layers

Ideal for creating a layered, dark background or card system, conveying profound depth and mystery.

#080808 · #1B2D46 · #000080

Sapphire Flash

Use #1B2D46 as a base, with #191970 for secondary elements and #4169E1 for electric, jewel-like highlights or interactive states.

#1B2D46 · #191970 · #4169E1

Dramatic Contrast

Excellent for a dark, dramatic background with a clear, vibrant accent and a strong mid-tone for supporting details.

#080808 · #4169E1 · #000080

CSS variables

:root {
  --deep-sapphire-abyss-1: #080808;
  --deep-sapphire-abyss-2: #1B2D46;
  --deep-sapphire-abyss-3: #000080;
  --deep-sapphire-abyss-4: #191970;
  --deep-sapphire-abyss-5: #4169E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sapphire-abyss": {
        1: "#080808",
        2: "#1B2D46",
        3: "#000080",
        4: "#191970",
        5: "#4169E1",
      }
    }
  }
}

Related searches

deep sapphire color palettemidnight blue hex codesdark elegant blue UIabyss color schemeelectric blue and black

Palette colors

Hex values

Color 1#080808
·
Color 2#1B2D46
·
Color 3#000080
·
Color 4#191970
·
Color 5#4169E1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.3:1Fail
1.3:1Fail
4.1:1AA18
2
1.4:1Fail
1.2:1Fail
1.1:1Fail
2.9:1Fail
3
1.3:1Fail
1.2:1Fail
1.1:1Fail
3.3:1AA18
4
1.3:1Fail
1.1:1Fail
1.1:1Fail
3.1:1AA18
5
4.1:1AA18
2.9:1Fail
3.3:1AA18
3.1:1AA18

Similar palettes

More like Deep Sapphire Abyss

View all dark
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Forms
Abyssal Coral Glow
Abyssal Depths
Abyssal Glow Wonders