Back to palettes

Palette

Midnight Raven

A stark and enigmatic palette of deep blacks and charcoal grays, embodying the mystery of the midnight bird.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#1A1A1A#363636#5A5A5A#7F7F7F

Palette guide

How to use Midnight Raven

Overview

The Midnight Raven palette offers a stark and enigmatic gradient of true black and charcoal grays, embodying mystery and modern sophistication. Comprising #000000, #1A1A1A, #363636, #5A5A5A, and #7F7F7F, this collection is genuinely useful for designers and developers seeking a strong, minimalist aesthetic. It provides a versatile monochrome spectrum for creating dramatic visual experiences, from elegant branding to sophisticated digital interfaces, ensuring a timeless and impactful presence.

Best used for

  • Modern web design and development
  • Luxury branding and corporate identity
  • Photography showcases and portfolios
  • Minimalist product design
  • Editorial layouts and typography
  • Dramatic presentations and digital art

Suggested color roles

primary

Utilize #000000 (absolute black) as the grounding color for a powerful, elegant foundation.

secondary

Employ #1A1A1A (deep charcoal) for subtle variations, borders, or background layering.

accent

Apply #7F7F7F (mid-gray) for subtle highlights, interactive states, or decorative lines.

background

Use #000000 for a stark, elegant canvas, maximizing contrast and depth.

text

For optimal readability, use #7F7F7F or a pure white for primary text on dark backgrounds.

Accessibility notes

  • #7F7F7F offers decent contrast on #000000 or #1A1A1A for text, but always verify WCAG AA compliance.
  • Avoid using #1A1A1A or #363636 for text on #000000; contrast will be insufficient and unreadable.
  • For maximum readability, especially for body text, use a pure white (#FFFFFF) against the darkest shades.
  • Ensure interactive elements are clearly distinguishable using a lighter shade or a subtle border.

Recommended combinations

Classic Monochrome

A timeless and versatile combination for elegant branding, UI elements, or photography display.

#000000 · #1A1A1A · #7F7F7F

Subtle Layers

For creating depth and hierarchy in UI elements, cards, or background textures.

#1A1A1A · #363636 · #5A5A5A

Stark Contrast

Achieving bold and clear distinctions for headlines, calls-to-action, or key information.

#000000 · #5A5A5A · #7F7F7F

CSS variables

:root {
  --midnight-raven-1: #000000;
  --midnight-raven-2: #1A1A1A;
  --midnight-raven-3: #363636;
  --midnight-raven-4: #5A5A5A;
  --midnight-raven-5: #7F7F7F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-raven": {
        1: "#000000",
        2: "#1A1A1A",
        3: "#363636",
        4: "#5A5A5A",
        5: "#7F7F7F",
      }
    }
  }
}

Related searches

black and gray paletteminimalist design colorsdark mode monochromesophisticated charcoal schememodern black aesthetic

Palette colors

Hex values

Color 1#000000
·
Color 2#1A1A1A
·
Color 3#363636
·
Color 4#5A5A5A
·
Color 5#7F7F7F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.7:1Fail
3:1AA18
5.2:1AA
2
1.2:1Fail
1.4:1Fail
2.5:1Fail
4.3:1AA18
3
1.7:1Fail
1.4:1Fail
1.8:1Fail
3:1AA18
4
3:1AA18
2.5:1Fail
1.8:1Fail
1.7:1Fail
5
5.2:1AA
4.3:1AA18
3:1AA18
1.7:1Fail

Similar palettes

More like Midnight Raven

View all dark
Dark Matter Swirl
Dark Moody Portrait
Midnight Raven Glare
Obsidian Crater Flow
Obsidian Mountain Peak
Obsidian Nightfall Depth