Back to palettes

Palette

Deep Ocean Abyssal

Explores the profound and mysterious darkness found in the deepest, uncharted parts of the ocean.

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

#0A0A0A#1C2833#212F3C#283747#34495E

Palette guide

How to use Deep Ocean Abyssal

Overview

The Deep Ocean Abyssal palette explores the profound darkness found in the deepest, uncharted parts of the ocean, offering a strong, understated, and modern aesthetic. Ranging from the near-black #0A0A0A to the deep charcoal blues like #1C2833 and #212F3C, and culminating in the subtle blue-grey of #34495E, this palette is ideal for designs requiring a powerful, sophisticated, and minimalist dark theme. Designers and developers can leverage its nuanced dark tones to create impactful dark mode UIs, luxury tech branding, or any project that benefits from a robust and elegant low-light environment.

Best used for

  • Dark mode UI/UX design
  • Luxury tech product branding
  • Cybersecurity platform interfaces
  • Film noir or cinematic themes
  • Architectural visualization
  • High-end automotive websites

Suggested color roles

primary

Utilize #0A0A0A as the absolute deepest, near-black foundation for immersive backgrounds and main sections.

secondary

Employ #1C2833 for supportive elements, adding a rich, dark blue-grey layer that provides depth without starkness.

accent

Apply #34495E as a subtle blue-grey accent for highlights, interactive states, or decorative details, providing a gentle contrast.

background

Set #0A0A0A as the primary background to create an immersive, very dark canvas, ideal for dark mode applications.

text

For optimal readability on these very dark backgrounds, use a crisp white or a very light grey (e.g., #F0F0F0).

Accessibility notes

  • Ensure white or very light grey text has high contrast against all palette colors for optimal readability.
  • Avoid using mid-tone blues like #283747 for small text on darker backgrounds without careful contrast checks.
  • For interactive elements, use a distinct visual cue like a white outline or a brighter, contrasting text color.
  • Prioritize clear, simple typography and generous line spacing to maintain legibility in this dark palette.

Recommended combinations

Dark Mode Base

Forms a robust, layered foundation for dark mode interfaces, providing depth and sophistication.

#0A0A0A · #1C2833 · #212F3C

Subtle Depth

Offers a smooth, gradual progression of dark blue-greys, ideal for complex data displays or subtle gradients.

#1C2833 · #283747 · #34495E

Modern Contrast

Provides a clean, understated contrast, perfect for highlighting elements against a near-black backdrop.

#0A0A0A · #34495E · #212F3C

CSS variables

:root {
  --deep-ocean-abyssal-1: #0A0A0A;
  --deep-ocean-abyssal-2: #1C2833;
  --deep-ocean-abyssal-3: #212F3C;
  --deep-ocean-abyssal-4: #283747;
  --deep-ocean-abyssal-5: #34495E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-abyssal": {
        1: "#0A0A0A",
        2: "#1C2833",
        3: "#212F3C",
        4: "#283747",
        5: "#34495E",
      }
    }
  }
}

Related searches

dark grey blue palettenear black colorsdeep charcoal bluemodern dark modesophisticated black blue

Palette colors

Hex values

Color 1#0A0A0A
·
Color 2#1C2833
·
Color 3#212F3C
·
Color 4#283747
·
Color 5#34495E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.4:1Fail
1.6:1Fail
2.1:1Fail
2
1.3:1Fail
1.1:1Fail
1.2:1Fail
1.6:1Fail
3
1.4:1Fail
1.1:1Fail
1.1:1Fail
1.5:1Fail
4
1.6:1Fail
1.2:1Fail
1.1:1Fail
1.3:1Fail
5
2.1:1Fail
1.6:1Fail
1.5:1Fail
1.3:1Fail

Similar palettes

More like Deep Ocean Abyssal

View all dark
Abyss Gaze
Abyss Glow Deep
Abyssal Bioluminescence
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths