Palette

Raven Feather Shimmer

The subtle, shifting iridescence of a raven's dark feathers, hinting at hidden depths and quiet mystery.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Raven Feather Shimmer 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 Raven Feather Shimmer.

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

Data visualization

#0A0A0A#1D2B3F#3C4C61#6F8FAF#B8B9BB

Palette guide

How to use Raven Feather Shimmer

Overview

The Raven Feather Shimmer palette captures the subtle, iridescent sheen of a raven's feathers, blending deep, sophisticated blues and grays with hints of lighter, almost metallic tones. Starting with the profound #0A0A0A, it transitions through the deep #1D2B3F and the rich #3C4C61, culminating in the ethereal #B8B9BB. This palette is ideal for designs that aim for understated elegance, mystery, and a touch of natural sophistication. Developers and designers can employ these colors for high-end branding, dark-themed UIs, or artistic projects that convey depth, quiet luxury, and a glimmer of subtle beauty, reminiscent of light catching a dark, textured surface.

Best used for

Luxury automotive branding
High-end tech product interfaces
Artistic photography websites
Elegant dark mode applications
Mysterious editorial layouts
Sophisticated fashion brands

Suggested color roles

primary

#0A0A0A - An intense, almost pure black, serving as a powerful and elegant background or foundational color.

secondary

#1D2B3F - A very deep, sophisticated blue-gray, providing a subtle shift in depth for secondary panels or large content blocks.

accent

#6F8FAF - A soft, muted blue-gray, ideal for delicate highlights, interactive elements, or a shimmering accent.

background

#0A0A0A - Creates a luxurious, dark canvas that allows the shimmering blue-grays to truly stand out.

text

#B8B9BB - A light, silvery gray that offers excellent readability and a soft glow against the dark backgrounds, or pure white for maximum contrast.

Accessibility notes

Ensure sufficient contrast when using #3C4C61 for text on #1D2B3F; use for larger headings or decorative elements.
#B8B9BB provides good contrast for body text on #0A0A0A, ensuring readability.
Avoid using mid-tones like #6F8FAF as text on #3C4C61 without careful contrast checking.
Always offer a stark white or very light gray text option for critical information on the darkest backgrounds.

Recommended combinations

Iridescent Depth

Creates a profound dark base with subtle, shimmering blue-gray accents, ideal for sophisticated dark themes.

#0A0A0A · #1D2B3F · #6F8FAF

Feathered Layers

Provides a gradual, elegant transition of cool tones, perfect for layered UI elements or subtle background effects.

#1D2B3F · #3C4C61 · #B8B9BB

Glimmering Highlight

Uses the lightest shade for stark contrast and highlight, complemented by a mid-tone for secondary elements.

#0A0A0A · #B8B9BB · #6F8FAF

CSS variables

:root {
  --raven-feather-shimmer-1: #0A0A0A;
  --raven-feather-shimmer-2: #1D2B3F;
  --raven-feather-shimmer-3: #3C4C61;
  --raven-feather-shimmer-4: #6F8FAF;
  --raven-feather-shimmer-5: #B8B9BB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "raven-feather-shimmer": {
        1: "#0A0A0A",
        2: "#1D2B3F",
        3: "#3C4C61",
        4: "#6F8FAF",
        5: "#B8B9BB",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#1D2B3F

Color 3#3C4C61

Color 4#6F8FAF

Color 5#B8B9BB

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

5.9:1AA

10.1:1AAA

1.4:1Fail

1.6:1Fail

4.2:1AA18

7.3:1AAA

2.3:1Fail

1.6:1Fail

2.6:1Fail

4.5:1AA18

5.9:1AA

4.2:1AA18

2.6:1Fail

1.7:1Fail

10.1:1AAA

7.3:1AAA

4.5:1AA18

1.7:1Fail

Similar palettes

More like Raven Feather Shimmer

Enigmatic Shadow Tale

Gothic Manor Shadow

Gothic Violet Shadow