Palette

Dark Academia Ink

Rich, muted tones that evoke the refined elegance and scholarly atmosphere of an old library.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C34#4A4A5A#7B7B8F#AFAFB2#CFCFD6

Palette guide

How to use Dark Academia Ink

Overview

The Dark Academia Ink palette presents a refined and sophisticated monochrome gradient, embodying the quiet elegance and scholarly atmosphere of an old library. It features a deep, slate-like grey (#2C2C34), a rich dark grey (#4A4A5A), a classic medium grey (#7B7B8F), a lighter cool grey (#AFAFB2), and a soft, near-white grey (#CFCFD6). This palette is ideal for designers and developers aiming to create clean, timeless, and intellectual digital experiences. It's excellent for professional websites, minimalist applications, or any brand seeking understated sophistication and clarity.

Best used for

Professional corporate websites
Minimalist UI/UX designs
Academic publishing platforms
Sophisticated portfolio sites
Luxury product e-commerce
Clean editorial layouts

Suggested color roles

primary

#2C2C34 (Deep Slate Grey) for main headings and foundational elements, providing a strong, elegant base.

secondary

#4A4A5A (Dark Grey) can be used for secondary navigation or important sub-sections.

accent

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

background

#CFCFD6 (Near-White Grey) offers a light, clean backdrop, enhancing readability and a modern feel.

text

A deep black (e.g., #000000) or very dark charcoal provides optimal contrast for body text on lighter backgrounds.

Accessibility notes

Ensure sufficient contrast for text, especially when using #AFAFB2 or #CFCFD6 for text on other light palette colors.
The lighter greys 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 #CFCFD6 background.

Recommended combinations

Scholarly Grey

Ideal for creating deep, layered backgrounds or sections requiring a formal, serious feel.

#2C2C34 · #4A4A5A · #7B7B8F

Manuscript Page

Perfect for text-heavy content areas, evoking a clean, classic document aesthetic.

#CFCFD6 · #AFAFB2 · #4A4A5A

Architectural Line

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

#2C2C34 · #7B7B8F · #CFCFD6

CSS variables

:root {
  --dark-academia-ink-4-1: #2C2C34;
  --dark-academia-ink-4-2: #4A4A5A;
  --dark-academia-ink-4-3: #7B7B8F;
  --dark-academia-ink-4-4: #AFAFB2;
  --dark-academia-ink-4-5: #CFCFD6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dark-academia-ink-4": {
        1: "#2C2C34",
        2: "#4A4A5A",
        3: "#7B7B8F",
        4: "#AFAFB2",
        5: "#CFCFD6",
      }
    }
  }
}

Hex values

Color 1#2C2C34

Color 2#4A4A5A

Color 3#7B7B8F

Color 4#AFAFB2

Color 5#CFCFD6

Accessibility

Contrast checker

1.6:1Fail

3.3:1AA18

6.3:1AA

8.9:1AAA

1.6:1Fail

2.1:1Fail

4:1AA18

5.6:1AA

3.3:1AA18

2.1:1Fail

1.9:1Fail

2.7:1Fail

6.3:1AA

4:1AA18

1.9:1Fail

1.4:1Fail

8.9:1AAA

5.6:1AA

2.7:1Fail

1.4:1Fail

Similar palettes

More like Dark Academia Ink

View all dark

Baroque Elegance

Dark Academia Library

Dark Academia Study

Elegant Onyx Glamour

Gilded Frame Elegance

Old Library Scroll