Palette

Midnight Ink Spill

A gradient of deep, inky blues, transitioning from impenetrable darkness to the serene calm of a moonlit sky.

darkdark5 colors

More dark 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

#0D162F#2A3C5B#4B6E8F#89B3D0#C9E6F2

Palette guide

How to use Midnight Ink Spill

Overview

The "Midnight Ink Spill" palette offers a sophisticated journey through deep, inky blues, perfect for evoking a sense of mystery and serene depth. Anchored by the profound #0D162F, it seamlessly transitions through the rich #2A3C5B and the calming #4B6E8F, reaching the luminous #89B3D0 and the ethereal #C9E6F2. This gradient provides designers and developers with a versatile foundation for creating elegant, immersive experiences. Its cool, dark tones are ideal for projects requiring a blend of professionalism and enigmatic allure, ensuring a distinctive and memorable visual identity across digital and print mediums.

Best used for

High-end tech interfaces and dashboards
Luxury brand identity and packaging
Mysterious or sci-fi themed digital content
Professional services websites (finance, legal)
Evening event branding or dark mode applications
Educational platforms focusing on depth and knowledge

Suggested color roles

primary

#0D162F. This deepest navy serves as the foundational anchor, perfect for main backgrounds, large headers, or elements requiring a strong, authoritative presence.

secondary

#2A3C5B. A rich, supporting dark blue, ideal for sub-headers, navigation elements, or secondary content blocks that need to recede slightly from the primary.

accent

#89B3D0. A bright, sky-like blue that stands out beautifully against the darker tones, making it excellent for calls-to-action, interactive elements, or key information.

background

#0D162F. Utilize this profound shade for a true "midnight" canvas, creating an immersive and deep environment that allows lighter elements to truly pop.

text

#C9E6F2. This near-white, lightest blue provides exceptional readability against the darker blues, ensuring clarity for body text, labels, and all essential content.

Accessibility notes

Ensure #C9E6F2 (lightest) has sufficient contrast against all darker blues, especially #0D162F and #2A3C5B, for main text content.
Avoid using mid-tones like #4B6E8F for small text on #2A3C5B backgrounds, as contrast may be insufficient for readability.
Use #89B3D0 for interactive elements against #0D162F or #2A3C5B to ensure they are clearly visible and clickable for all users.
For large text or headlines, #4B6E8F can work on #0D162F, but always verify contrast ratios for WCAG compliance.

Recommended combinations

Deep Serenity

Ideal for primary UI elements, high-contrast text on dark backgrounds, and highlighting calls-to-action in a sophisticated manner.

#0D162F · #C9E6F2 · #89B3D0

Subtle Depths

Perfect for layered content sections, data visualizations, or creating a sense of depth in backgrounds and secondary information panels.

#2A3C5B · #4B6E8F · #C9E6F2

Midnight Accent

Best for striking accent elements, notifications, or interactive components where #89B3D0 needs to pop against a dark base with a supporting mid-tone.

#0D162F · #89B3D0 · #4B6E8F

CSS variables

:root {
  --midnight-ink-spill-7-1: #0D162F;
  --midnight-ink-spill-7-2: #2A3C5B;
  --midnight-ink-spill-7-3: #4B6E8F;
  --midnight-ink-spill-7-4: #89B3D0;
  --midnight-ink-spill-7-5: #C9E6F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-ink-spill-7": {
        1: "#0D162F",
        2: "#2A3C5B",
        3: "#4B6E8F",
        4: "#89B3D0",
        5: "#C9E6F2",
      }
    }
  }
}

Hex values

Color 1#0D162F

Color 2#2A3C5B

Color 3#4B6E8F

Color 4#89B3D0

Color 5#C9E6F2

Accessibility

Contrast checker

1.6:1Fail

3.3:1AA18

8:1AAA

13.7:1AAA

1.6:1Fail

2.1:1Fail

5:1AA

8.5:1AAA

3.3:1AA18

2.1:1Fail

2.4:1Fail

4.1:1AA18