Back to palettes

Palette

Gothic Library Arch

A sophisticated monochrome array reflecting the grandeur and shadow of a gothic library's stone arches.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F1F1F#3F3F3F#5F5F5F#808080#A0A0A0

Palette guide

How to use Gothic Library Arch

Overview

The Gothic Library Arch palette presents a sophisticated monochrome gradient, embodying the grandeur and timeless elegance of ancient stone architecture. Ranging from the deep, foundational black of #1F1F1F to the lighter, yet still muted, #A0A0A0, this palette is perfect for creating a clean, structured, and serious aesthetic. The gradual progression of grays—including #3F3F3F, #5F5F5F, and #808080—allows for subtle depth and clear hierarchy in design, evoking the quiet dignity of a historic library's stone arches. It's an excellent choice for projects demanding a classic, understated, and intellectual mood.

Best used for

  • Academic institution websites
  • High-end minimalist branding
  • Digital portfolio backgrounds
  • Architectural firm identities
  • Elegant dark mode themes
  • Monochrome art installations

Suggested color roles

primary

#1F1F1F (The deepest shade, ideal for primary backgrounds, grounding the design with a strong, dark presence.)

secondary

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

accent

#808080 (A mid-tone gray for subtle accents, borders, or inactive states, providing softness.)

background

#1F1F1F (Establishes a profound, clean base, allowing content to stand out with clarity.)

text

#A0A0A0 (Excellent for body text or secondary headings on darker backgrounds, ensuring good readability and elegance.)

Accessibility notes

  • A0A0A0 on #1F1F1F or #3F3F3F offers good contrast for body text, but always verify.
  • Avoid using #5F5F5F or #808080 for small text on similarly dark backgrounds; contrast will be insufficient.
  • Ensure interactive elements have clear focus states that stand out, perhaps by using the lightest shade #A0A0A0 for active elements.
  • This monochrome palette inherently supports good contrast if lighter shades are used for text on darker backgrounds.

Recommended combinations

Arch Base

Core structure for UI, with the lightest gray for readable text on dark.

#1F1F1F · #3F3F3F · #A0A0A0

Stone Depth

For creating layered effects, shadows, or gradients in architectural renders or UI cards.

#3F3F3F · #5F5F5F · #808080

Classic Contrast

High contrast for headings and subheadings, with a middle gray for secondary information.

#1F1F1F · #A0A0A0 · #5F5F5F

CSS variables

:root {
  --gothic-library-arch-1: #1F1F1F;
  --gothic-library-arch-2: #3F3F3F;
  --gothic-library-arch-3: #5F5F5F;
  --gothic-library-arch-4: #808080;
  --gothic-library-arch-5: #A0A0A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-library-arch": {
        1: "#1F1F1F",
        2: "#3F3F3F",
        3: "#5F5F5F",
        4: "#808080",
        5: "#A0A0A0",
      }
    }
  }
}

Related searches

monochrome dark palettesophisticated gray schemearchitectural color designminimalist dark themeelegant library colors

Palette colors

Hex values

Color 1#1F1F1F
·
Color 2#3F3F3F
·
Color 3#5F5F5F
·
Color 4#808080
·
Color 5#A0A0A0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.2:1AA18
6.3:1AA
2
1.6:1Fail
1.6:1Fail
2.7:1Fail
4:1AA18
3
2.6:1Fail
1.6:1Fail
1.6:1Fail
2.4:1Fail
4
4.2:1AA18
2.7:1Fail
1.6:1Fail
1.5:1Fail
5
6.3:1AA
4:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Gothic Library Arch

View all dark