Back to palettes

Palette

Gothic Library Quiet

Deep grays accented with rich, subdued reds and indigos capture the scholarly yet mysterious air of an old gothic library.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2F33#4C4F52#6D7173#8B0000#4B0082

Palette guide

How to use Gothic Library Quiet

Overview

The Gothic Library Quiet palette is a distinctive blend of deep, muted grays with rich, subdued accents, perfectly capturing the scholarly yet mysterious air of an old gothic library. The foundational grays, from the deep #2C2F33 to the softer #6D7173, create a sophisticated and serious backdrop. The unexpected yet harmonious pops of dark red #8B0000 and deep indigo #4B0082 introduce a subtle dramatic flair, reminiscent of ancient book bindings or hidden secrets. This palette is ideal for designs that aim for an intellectual, elegant, and moody aesthetic with a touch of understated intrigue.

Best used for

  • Academic institution branding
  • Mystery novel website themes
  • Elegant editorial layouts
  • Sophisticated tech interfaces
  • Dark academia fashion brands
  • Theatrical production design

Suggested color roles

primary

#2C2F33 (A deep, cool gray for main backgrounds, providing a stable and sophisticated foundation.)

secondary

#4C4F52 (A medium-dark gray for secondary sections, offering gentle contrast and structure.)

accent

#8B0000 (A rich, dark red for impactful calls to action, important highlights, or decorative elements.)

background

#2C2F33 (Creates a calm, intellectual backdrop, perfect for focus-oriented content.)

text

#6D7173 (Suitable for subheadings or secondary text on very dark backgrounds; for body text, a very light gray or white is recommended for optimal legibility.)

Accessibility notes

  • Text in #6D7173 on #2C2F33 will have limited contrast; use a lighter shade like white or light gray for body text.
  • 8B0000 and #4B0082 should be used for larger text or interactive elements, ensuring sufficient contrast with the background.
  • Ensure that the red and indigo accents do not visually vibrate against each other if placed in close proximity.
  • Always verify contrast ratios for all text and interactive elements to meet WCAG standards.

Recommended combinations

Quiet Base

Core UI elements and content hierarchy, providing a clean gray foundation.

#2C2F33 · #4C4F52 · #6D7173

Hidden Accent

For striking calls to action or key headings, with the deep red providing a powerful focal point.

#2C2F33 · #8B0000 · #4C4F52

Scholarly Depth

Creates a layered effect with a subtle cool-toned accent, ideal for card backgrounds or dividers.

#4C4F52 · #4B0082 · #6D7173

CSS variables

:root {
  --gothic-library-quiet-1: #2C2F33;
  --gothic-library-quiet-2: #4C4F52;
  --gothic-library-quiet-3: #6D7173;
  --gothic-library-quiet-4: #8B0000;
  --gothic-library-quiet-5: #4B0082;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-library-quiet": {
        1: "#2C2F33",
        2: "#4C4F52",
        3: "#6D7173",
        4: "#8B0000",
        5: "#4B0082",
      }
    }
  }
}

Related searches

dark gray red palettegothic academia colorselegant moody themelibrary design inspirationsophisticated dark UI

Palette colors

Hex values

Color 1#2C2F33
·
Color 2#4C4F52
·
Color 3#6D7173
·
Color 4#8B0000
·
Color 5#4B0082
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
1.3:1Fail
1:1Fail
2
1.6:1Fail
1.7:1Fail
1.2:1Fail
1.6:1Fail
3
2.7:1Fail
1.7:1Fail
2:1Fail
2.6:1Fail
4
1.3:1Fail
1.2:1Fail
2:1Fail
1.3:1Fail
5
1:1Fail
1.6:1Fail
2.6:1Fail
1.3:1Fail

Similar palettes

More like Gothic Library Quiet

View all dark