Back to palettes

Palette

Abyssal Rift Shimmer

Explores the profound depths of the ocean, where sunlight barely reaches, illuminated by faint bioluminescent glows.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyssal Rift Shimmer 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 Abyssal Rift Shimmer.

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

Data visualization

#0A1C2B#1C3E5A#3A637C#5C889C#B2D0E0

Palette guide

How to use Abyssal Rift Shimmer

Overview

The Abyssal Rift Shimmer palette explores the profound depths of the ocean, where sunlight barely reaches, yet faint bioluminescent glows illuminate. This dark and mysterious collection features a striking progression from the deep #0A1C2B (Dark Teal Blue) and #1C3E5A (Prussian Blue) to the more luminous #3A637C (Steel Blue) and #5C889C (Cadet Blue), culminating in the ethereal #B2D0E0 (Light Blue Grey). Designers can leverage this palette to evoke a sense of depth, tranquility, and subtle wonder, perfect for sophisticated dark mode interfaces, scientific visualizations, or serene digital art. Developers will find these blues excellent for establishing visual hierarchy and creating immersive backgrounds, ensuring an elegant aesthetic that hints at hidden beauty in the depths.

Best used for

  • Sophisticated dark mode UI
  • Environmental research platforms
  • Serene digital art and illustration
  • Luxury brand presentations
  • Documentary film color grading
  • Deep sea exploration themes

Suggested color roles

primary

#0A1C2B (Dark Teal Blue) - The deepest shade, ideal for main backgrounds, navigation, or strong foundational elements.

secondary

#1C3E5A (Prussian Blue) - A slightly lighter, yet still profound, blue for secondary panels, card backgrounds, or subtle dividing lines.

accent

#B2D0E0 (Light Blue Grey) - This soft, luminous blue serves as a gentle accent for interactive elements, hover states, or to highlight key data points.

background

#0A1C2B (Dark Teal Blue) - Creates an immersive, almost black background that allows the lighter blues to subtly glow.

text

White (#FFFFFF) or a very light grey (#F0F0F0) provides optimal contrast for readability against the darker blues. #B2D0E0 can be used for subtle headings on the darkest backgrounds.

Accessibility notes

  • Ensure all text, especially on the darkest backgrounds like #0A1C2B, uses white or very light grey for high contrast.
  • The lighter blues, #5C889C and #B2D0E0, can be used for text on the deepest blues, but always verify WCAG compliance.
  • Avoid using #3A637C for small text elements on backgrounds darker than itself, as contrast may be insufficient.
  • Use #B2D0E0 sparingly as an accent to guide the eye without overwhelming the serene dark theme.

Recommended combinations

Deep Rift

Ideal for creating layered dark backgrounds, deep content containers, or establishing a strong, mysterious base in dark themes.

#0A1C2B · #1C3E5A · #3A637C

Subtle Shimmer

Excellent for highlighting active states, data visualizations, or creating a subtle luminous effect in UI components.

#1C3E5A · #5C889C · #B2D0E0

Abyssal Gradient

Perfect for smooth background transitions, hero sections, or digital art that needs to convey profound depth and an ethereal glow.

#0A1C2B · #3A637C · #B2D0E0

CSS variables

:root {
  --abyssal-rift-shimmer-1: #0A1C2B;
  --abyssal-rift-shimmer-2: #1C3E5A;
  --abyssal-rift-shimmer-3: #3A637C;
  --abyssal-rift-shimmer-4: #5C889C;
  --abyssal-rift-shimmer-5: #B2D0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-rift-shimmer": {
        1: "#0A1C2B",
        2: "#1C3E5A",
        3: "#3A637C",
        4: "#5C889C",
        5: "#B2D0E0",
      }
    }
  }
}

Related searches

deep blue bioluminescent palettedark ocean rift colorssubtle shimmer thememysterious blue gradientserene dark mode design

Palette colors

Hex values

Color 1#0A1C2B
·
Color 2#1C3E5A
·
Color 3#3A637C
·
Color 4#5C889C
·
Color 5#B2D0E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.5:1AA18
10.7:1AAA
2
1.6:1Fail
1.7:1Fail
2.9:1Fail
6.9:1AA
3
2.7:1Fail
1.7:1Fail
1.7:1Fail
4:1AA18
4
4.5:1AA18
2.9:1Fail
1.7:1Fail
2.4:1Fail
5
10.7:1AAA
6.9:1AA
4:1AA18
2.4:1Fail

Similar palettes

More like Abyssal Rift Shimmer

View all dark
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Trench Dive
Abyssal Trench Flora