Back to palettes

Palette

Midnight Ink Spill

A progression of deep, inky blues and near-blacks, suggesting mystery and understated elegance.

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

#0D0C1D#1A1A2E#2B2E4A#3A3B57#4E4F6C

Palette guide

How to use Midnight Ink Spill

Overview

The Midnight Ink Spill palette offers a sophisticated, monochrome journey through deep, inky blues and near-blacks, perfect for creating understated elegance. Ranging from the profound depth of #0D0C1D to the softer, muted grey-blue of #4E4F6C, this collection fosters a mysterious and minimal aesthetic. Designers and developers can leverage its subtle variations, like #1A1A2E and #2B2E4A, to build dark-themed interfaces, luxury branding, or atmospheric digital experiences. Its cohesive, dark progression provides a solid foundation for highly refined visual storytelling without relying on vibrant accents, emphasizing depth and texture through shade.

Best used for

  • High-end luxury brand websites and apps
  • Dark mode UI/UX for productivity tools or creative suites
  • Mysterious or artistic photography portfolios
  • Minimalist e-commerce platforms for premium products
  • Elegant event invitations or digital publications
  • Atmospheric video game interfaces or cinematic branding

Suggested color roles

primary

#0D0C1D - The anchor of the palette, ideal for main backgrounds, large headings, or primary brand identity elements where profound depth is desired.

secondary

#1A1A2E - A slightly softer dark, perfect for secondary backgrounds, card elements, or containers, providing subtle visual separation from the primary dark.

accent

#3A3B57 - Use this mid-tone for subtle highlights, interactive states, or to add a touch of understated differentiation within a predominantly dark layout.

background

#0D0C1D - The ultimate choice for a deep, immersive dark mode experience, ensuring all other elements stand out with minimal effort.

text

For optimal readability, use pure white or a very light off-white text color. For subtle secondary text or hints on the darkest backgrounds like #0D0C1D, the lightest palette color #4E4F6C can be considered, but verify contrast.

Accessibility notes

  • Ensure primary body text uses pure white or a very light grey against #0D0C1D or #1A1A2E to meet WCAG AA contrast standards.
  • Avoid using #4E4F6C for small or body text on any of the darker palette colors, as it will likely fail contrast requirements.
  • When using lighter tones like #3A3B57 or #4E4F6C for UI elements, ensure interactive states provide clear visual feedback.
  • Consider increasing font sizes for headings and important information when using lower-contrast color pairings within the palette.

Recommended combinations

Deep Contrast

Ideal for impactful headlines or primary calls-to-action against a deep, immersive background.

#0D0C1D · #4E4F6C · #1A1A2E

Subtle Layering

Creates depth in UI cards or panels; #1A1A2E as background, #3A3B57 for borders/dividers, and #2B2E4A for active states.

#1A1A2E · #3A3B57 · #2B2E4A

Monochrome Gradient

Effective for subtle background gradients or layered effects, adding visual interest without harsh breaks.

#0D0C1D · #1A1A2E · #2B2E4A

CSS variables

:root {
  --midnight-ink-spill-6-1: #0D0C1D;
  --midnight-ink-spill-6-2: #1A1A2E;
  --midnight-ink-spill-6-3: #2B2E4A;
  --midnight-ink-spill-6-4: #3A3B57;
  --midnight-ink-spill-6-5: #4E4F6C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-ink-spill-6": {
        1: "#0D0C1D",
        2: "#1A1A2E",
        3: "#2B2E4A",
        4: "#3A3B57",
        5: "#4E4F6C",
      }
    }
  }
}

Related searches

dark mode ui colorsdeep grey blue palettemysterious website designminimalist dark themeelegant monochrome branding

Palette colors

Hex values

Color 1#0D0C1D
·
Color 2#1A1A2E
·
Color 3#2B2E4A
·
Color 4#3A3B57
·
Color 5#4E4F6C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.5:1Fail
1.8:1Fail
2.4:1Fail
2
1.1:1Fail
1.3:1Fail
1.6:1Fail
2.2:1Fail
3
1.5:1Fail
1.3:1Fail
1.2:1Fail
1.7:1Fail
4
1.8:1Fail
1.6:1Fail
1.2:1Fail
1.4:1Fail
5
2.4:1Fail
2.2:1Fail
1.7:1Fail
1.4:1Fail

Similar palettes

More like Midnight Ink Spill

View all monochrome
Basalt Column Grey
Licorice Drop
Lunar Dust Veil
Midnight Ink Spill
Obsidian Monolith Shadow
Obsidian Shard Coast