What colors are in the Dark Academia palette?

The Dark Academia palette has 5 colors: #2B2118, #5C4033, #8B6F47, #A9A18C, #3B3A30.

Where can I use this palette?

It's a Neutral palette — well suited to dashboards, minimal ui, corporate sites, dark-mode surfaces.

Is the Dark Academia palette accessible?

Its darkest and lightest colors have a contrast ratio of 6.12:1. 1 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Dark Academia palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #2B2118 Graphite Accent #5C4033 Taupe Primary #8B6F47 Olive Brown Surface #A9A18C Dark Gray Secondary #3B3A30 Onyx

Dark Academia

5 colors

Open in generator All palettes

Text Graphite — #2B2118

Accent Taupe — #5C4033

Primary Olive Brown — #8B6F47

Surface Dark Gray — #A9A18C

Secondary Onyx — #3B3A30

Contrast matrix

Text on Surface 6.12 AA

Primary on Surface 1.83 Fail

Text on Secondary 1.38 Fail

Surface on Primary 1.83 Fail

Accent on Text 1.68 Fail

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #2B2118;
  --accent: #5C4033;
  --primary: #8B6F47;
  --surface: #A9A18C;
  --secondary: #3B3A30;
}

$dark-academia-text: #2B2118;
$dark-academia-accent: #5C4033;
$dark-academia-primary: #8B6F47;
$dark-academia-surface: #A9A18C;
$dark-academia-secondary: #3B3A30;

// tailwind.config.js — theme.extend.colors
colors: {
  'dark-academia': {
    'text': '#2B2118',
    'accent': '#5C4033',
    'primary': '#8B6F47',
    'surface': '#A9A18C',
    'secondary': '#3B3A30',
  },
}

{
    "dark-academia": {
        "text": {
            "value": "#2B2118",
            "type": "color"
        },
        "accent": {
            "value": "#5C4033",
            "type": "color"
        },
        "primary": {
            "value": "#8B6F47",
            "type": "color"
        },
        "surface": {
            "value": "#A9A18C",
            "type": "color"
        },
        "secondary": {
            "value": "#3B3A30",
            "type": "color"
        }
    }
}

{
    "text": "#2B2118",
    "accent": "#5C4033",
    "primary": "#8B6F47",
    "surface": "#A9A18C",
    "secondary": "#3B3A30"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#2B2118
#5C4033
#8B6F47
#A9A18C
#3B3A30

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Dark Academia

Contrast matrix

Export tokens

How the roles work

Related palettes