Palette

Dark Academia Realm

Intellectual and somber tones, evoking ancient libraries, leather-bound books, and quiet contemplation.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dark Academia Realm 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 Dark Academia Realm.

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

Data visualization

#3C2A2F#544B50#7E7C7E#B4A996#E3DCCD

Palette guide

How to use Dark Academia Realm

Overview

The Dark Academia Realm palette is a sophisticated and introspective collection, perfectly evoking the somber yet intellectual atmosphere of ancient libraries and quiet contemplation. It features a deep plum-brown (#3C2A2F), a warm dark grey (#544B50), a balanced medium grey (#7E7C7E), a muted antique beige (#B4A996), and a soft, creamy off-white (#E3DCCD). This palette is ideal for designers and developers seeking to create thoughtful, vintage-inspired, and elegant digital experiences. It's excellent for literary platforms, historical content, or any brand aiming for a timeless, intellectual, and slightly mysterious aesthetic.

Best used for

Historical and archival websites
Literary analysis platforms
Vintage photography and art portfolios
Sophisticated personal blogs
E-commerce for artisanal goods
Intellectual content hubs

Suggested color roles

primary

#3C2A2F (Deep Plum-Brown) for main headings and foundational elements, providing gravitas and depth.

secondary

#544B50 (Warm Dark Grey) can be used for secondary navigation or important sub-sections.

accent

#7E7C7E (Medium Grey) for subtle highlights, interactive states, or decorative borders.

background

#E3DCCD (Creamy Off-White) offers a light, inviting background, reminiscent of aged parchment.

text

A very dark brown (e.g., #221A16) or black provides optimal contrast for body text on lighter backgrounds.

Accessibility notes

Ensure sufficient contrast for text, especially when using #B4A996 or #E3DCCD for text on other light palette colors.
The lighter tones may not meet contrast ratios for small text; use them for larger headings or decorative elements.
Provide clear visual hierarchy; color alone should not indicate importance.
Test text legibility on different screen types, especially for #E3DCCD background.

Recommended combinations

Ancient Texts

Ideal for creating deep, layered backgrounds or sections requiring a rich, historical feel.

#3C2A2F · #544B50 · #7E7C7E

Parchment Pages

Perfect for text-heavy content areas, evoking old manuscripts and traditional print.

#E3DCCD · #B4A996 · #544B50

Scholar's Tome

Use for strong contrasts in headers, footers, or to frame lighter content elegantly.

#3C2A2F · #7E7C7E · #E3DCCD

CSS variables

:root {
  --dark-academia-realm-1: #3C2A2F;
  --dark-academia-realm-2: #544B50;
  --dark-academia-realm-3: #7E7C7E;
  --dark-academia-realm-4: #B4A996;
  --dark-academia-realm-5: #E3DCCD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dark-academia-realm": {
        1: "#3C2A2F",
        2: "#544B50",
        3: "#7E7C7E",
        4: "#B4A996",
        5: "#E3DCCD",
      }
    }
  }
}

Hex values

Color 1#3C2A2F

Color 2#544B50

Color 3#7E7C7E

Color 4#B4A996

Color 5#E3DCCD

Accessibility

Contrast checker

1.6:1Fail

3.2:1AA18

5.8:1AA

9.8:1AAA

1.6:1Fail

2:1Fail

3.6:1AA18

6.2:1AA

3.2:1AA18

2:1Fail

1.8:1Fail

3:1AA18

5.8:1AA

3.6:1AA18

1.8:1Fail

1.7:1Fail

9.8:1AAA

6.2:1AA

3:1AA18

1.7:1Fail

Similar palettes

More like Dark Academia Realm

View all dark

Dark Academia Ink

Acid Rain Gloom

Ancient Library Gloom

Ancient Tome Hues

City Night Concrete

City Rain Puddle