Palette

Enigma Quill Ink

A sophisticated, somber palette reflecting scholarly pursuits and the dark, contemplative mood of old libraries.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Enigma Quill 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 Enigma Quill Ink.

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

Data visualization

#2F4F4F#696969#A9A9A9#1C1C1C#800080

Palette guide

How to use Enigma Quill Ink

Overview

The "Enigma Quill Ink" palette is a sophisticated, somber collection reflecting scholarly pursuits and the dark, contemplative mood of old libraries. Featuring deep tones like #2F4F4F (dark slate gray), #696969 (mid-gray), and the near-black #1C1C1C, it introduces a subtle, enigmatic #800080 (purple) and a contrasting #A9A9A9 (light gray). This palette is ideal for designers and developers aiming to create a sense of mystery, elegance, and intellectual depth. Its rich, muted quality makes it perfect for sophisticated interfaces, academic branding, or any project requiring a refined, introspective atmosphere with a touch of intrigue.

Best used for

Academic institution websites and publications
Luxury menswear or high-end fashion branding
Library or archival institution identity
Mystery novel covers and literary websites
Sophisticated UI themes for productivity apps
Elegant personal branding or portfolios

Suggested color roles

primary

Utilize #2F4F4F as a deep, distinguished primary color for backgrounds or main content areas, conveying seriousness and depth.

secondary

Apply #696969 for supportive elements, subheadings, or less prominent text, offering a harmonious mid-tone.

accent

Reserve #800080 for subtle, enigmatic accents, hover states, or small graphical details to add a touch of intriguing color.

background

Employ #1C1C1C as a dark, immersive background, or #A9A9A9 for a lighter, contrasting base that allows dark elements to stand out.

text

White or #A9A9A9 text provides excellent readability on the darker colors. For lighter backgrounds, use #1C1C1C.

Accessibility notes

White or #A9A9A9 text on #1C1C1C, #2F4F4F, #696969, and #800080 provides excellent contrast for readability.
Avoid using dark text on #A9A9A9 for body copy; reserve dark text for headings or large elements on this lighter gray.
Ensure interactive elements are clearly distinguishable, perhaps using the purple #800080 for hover or active states.
Test color pairings thoroughly for WCAG compliance, especially for text and critical UI components.

Recommended combinations

Scholarly Depth

Ideal for creating deep, layered backgrounds, content blocks, or visual hierarchy in a sophisticated, dark mode interface.

#1C1C1C · #2F4F4F · #696969

Elegant Contrast

Perfect for layouts where a light background highlights deep, distinguished text and a subtle, mysterious accent color.

#A9A9A9 · #2F4F4F · #800080

Mysterious Aura

Use this for graphical elements, subtle patterns, or UI components that require a blend of mystery and refined color.

#696969 · #800080 · #1C1C1C

CSS variables

:root {
  --enigma-quill-ink-1: #2F4F4F;
  --enigma-quill-ink-2: #696969;
  --enigma-quill-ink-3: #A9A9A9;
  --enigma-quill-ink-4: #1C1C1C;
  --enigma-quill-ink-5: #800080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "enigma-quill-ink": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#A9A9A9",
        4: "#1C1C1C",
        5: "#800080",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#696969

Color 3#A9A9A9

Color 4#1C1C1C

Color 5#800080

Accessibility

Contrast checker

1.6:1Fail

3.8:1AA18

1.9:1Fail

1.1:1Fail

1.6:1Fail

2.3:1Fail

3.1:1AA18

1.7:1Fail

3.8:1AA18

2.3:1Fail

7.3:1AAA

4:1AA18