Palette

Midnight Library Velvet

Evokes the deep, quiet luxury of an old library filled with shadowed corners and ancient tales.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A2E#1F4287#26415B#6A6E7D#917F8D

Palette guide

How to use Midnight Library Velvet

Overview

The Midnight Library Velvet palette exudes deep, quiet luxury, reminiscent of an old library filled with shadowed corners and ancient tales. It harmonizes rich blues like #1A1A2E (very dark blue-purple) and #1F4287 (deep sapphire) with sophisticated grays such as #6A6E7D (medium gray-blue) and #917F8D (muted plum-gray). This palette is perfect for designers and developers aiming to create an atmosphere of elegance, mystery, and refined comfort. It's ideal for projects that require a luxurious, sophisticated, and slightly mysterious aesthetic, evoking the tactile sensation of velvet and the allure of hidden knowledge.

Best used for

Luxury brand websites and apps
High-end fashion or jewelry platforms
Sophisticated user interfaces (UI)
Artistic portfolios or gallery sites
Elegant event branding
Digital content with a mysterious or opulent theme

Suggested color roles

primary

Use #1F4287 as the dominant blue for main sections or content panels, providing a rich and stable foundation.

secondary

Apply #26415B for supportive elements, subheadings, or subtle borders, offering a slightly muted complement.

accent

Utilize #917F8D sparingly for soft, elegant highlights, interactive states, or decorative details, adding a touch of luxury.

background

Employ #1A1A2E as the deepest background color, creating an immersive, velvety dark canvas.

text

For primary text, #917F8D or #6A6E7D provides good readability on darker backgrounds. For secondary text, a lighter gray or white can be used.

Accessibility notes

Ensure #6A6E7D and #917F8D have sufficient contrast when used for text on #1A1A2E or #1F4287 backgrounds.
Avoid using #1A1A2E and #26415B as text and background pairs due to insufficient contrast for small text.
Consider using a lighter text color, such as white, for critical information on the darker blues.
Maintain clear visual cues for interactive elements, ensuring they stand out against the rich, deep tones.

Recommended combinations

Velvet Foundation

A luxurious base with #1A1A2E as background, #1F4287 for content cards, and #917F8D for primary text or key elements.

#1A1A2E · #1F4287 · #917F8D

Sophisticated Layers

Layered design using #1F4287 for main panels, #26415B for sub-sections, and #6A6E7D for secondary information or subtle UI.

#1F4287 · #26415B · #6A6E7D

Muted Elegance

Employ #1A1A2E as background, #6A6E7D for body text, and #917F8D for elegant accents, buttons, or hover states.

#1A1A2E · #6A6E7D · #917F8D

CSS variables

:root {
  --midnight-library-velvet-1: #1A1A2E;
  --midnight-library-velvet-2: #1F4287;
  --midnight-library-velvet-3: #26415B;
  --midnight-library-velvet-4: #6A6E7D;
  --midnight-library-velvet-5: #917F8D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-library-velvet": {
        1: "#1A1A2E",
        2: "#1F4287",
        3: "#26415B",
        4: "#6A6E7D",
        5: "#917F8D",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#1F4287

Color 3#26415B

Color 4#6A6E7D

Color 5#917F8D

Accessibility

Contrast checker

1.8:1Fail

1.6:1Fail

3.4:1AA18

4.6:1AA

1.8:1Fail

1.1:1Fail

1.9:1Fail

2.6:1Fail

1.6:1Fail

1.1:1Fail

2.1:1Fail

2.8:1Fail