Palette

Dark Academia Ink

A sophisticated, muted palette evoking the moody elegance of old libraries, leather-bound books, and ancient knowledge.

darkdark5 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

#2C2F33#4B4E54#73777C#A1A5AC#C8CDD3

Palette guide

How to use Dark Academia Ink

Overview

The Dark Academia Ink palette offers a sophisticated and muted gradient of greys, perfectly capturing the moody elegance of old libraries and intellectual pursuits. It features a deep charcoal (#2C2F33), a rich dark grey (#4B4E54), a classic medium grey (#73777C), a lighter cool grey (#A1A5AC), and a soft, almost white grey (#C8CDD3). This palette is ideal for designers and developers seeking to create clean, refined, and timeless digital experiences. It's excellent for modern academic platforms, minimalist web designs, or any brand aiming for understated sophistication.

Best used for

Minimalist website designs
Professional corporate branding
Modern academic platforms
Sophisticated app interfaces
Digital publishing and editorial layouts
Elegant e-commerce for luxury goods

Suggested color roles

primary

#2C2F33 (Deep Charcoal) for main headings and foundational elements, providing a strong, elegant base.

secondary

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

accent

#73777C (Medium Grey) for subtle highlights, interactive states, or decorative borders.

background

#C8CDD3 (Soft 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 #A1A5AC or #C8CDD3 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 #C8CDD3 background.

Recommended combinations

Inkwell Depth

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

#2C2F33 · #4B4E54 · #73777C

Aged Page

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

#C8CDD3 · #A1A5AC · #4B4E54

Stone Carving

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

#2C2F33 · #73777C · #C8CDD3

CSS variables

:root {
  --dark-academia-ink-2-1: #2C2F33;
  --dark-academia-ink-2-2: #4B4E54;
  --dark-academia-ink-2-3: #73777C;
  --dark-academia-ink-2-4: #A1A5AC;
  --dark-academia-ink-2-5: #C8CDD3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dark-academia-ink-2": {
        1: "#2C2F33",
        2: "#4B4E54",
        3: "#73777C",
        4: "#A1A5AC",
        5: "#C8CDD3",
      }
    }
  }
}

Hex values

Color 1#2C2F33

Color 2#4B4E54

Color 3#73777C

Color 4#A1A5AC

Color 5#C8CDD3

Accessibility

Contrast checker

1.6:1Fail

3:1Fail

5.4:1AA

8.4:1AAA

1.6:1Fail

1.9:1Fail

3.4:1AA18

5.2:1AA

3:1Fail

1.9:1Fail

1.8:1Fail

2.8:1Fail

5.4:1AA

3.4:1AA18

1.8:1Fail

1.5:1Fail

8.4:1AAA

5.2:1AA

2.8:1Fail

1.5:1Fail

Similar palettes

More like Dark Academia Ink