Back to palettes

Palette

Deep Ocean Abyssal

Explore the mysterious, inky depths where light barely touches, full of quiet grandeur.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Ocean Abyssal 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 Ocean Abyssal.

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

Data visualization

#0A1128#112A46#1C3C56#275C6C#0D0C1D

Palette guide

How to use Deep Ocean Abyssal

Overview

The Deep Ocean Abyssal palette (version 2) explores mysterious, inky depths where light barely touches, offering a quiet grandeur with its sophisticated blend of deep blues and subtle teal undertones. From the profound #0A1128 and #0D0C1D to the slightly lighter #112A46 and #1C3C56, culminating in the muted teal-blue of #275C6C, this palette is elegant and versatile. Designers and developers can use it to create dark mode UIs, luxury branding, or any project requiring a refined, mysterious, and visually rich dark aesthetic that avoids stark black.

Best used for

  • Luxury brand websites and apps
  • High-end tech product interfaces
  • Conceptual art and digital illustration
  • Editorial design with a dark theme
  • Cinematic title sequences
  • Sophisticated dark mode UI

Suggested color roles

primary

Utilize #0A1128 as the primary deep blue, providing a stable, mysterious anchor for main content.

secondary

Employ #112A46 for supportive elements, creating depth and a rich, dark blue foundation.

accent

Apply #275C6C as a subtle, muted teal-blue accent for highlights, interactive states, or decorative details, adding a touch of quiet glow.

background

Set #0D0C1D as a very dark, almost black background to create an immersive and elegant canvas.

text

For optimal readability on these dark backgrounds, use a crisp white or a very light grey (e.g., #F0F0F0). #275C6C can be used for subtle headings.

Accessibility notes

  • Ensure white or very light grey text has high contrast against all palette colors for readability.
  • Avoid using mid-tone blues like #1C3C56 for small text on darker backgrounds without careful contrast checks.
  • For interactive elements, use a distinct visual cue like a white outline or a lighter shade of #275C6C.
  • Prioritize clear, simple typography when working with this dark, subtle palette to maintain legibility.

Recommended combinations

Elegant Depth

Creates a sophisticated, layered dark aesthetic, ideal for immersive backgrounds.

#0A1128 · #112A46 · #1C3C56

Muted Accent

Provides a subtle highlight against a very dark base, suitable for refined UI elements.

#0D0C1D · #275C6C · #1C3C56

Sophisticated Dark

Balances deep blue with a hint of teal, perfect for a modern and mysterious feel.

#112A46 · #0A1128 · #275C6C

CSS variables

:root {
  --deep-ocean-abyssal-2-1: #0A1128;
  --deep-ocean-abyssal-2-2: #112A46;
  --deep-ocean-abyssal-2-3: #1C3C56;
  --deep-ocean-abyssal-2-4: #275C6C;
  --deep-ocean-abyssal-2-5: #0D0C1D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-abyssal-2": {
        1: "#0A1128",
        2: "#112A46",
        3: "#1C3C56",
        4: "#275C6C",
        5: "#0D0C1D",
      }
    }
  }
}

Related searches

elegant deep bluedark mode blue palettesophisticated ocean colorsmuted abyssal themeluxury dark blue

Palette colors

Hex values

Color 1#0A1128
·
Color 2#112A46
·
Color 3#1C3C56
·
Color 4#275C6C
·
Color 5#0D0C1D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
2.5:1Fail
1:1Fail
2
1.3:1Fail
1.3:1Fail
2:1Fail
1.3:1Fail
3
1.6:1Fail
1.3:1Fail
1.5:1Fail
1.7:1Fail
4
2.5:1Fail
2:1Fail
1.5:1Fail
2.6:1Fail
5
1:1Fail
1.3:1Fail
1.7:1Fail
2.6:1Fail

Similar palettes

More like Deep Ocean Abyssal

View all dark
Abyssal Trench Mystery
Bioluminescent Deep Trench
Dark Sea Onyx
Deep Ocean Caverns
Deep Sea Explorer
Deep Sea Hydrothermal