Back to palettes

Palette

Abyss Gaze

Explores the profound and mysterious darkness of the deepest ocean trenches, veiled in enigmatic blues.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000F2F#001F4F#003F7F#005FBF#002888

Palette guide

How to use Abyss Gaze

Overview

The Abyss Gaze palette explores the profound and mysterious darkness of the deepest ocean trenches, veiled in enigmatic blues. Featuring a near-black Midnight Blue (#000F2F), a deep Navy Blue (#001F4F), a rich Dark Blue (#003F7F), a vibrant Medium Blue (#005FBF), and a muted Royal Blue (#002888), this collection offers a captivating gradient of cool, dark tones. Designers and developers can leverage these deep blues to create immersive user interfaces, sophisticated branding, or evocative digital art. Its focus on subtle tonal shifts within the blue spectrum makes it ideal for projects that aim to convey mystery, depth, and a sense of calm, ensuring a cohesive and visually intriguing experience across various applications.

Best used for

  • Dark mode UI/UX designs for apps and websites
  • Sci-fi or fantasy-themed digital art
  • Luxury branding and sophisticated identities
  • Environmental documentaries and ocean conservation media
  • Abstract space or underwater graphics
  • Mystery game interfaces and thematic design

Suggested color roles

primary

#000F2F (Midnight Blue) - Use this deepest blue for dominant backgrounds, large sections, or primary text to establish profound depth and mystery.

secondary

#001F4F (Navy Blue) - Excellent for secondary content areas, prominent navigation, or to provide a rich, slightly lighter tone for hierarchy.

accent

#005FBF (Medium Blue) - Deploy this vibrant blue sparingly for highlights, interactive states, or small details that need to truly pop and guide user attention.

background

Utilize #000F2F (Midnight Blue) for an immersive, dark backdrop or #001F4F (Navy Blue) for a slightly less intense, yet deep and mysterious canvas.

text

For optimal readability, use crisp white (#FFFFFF) or a very light gray (#F0F0F0) on darker backgrounds, and #005FBF (Medium Blue) for highlights on very dark areas.

Accessibility notes

  • Ensure sufficient contrast when using lighter blues like #005FBF for text on mid-tone blue backgrounds; always test for readability.
  • Always verify contrast ratios for all text and interactive elements to meet WCAG AA or AAA standards, especially for small text on dark backgrounds.
  • Be mindful that subtle tonal shifts between #000F2F and #001F4F might not provide enough distinction for all users; use other cues for interactive elements.
  • Avoid using #002888 (Royal Blue) for small text on #001F4F (Navy Blue) backgrounds, as their proximity in lightness can hinder readability.

Recommended combinations

Deep Gradient

Ideal for creating layered backgrounds, immersive hero sections, or a strong, harmonious base for dark-themed designs.

#000F2F · #001F4F · #003F7F

Abyssal Glow

Effective for highlights, interactive elements, or to represent bioluminescent effects against a dark, mysterious backdrop.

#005FBF · #002888 · #000F2F

Subtle Depth

Perfect for data visualizations, progress bars, or any element requiring a smooth, flowing transition of blues in a dark context.

#001F4F · #003F7F · #002888

CSS variables

:root {
  --abyss-gaze-1: #000F2F;
  --abyss-gaze-2: #001F4F;
  --abyss-gaze-3: #003F7F;
  --abyss-gaze-4: #005FBF;
  --abyss-gaze-5: #002888;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyss-gaze": {
        1: "#000F2F",
        2: "#001F4F",
        3: "#003F7F",
        4: "#005FBF",
        5: "#002888",
      }
    }
  }
}

Related searches

deep blue color palettedark mysterious colorsocean abyss design schemedark mode UI bluesmidnight blue gradient

Palette colors

Hex values

Color 1#000F2F
·
Color 2#001F4F
·
Color 3#003F7F
·
Color 4#005FBF
·
Color 5#002888
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.8:1Fail
3.1:1AA18
1.5:1Fail
2
1.2:1Fail
1.5:1Fail
2.6:1Fail
1.3:1Fail
3
1.8:1Fail
1.5:1Fail
1.7:1Fail
1.2:1Fail
4
3.1:1AA18
2.6:1Fail
1.7:1Fail
2:1Fail
5
1.5:1Fail
1.3:1Fail
1.2:1Fail
2:1Fail

Similar palettes

More like Abyss Gaze

View all dark
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Rift Shimmer
Abyssal Trench Dive
Abyssal Trench Flora