Palette

Abyssal Pearl Gleam

A dark monochrome progression, inspired by the faint gleam of pearls found in the ocean's abyssal depths.

MonochromeDark5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyssal Pearl Gleam 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 Pearl Gleam.

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

Data visualization

#0F0F0F#2A2A2A#474747#808080#CFCFCF

Palette guide

How to use Abyssal Pearl Gleam

Overview

The Abyssal Pearl Gleam palette offers a profound dark monochrome progression, inspired by the faint gleam of pearls found in the ocean's abyssal depths. This sophisticated collection transitions from the inky #0F0F0F (Near Black) and deep #2A2A2A (Dark Grey) through the balanced #474747 (Medium Grey) and #808080 (Grey), culminating in the luminous #CFCFCF (Light Grey). Designers can leverage this palette to create elegant, minimalist, and mysterious designs, perfect for high-end branding, dark mode interfaces, or architectural visualizations. Developers will find these tonal variations excellent for establishing subtle visual hierarchy and depth in UI components, ensuring a sleek and modern aesthetic that conveys sophistication and understated luxury.

Best used for

Minimalist dark mode UI
Luxury product branding
Architectural visualization
High-end photography portfolios
Tech and software interfaces
Monochromatic art and design

Suggested color roles

primary

#0F0F0F (Near Black) - The deepest shade, ideal for main backgrounds, navigation bars, and primary text in dark themes.

secondary

#2A2A2A (Dark Grey) - A slightly softer dark grey, perfect for secondary backgrounds, card elements, or subtle dividers.

accent

#808080 (Grey) - Use this mid-tone for subtle highlights, disabled states, or secondary interactive elements that need to recede slightly.

background

#0F0F0F (Near Black) or #2A2A2A (Dark Grey) - Creates a deep, immersive dark background, allowing lighter elements to shimmer.

text

For optimal readability on dark backgrounds, use #CFCFCF (Light Grey) or #808080 (Grey). For contrast on lighter elements, #0F0F0F is suitable.

Accessibility notes

Ensure #CFCFCF (Light Grey) is used for body text on the darkest backgrounds (#0F0F0F, #2A2A2A) for optimal contrast.
Avoid using #474747 (Medium Grey) or #808080 (Grey) for small text on dark backgrounds; contrast may be insufficient.
When using #CFCFCF as a background, ensure text in #0F0F0F or #2A2A2A has strong legibility.
Consider using a slightly brighter white for critical calls-to-action to ensure they stand out against the monochrome.

Recommended combinations

Abyssal Depth

Excellent for creating layered backgrounds, deep shadows, or a strong, minimalist base for dark themes.

#0F0F0F · #2A2A2A · #474747

Pearl Gleam

Ideal for highlighting content, interactive elements, or creating a subtle glow effect within a dark interface.

#2A2A2A · #808080 · #CFCFCF

Silver Transition

Perfect for subtle gradients, progress indicators, or creating a sense of sophisticated tonal progression.

#474747 · #808080 · #CFCFCF

CSS variables

:root {
  --abyssal-pearl-gleam-1: #0F0F0F;
  --abyssal-pearl-gleam-2: #2A2A2A;
  --abyssal-pearl-gleam-3: #474747;
  --abyssal-pearl-gleam-4: #808080;
  --abyssal-pearl-gleam-5: #CFCFCF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-pearl-gleam": {
        1: "#0F0F0F",
        2: "#2A2A2A",
        3: "#474747",
        4: "#808080",
        5: "#CFCFCF",
      }
    }
  }
}

Hex values

Color 1#0F0F0F

Color 2#2A2A2A

Color 3#474747

Color 4#808080

Color 5#CFCFCF

Accessibility

Contrast checker

1.3:1Fail

2.1:1Fail

4.9:1AA

12.3:1AAA

1.3:1Fail

1.5:1Fail

3.6:1AA18

9.2:1AAA

2.1:1Fail

1.5:1Fail

2.4:1Fail

6:1AA

4.9:1AA

3.6:1AA18

2.4:1Fail

2.5:1Fail

12.3:1AAA

9.2:1AAA

6:1AA

2.5:1Fail

Similar palettes

More like Abyssal Pearl Gleam