Back to palettes

Palette

Gothic Library Gloom

A sophisticated range of greys, reminiscent of a dim, ancient library filled with secrets.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F1F1F#3C3C3C#6A6A6A#9C9C9C#CFCFCF

Palette guide

How to use Gothic Library Gloom

Overview

The Gothic Library Gloom palette is a masterclass in sophisticated monochrome, offering a gradient of grays that perfectly captures the dim, historical ambiance of an ancient library. From the profound depth of #1F1F1F to the soft, almost misty #CFCFCF, this palette provides exceptional versatility for creating a serious, elegant, and contemplative mood. The mid-tones like #3C3C3C, #6A6A6A, and #9C9C9C allow for precise hierarchical structuring and subtle visual interest, making it ideal for designs that demand a timeless and intellectual aesthetic without relying on overt color.

Best used for

  • High-end editorial design
  • Architectural portfolio websites
  • Museum or gallery branding
  • Dark mode UI for productivity apps
  • Classic literature website themes
  • Minimalist art direction

Suggested color roles

primary

#1F1F1F (The darkest shade, excellent for primary backgrounds, establishing a deep, grounding presence.)

secondary

#3C3C3C (A dark gray for secondary sections, navigation, or card backgrounds, providing clear separation.)

accent

#9C9C9C (A lighter gray for subtle accents, borders, or inactive states, adding a touch of elegance.)

background

#1F1F1F (Creates an immersive, sophisticated backdrop, allowing content to emerge with clarity.)

text

#CFCFCF (A very light gray, perfect for body text and headings on darker backgrounds, ensuring optimal readability.)

Accessibility notes

  • CFCFCF on #1F1F1F or #3C3C3C offers excellent contrast, suitable for all text sizes.
  • 9C9C9C can be used for larger text on #1F1F1F, but verify contrast for smaller body text.
  • Avoid using #6A6A6A as text on #3C3C3C or #1F1F1F due to insufficient contrast for general use.
  • Ensure interactive elements clearly indicate their state (e.g., hover, active) using contrasting shades from the palette.

Recommended combinations

Gloom Base

Foundation for UI, with the lightest gray for legible text on dark backgrounds.

#1F1F1F · #3C3C3C · #CFCFCF

Shadowed Layers

For creating depth, subtle gradients, or distinct layered sections in UI design.

#3C3C3C · #6A6A6A · #9C9C9C

Classic Read

Strong contrast for headings and body text, with a mid-tone for secondary information or dividers.

#1F1F1F · #CFCFCF · #6A6A6A

CSS variables

:root {
  --gothic-library-gloom-1: #1F1F1F;
  --gothic-library-gloom-2: #3C3C3C;
  --gothic-library-gloom-3: #6A6A6A;
  --gothic-library-gloom-4: #9C9C9C;
  --gothic-library-gloom-5: #CFCFCF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-library-gloom": {
        1: "#1F1F1F",
        2: "#3C3C3C",
        3: "#6A6A6A",
        4: "#9C9C9C",
        5: "#CFCFCF",
      }
    }
  }
}

Related searches

dark grey aestheticmonochrome historical themeelegant dark designlibrary website colorssophisticated gloom palette

Palette colors

Hex values

Color 1#1F1F1F
·
Color 2#3C3C3C
·
Color 3#6A6A6A
·
Color 4#9C9C9C
·
Color 5#CFCFCF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3:1AA18
6:1AA
10.6:1AAA
2
1.5:1Fail
2:1Fail
4:1AA18
7.1:1AAA
3
3:1AA18
2:1Fail
2:1Fail
3.5:1AA18
4
6:1AA
4:1AA18
2:1Fail
1.8:1Fail
5
10.6:1AAA
7.1:1AAA
3.5:1AA18
1.8:1Fail

Similar palettes

More like Gothic Library Gloom

View all dark
Cathedral Shadow Grey
Dark Academia Ink
Gothic Cathedral Stone
Gothic Chapel Stone
Gothic Library Dust
Gothic Library Quiet