Back to palettes

Palette

Library Nocturne Study

A sophisticated palette drawing inspiration from old libraries and quiet academic spaces in the evening light.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Library Nocturne Study 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 Library Nocturne Study.

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

Data visualization

#1A1C20#3E424B#6D727B#9CA3AE#CED5DC

Palette guide

How to use Library Nocturne Study

Overview

The Library Nocturne Study palette exudes sophistication and intellectual depth, drawing inspiration from quiet academic spaces. Its dark, elegant greys and cool undertones create a refined atmosphere, perfect for projects requiring a serious yet inviting aesthetic. Key colors like the deep charcoal #1A1C20 and the lighter, misty grey #CED5DC offer a versatile range for subtle contrast. Designers and developers can leverage the rich mid-tones such as #3E424B and #6D727B to build layered interfaces that feel established and thoughtful. This palette is ideal for conveying professionalism and understated luxury, ensuring a polished and memorable user experience.

Best used for

  • Luxury brand websites and apps
  • Academic institution branding or publications
  • High-end editorial design
  • Corporate presentations and annual reports
  • Elegant event invitations or decor
  • Dark mode UI themes for productivity tools

Suggested color roles

primary

Use the profound depth of #1A1C20 for main backgrounds, navigation, or strong brand elements to establish a sophisticated and serious tone.

secondary

Apply #3E424B for secondary sections, large text blocks, or subtle UI components to add visual interest without overpowering the primary dark.

accent

Employ #9CA3AE sparingly for interactive elements, highlights, or subtle graphic details, providing a gentle contrast that catches the eye.

background

The darkest shade, #1A1C20, or the slightly lighter #3E424B, works best for expansive, elegant backgrounds, creating a sense of depth and focus.

text

The lightest shade, #CED5DC, is ideal for primary text on dark backgrounds, ensuring excellent readability and a harmonious visual flow.

Accessibility notes

  • Ensure sufficient contrast between #1A1C20 or #3E424B backgrounds and #CED5DC text for WCAG AA compliance.
  • Avoid using #6D727B or #9CA3AE for critical text on similar mid-tone backgrounds, as contrast may be insufficient.
  • Utilize #CED5DC for all essential text elements, especially on the darker primary and secondary colors.
  • Test color combinations with various screen readers and contrast checkers to confirm readability for all users.

Recommended combinations

Deep Focus

Excellent for dark mode interfaces: #1A1C20 as background, #CED5DC for main text, and #9CA3AE for subheadings or subtle call-to-actions.

#1A1C20 · #CED5DC · #9CA3AE

Layered Elegance

Creates a multi-layered design; #3E424B for sections, #6D727B for cards or secondary panels, with #CED5DC for clear content.

#3E424B · #6D727B · #CED5DC

Subtle Highlight

Use #1A1C20 as a base, #3E424B for surrounding elements, and #9CA3AE for delicate icons or interactive states.

#1A1C20 · #9CA3AE · #3E424B

CSS variables

:root {
  --library-nocturne-study-1: #1A1C20;
  --library-nocturne-study-2: #3E424B;
  --library-nocturne-study-3: #6D727B;
  --library-nocturne-study-4: #9CA3AE;
  --library-nocturne-study-5: #CED5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "library-nocturne-study": {
        1: "#1A1C20",
        2: "#3E424B",
        3: "#6D727B",
        4: "#9CA3AE",
        5: "#CED5DC",
      }
    }
  }
}

Related searches

dark academia color schemeelegant grey palettesophisticated UI colorsintellectual brand palettelibrary inspired dark tones

Palette colors

Hex values

Color 1#1A1C20
·
Color 2#3E424B
·
Color 3#6D727B
·
Color 4#9CA3AE
·
Color 5#CED5DC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.5:1AA18
6.7:1AA
11.5:1AAA
2
1.7:1Fail
2.1:1Fail
4:1AA18
6.8:1AA
3
3.5:1AA18
2.1:1Fail
1.9:1Fail
3.3:1AA18
4
6.7:1AA
4:1AA18
1.9:1Fail
1.7:1Fail
5
11.5:1AAA
6.8:1AA
3.3:1AA18
1.7:1Fail

Similar palettes

More like Library Nocturne Study

View all dark
Amethyst Veil Mystique
Art Deco Evening
Gothic Night Bloom
Mystic Forest Shroud
Obsidian Glimmer Pool
Vintage Velvet Nights