Back to palettes

Palette

Midnight Ink Spill

A deep and expressive palette of varying black and grey tones, inspired by the profound richness of spilled ink.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F0F#2A2A2A#4A4A4A#6A6A6A#8A8A8A

Palette guide

How to use Midnight Ink Spill

Overview

The Midnight Ink Spill palette offers a sophisticated exploration of deep blacks and nuanced grays, creating a profound, monochrome aesthetic. Anchored by the near-black #0F0F0F, it cascades through #2A2A2A, #4A4A4A, #6A6A6A, and culminates in the lighter #8A8A8A. This collection is ideal for projects requiring a sense of elegance, mystery, or understated power. Designers can leverage its stark contrasts and subtle shifts to build highly focused user interfaces, brand identities, or editorial layouts. Developers will appreciate its cohesive nature for dark mode implementations, ensuring visual consistency across various UI elements. It’s a versatile foundation for modern, minimalist designs that demand depth without relying on a broad spectrum of hues.

Best used for

  • High-end luxury brand websites and apps
  • Dark mode interfaces for productivity tools
  • Editorial design for art or photography portfolios
  • Modern minimalist branding and logos
  • Fintech applications requiring a serious, secure feel
  • Theatrical or event promotion materials

Suggested color roles

primary

#0F0F0F - Use this deep, almost absolute black for dominant sections, headers, or a sophisticated primary background. It sets a strong, serious tone.

secondary

#2A2A2A - A slightly lighter shade, perfect for secondary backgrounds, cards, or subtle dividers. It provides depth without overwhelming the primary.

accent

#6A6A6A - A mid-tone gray that can highlight interactive elements, borders, or subtle iconography. It offers gentle contrast against darker shades.

background

#0F0F0F - Ideal as the main canvas color, establishing a luxurious and immersive dark theme. It provides a rich foundation for lighter text and UI elements.

text

#8A8A8A - This lighter gray ensures readability against the darker backgrounds, particularly #0F0F0F and #2A2A2A. For smaller text or critical information, consider pure white for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using #6A6A6A or #4A4A4A on #2A2A2A.
  • For body text, prioritize #8A8A8A on #0F0F0F or #2A2A2A for optimal readability.
  • Avoid using #0F0F0F text on #2A2A2A backgrounds, as contrast will be too low for most users.
  • Use a tool to check WCAG AA/AAA compliance for all text-background color pairs, particularly for smaller font sizes.

Recommended combinations

Deep Contrast

Excellent for primary backgrounds (#0F0F0F), clear body text (#8A8A8A), and secondary information or borders (#4A4A4A).

#0F0F0F · #8A8A8A · #4A4A4A

Layered Depth

Use #2A2A2A for card backgrounds, #6A6A6A for interactive elements or subheadings, and #0F0F0F for strong structural outlines.

#2A2A2A · #6A6A6A · #0F0F0F

Subtle Gradient

Perfect for creating soft, sophisticated visual hierarchies or gradients in UI elements where a smooth transition is desired.

#0F0F0F · #2A2A2A · #4A4A4A

CSS variables

:root {
  --midnight-ink-spill-4-1: #0F0F0F;
  --midnight-ink-spill-4-2: #2A2A2A;
  --midnight-ink-spill-4-3: #4A4A4A;
  --midnight-ink-spill-4-4: #6A6A6A;
  --midnight-ink-spill-4-5: #8A8A8A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-ink-spill-4": {
        1: "#0F0F0F",
        2: "#2A2A2A",
        3: "#4A4A4A",
        4: "#6A6A6A",
        5: "#8A8A8A",
      }
    }
  }
}

Related searches

monochrome dark paletteblack and grey color schemeelegant dark UI colorsminimalist ink palettesophisticated gray tones

Palette colors

Hex values

Color 1#0F0F0F
·
Color 2#2A2A2A
·
Color 3#4A4A4A
·
Color 4#6A6A6A
·
Color 5#8A8A8A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.2:1Fail
3.5:1AA18
5.6:1AA
2
1.3:1Fail
1.6:1Fail
2.7:1Fail
4.2:1AA18
3
2.2:1Fail
1.6:1Fail
1.6:1Fail
2.6:1Fail
4
3.5:1AA18
2.7:1Fail
1.6:1Fail
1.6:1Fail
5
5.6:1AA
4.2:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Midnight Ink Spill

View all monochrome
Licorice Drop
Obsidian Shard Coast
Shadowed Obsidian
Volcanic Obsidian Flow
Basalt Column Grey
Basalt Pillar Shades