Back to palettes

Palette

Dark Sea Onyx

Mysteries of the deep sea captured in a collection of dark, profound, and oceanic greys.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dark Sea Onyx 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 Dark Sea Onyx.

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

Data visualization

#2A2F36#3E4750#55626F#708090#A9B0B7

Palette guide

How to use Dark Sea Onyx

Overview

The Dark Sea Onyx palette captures the profound mysteries of the deep sea in a collection of dark, oceanic grays and muted blues. Ranging from the deep #2A2F36 to the lighter #A9B0B7, this palette offers a sophisticated and calming gradient, perfect for designs that aim for a serene yet enigmatic aesthetic. It's an excellent choice for maritime branding, tech interfaces, or any project that seeks to evoke tranquility and depth. Designers can leverage its consistent blue-gray tones for immersive backgrounds, while developers will find it ideal for creating dark mode themes that are both visually rich and incredibly soothing, promoting a sense of calm and professionalism.

Best used for

  • Marine conservation websites
  • Tech company branding (e.g., data, cloud services)
  • Dark mode UI for productivity apps
  • Luxury yacht or travel branding
  • Underwater photography showcases
  • Scientific research platforms

Suggested color roles

primary

#2A2F36 - A deep, dark blue-gray that provides a strong, stable foundation for primary elements, large sections, or brand identity.

secondary

#3E4750 - A balanced dark blue-gray, offering a harmonious complement, suitable for secondary content blocks, navigation, or as a subtle contrasting panel.

accent

#708090 - A mid-tone slate gray, perfect for subtle highlights, interactive states, or delicate graphical details that need to stand out without being too bright.

background

#2A2F36 - This deep blue-gray doubles as an excellent immersive background, setting a mysterious and sophisticated tone.

text

#55626F - A legible, muted blue-gray that works well for body text on lighter backgrounds within the palette. For optimal readability on the darkest shades, consider a very light gray (e.g., #F0F0F0) or even #A9B0B7.

Accessibility notes

  • Ensure sufficient contrast when using #A9B0B7 for text on darker backgrounds like #2A2F36 or #3E4750.
  • Avoid placing #55626F text on #3E4750; their contrast might be insufficient.
  • For critical text on the darkest backgrounds, opt for a pure white or very light gray to meet accessibility standards.
  • Test all text and background pairings using WCAG contrast checkers to meet AA or AAA standards.

Recommended combinations

Oceanic Depths

Creating seamless, deep blue-gray gradients for backgrounds or large hero sections, adding profound depth.

#2A2F36 · #3E4750 · #55626F

Seafoam Contrast

Pairing a dominant dark gray with a light accent and a mid-tone gray for interactive elements and text.

#3E4750 · #A9B0B7 · #708090

Onyx Layers

Designing UI elements where subtle tonal shifts provide hierarchy, like nested containers or tabs, for a serene feel.

#55626F · #708090 · #A9B0B7

CSS variables

:root {
  --dark-sea-onyx-1: #2A2F36;
  --dark-sea-onyx-2: #3E4750;
  --dark-sea-onyx-3: #55626F;
  --dark-sea-onyx-4: #708090;
  --dark-sea-onyx-5: #A9B0B7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dark-sea-onyx": {
        1: "#2A2F36",
        2: "#3E4750",
        3: "#55626F",
        4: "#708090",
        5: "#A9B0B7",
      }
    }
  }
}

Related searches

dark blue gray palettedeep sea color schemeoceanic dark themeprofessional gray blue UItranquil dark mode colors

Palette colors

Hex values

Color 1#2A2F36
·
Color 2#3E4750
·
Color 3#55626F
·
Color 4#708090
·
Color 5#A9B0B7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
3.3:1AA18
6.1:1AA
2
1.4:1Fail
1.5:1Fail
2.3:1Fail
4.3:1AA18
3
2.2:1Fail
1.5:1Fail
1.5:1Fail
2.8:1Fail
4
3.3:1AA18
2.3:1Fail
1.5:1Fail
1.8:1Fail
5
6.1:1AA
4.3:1AA18
2.8:1Fail
1.8:1Fail

Similar palettes

More like Dark Sea Onyx

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