Back to palettes

Palette

Gothic Library Ink

Deep, inky blacks and shadowy greys that capture the mood of an ancient, mysterious library.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#202020#363636#505050#181818#686868

Palette guide

How to use Gothic Library Ink

Overview

The Gothic Library Ink palette offers a profound and intense collection of deep blacks and shadowy grays, perfectly capturing the enigmatic mood of an ancient, mysterious library. With its core of almost-black #181818 and rich charcoal #202020, this palette establishes a powerful, immersive foundation. The varying shades of gray, including #363636, #505050, and #686868, allow for subtle depth and hierarchy, preventing the design from feeling flat. It's an excellent choice for projects requiring a dramatic, sophisticated, and deeply atmospheric aesthetic, reminiscent of old ink on parchment in dim light.

Best used for

  • Thriller or mystery novel covers
  • Dark mode UI for creative apps
  • High-end video game interfaces
  • Luxury product presentations
  • Digital art platforms
  • Gothic-themed websites

Suggested color roles

primary

#181818 (The deepest, almost-black, ideal for primary backgrounds, establishing a strong, dramatic foundation.)

secondary

#202020 (A rich charcoal for secondary sections, offering depth without stark contrast.)

accent

#505050 (A mid-tone gray for subtle accents, borders, or inactive states, providing a touch of softness.)

background

#181818 (Creates an immersive, sophisticated backdrop, perfect for bold content.)

text

#686868 (A medium-dark gray, suitable for subheadings or decorative text on the very darkest backgrounds; for body text, a lighter gray or white is recommended for readability.)

Accessibility notes

  • Text in #686868 on #181818 or #202020 will likely fail for body text contrast; use a light gray or white.
  • 505050 should be reserved for larger display text or decorative elements when used on the darkest backgrounds.
  • Ensure interactive elements have clear visual states using the lighter grays, or by adding a bright accent if appropriate for the brand.
  • Always verify contrast ratios with an accessibility checker, especially for critical information.

Recommended combinations

Ink Depth

Foundation for ultra-dark interfaces, creating deep layering and structure.

#181818 · #202020 · #363636

Shadowed Text

For headings and subheadings, using the lighter grays for readability on the darkest background.

#181818 · #686868 · #505050

Mysterious Gradients

Creates subtle, sophisticated gradients for backgrounds or UI components, adding visual interest.

#202020 · #363636 · #505050

CSS variables

:root {
  --gothic-library-ink-1: #202020;
  --gothic-library-ink-2: #363636;
  --gothic-library-ink-3: #505050;
  --gothic-library-ink-4: #181818;
  --gothic-library-ink-5: #686868;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-library-ink": {
        1: "#202020",
        2: "#363636",
        3: "#505050",
        4: "#181818",
        5: "#686868",
      }
    }
  }
}

Related searches

deep black gray palettemysterious dark themegothic academia colorselegant charcoal designdark mode UI palette

Palette colors

Hex values

Color 1#202020
·
Color 2#363636
·
Color 3#505050
·
Color 4#181818
·
Color 5#686868
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
1.1:1Fail
2.9:1Fail
2
1.3:1Fail
1.5:1Fail
1.5:1Fail
2.2:1Fail
3
2:1Fail
1.5:1Fail
2.2:1Fail
1.4:1Fail
4
1.1:1Fail
1.5:1Fail
2.2:1Fail
3.2:1AA18
5
2.9:1Fail
2.2:1Fail
1.4:1Fail
3.2:1AA18

Similar palettes

More like Gothic Library Ink

View all dark