Back to palettes

Palette

Midnight Library Gloom

A deep, quiet palette for a solemn evening among dusty old books.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A2A#3A3A4A#5A5A6A#7A7A8A#9A9A9A

Palette guide

How to use Midnight Library Gloom

Overview

The Midnight Library Gloom palette (version 2) offers a sophisticated, monochromatic range of deep grays with a subtle, cool undertone, perfect for evoking a quiet and mysterious atmosphere. From the darkest #1A1A2A to the lighter #9A9A9A, these shades, including #3A3A4A and #7A7A8A, are ideal for designers and developers seeking a minimalist yet moody aesthetic. This palette is excellent for creating a sense of depth and solemnity, reminiscent of ancient texts and hushed halls, providing a clean and elegant foundation for dark mode interfaces or academic themes.

Best used for

  • Dark mode user interfaces (UI)
  • Minimalist branding and websites
  • Academic and literary platforms
  • Mystery or suspense game aesthetics
  • Sophisticated tech interfaces
  • Photography portfolios with a moody feel

Suggested color roles

primary

Use #3A3A4A for main content backgrounds or larger UI components, establishing a calm and consistent base.

secondary

Apply #5A5A6A for dividers, secondary information panels, or subtle borders, offering a gentle visual separation.

accent

Utilize #9A9A9A for subtle highlights, interactive states, or icons, providing a clear yet understated accent.

background

Employ #1A1A2A as the deepest background color, creating an immersive and profound dark canvas.

text

For primary text, #9A9A9A or #7A7A8A offers good readability on darker backgrounds. For secondary text, #5A5A6A can be used with sufficient font weight.

Accessibility notes

  • Ensure #9A9A9A has sufficient contrast when used for text on #1A1A2A or #3A3A4A backgrounds.
  • Avoid using #1A1A2A and #3A3A4A as text and background pairs, as contrast will be insufficient for legibility.
  • Consider larger font sizes for text elements that use #5A5A6A on darker backgrounds to improve readability.
  • Maintain clear visual cues for interactive elements, ensuring they stand out against the similar dark tones.

Recommended combinations

Deep Monochromatic

A strong dark mode setup with #1A1A2A as background, #3A3A4A for content cards, and #9A9A9A for primary text or headings.

#1A1A2A · #3A3A4A · #9A9A9A

Layered Grays

For a structured layout, use #3A3A4A for main panels, #5A5A6A for sub-sections, and #7A7A8A for secondary information.

#3A3A4A · #5A5A6A · #7A7A8A

Subtle Contrast

Employ #1A1A2A as the background, #7A7A8A for body text, and #9A9A9A for accents or interactive elements requiring subtle highlight.

#1A1A2A · #7A7A8A · #9A9A9A

CSS variables

:root {
  --midnight-library-gloom-2-1: #1A1A2A;
  --midnight-library-gloom-2-2: #3A3A4A;
  --midnight-library-gloom-2-3: #5A5A6A;
  --midnight-library-gloom-2-4: #7A7A8A;
  --midnight-library-gloom-2-5: #9A9A9A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-library-gloom-2": {
        1: "#1A1A2A",
        2: "#3A3A4A",
        3: "#5A5A6A",
        4: "#7A7A8A",
        5: "#9A9A9A",
      }
    }
  }
}

Related searches

dark grey palettemoody library colorsmonochromatic grey bluesubtle dark modemysterious UI design

Palette colors

Hex values

Color 1#1A1A2A
·
Color 2#3A3A4A
·
Color 3#5A5A6A
·
Color 4#7A7A8A
·
Color 5#9A9A9A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
4.1:1AA18
6.1:1AA
2
1.5:1Fail
1.6:1Fail
2.6:1Fail
4:1AA18
3
2.5:1Fail
1.6:1Fail
1.6:1Fail
2.4:1Fail
4
4.1:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.1:1AA
4:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Midnight Library Gloom

View all dark
Blackwater Grotto Gloom
Dark Academia Ink
Dark Moody Portrait
Gothic Library Dust
Gothic Library Gloom
Gothic Library Quiet