Back to palettes

Palette

Abyssal Vent Minerals

Inspired by the mysterious and dark depths of the ocean where hydrothermal vents release minerals.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyssal Vent Minerals 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 Vent Minerals.

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

Data visualization

#0A1C2C#2E475C#5C7B8E#8FAAB8#C3D4DE

Palette guide

How to use Abyssal Vent Minerals

Overview

The Abyssal Vent Minerals palette captures the mysterious and subtle beauty of the deep ocean, offering a sophisticated range of cool, muted blues and greys. This collection, featuring shades from the deep #0A1C2C to the airy #C3D4DE, is perfect for designs aiming for a calm, professional, or understated elegance. The mid-tones like #5C7B8E and #8FAAB8 provide excellent versatility for creating soft gradients or defining distinct UI elements. Designers and developers will find this palette highly adaptable for modern interfaces, luxury branding, or any project that benefits from a cool, refined aesthetic, ensuring a sense of depth and tranquility without being overly dark.

Best used for

  • Corporate websites and professional portfolios
  • Luxury product packaging and branding
  • Spa and wellness industry designs
  • Subtle dark mode themes with a cool bias
  • Scientific or environmental organization branding
  • Minimalist interior design concepts

Suggested color roles

primary

Establish a deep, stable foundation with #0A1C2C for main backgrounds or header areas, conveying seriousness and depth.

secondary

Use #2E475C for content panels, sidebars, or sub-sections, providing a softer contrast to the primary.

accent

Introduce #8FAAB8 or #C3D4DE as a gentle accent for interactive elements, icons, or subtle highlights, providing a touch of lightness.

background

The lighter #C3D4DE or #8FAAB8 can serve as a soft, ethereal background, while #0A1C2C offers a profound dark base.

text

For dark backgrounds, use a crisp white or near-white text. For lighter backgrounds like #C3D4DE, a charcoal or #0A1C2C provides excellent contrast.

Accessibility notes

  • Ensure high contrast between text and background, especially when pairing mid-tones like #5C7B8E and #8FAAB8.
  • Use a bright white for text on #0A1C2C and #2E475C to meet WCAG AA standards.
  • Consider larger font sizes or bolding when using #5C7B8E for text on a slightly darker background.
  • The lightest color, #C3D4DE, pairs well with the darkest #0A1C2C for maximum contrast in key areas.

Recommended combinations

Deep Ocean Fade

Creates a gradual, mysterious fade for large backgrounds or visual storytelling, from deep to light.

#0A1C2C · #5C7B8E · #C3D4DE

Mineral Contrast

Pairs a strong base with a lighter highlight and crisp white text for clear information hierarchy.

#2E475C · #8FAAB8 · #5C7B8E

Subtle Depth

Ideal for layered UI elements, where each shade provides a distinct, yet harmonious, visual level.

#0A1C2C · #2E475C · #5C7B8E

CSS variables

:root {
  --abyssal-vent-minerals-1: #0A1C2C;
  --abyssal-vent-minerals-2: #2E475C;
  --abyssal-vent-minerals-3: #5C7B8E;
  --abyssal-vent-minerals-4: #8FAAB8;
  --abyssal-vent-minerals-5: #C3D4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-vent-minerals": {
        1: "#0A1C2C",
        2: "#2E475C",
        3: "#5C7B8E",
        4: "#8FAAB8",
        5: "#C3D4DE",
      }
    }
  }
}

Related searches

cool grey blue palettesubtle ocean colorsmysterious dark blueprofessional cool tonesmineral inspired palette

Palette colors

Hex values

Color 1#0A1C2C
·
Color 2#2E475C
·
Color 3#5C7B8E
·
Color 4#8FAAB8
·
Color 5#C3D4DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.8:1AA18
7.1:1AAA
11.3:1AAA
2
1.8:1Fail
2.2:1Fail
4:1AA18
6.4:1AA
3
3.8:1AA18
2.2:1Fail
1.8:1Fail
2.9:1Fail
4
7.1:1AAA
4:1AA18
1.8:1Fail
1.6:1Fail
5
11.3:1AAA
6.4:1AA
2.9:1Fail
1.6:1Fail

Similar palettes

More like Abyssal Vent Minerals

View all dark
Abyssal Coral Bloom
Abyssal Coral Bloom
Deep Sea Cavern
Deep Sea Challenger
Deep Sea Hydrothermal
Deep Sea Luminescence