What colors are in the Ink & Gold palette?

The Ink & Gold palette has 5 colors: #0A0A0A, #1C1A16, #8A6A2B, #C9A557, #F3EAD6.

Where can I use this palette?

It's a Dark palette — well suited to dark mode, dashboards, gaming ui, hero sections.

Is the Ink & Gold palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.55:1. 4 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 Ink & Gold palette?

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

Text #0A0A0A Jet Black Secondary #1C1A16 Graphite Accent #8A6A2B Olive Brown Primary #C9A557 Brass Surface #F3EAD6 Eggshell

Ink & Gold

Luxury Premium commerce 5 colors

Gold is a metal, not a highlighter — it works at 8% of the surface area, sitting on true blacks with a warm cast.

Open in generator All palettes

Text Jet Black — #0A0A0A

Secondary Graphite — #1C1A16

Accent Olive Brown — #8A6A2B

Primary Brass — #C9A557

Surface Eggshell — #F3EAD6

Contrast matrix

Text on Surface 16.55 AAA

Primary on Surface 1.95 Fail

Text on Secondary 1.14 Fail

Surface on Primary 1.95 Fail

Accent on Text 3.94 AA Large

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: #0A0A0A;
  --secondary: #1C1A16;
  --accent: #8A6A2B;
  --primary: #C9A557;
  --surface: #F3EAD6;
}

$ink-gold-text: #0A0A0A;
$ink-gold-secondary: #1C1A16;
$ink-gold-accent: #8A6A2B;
$ink-gold-primary: #C9A557;
$ink-gold-surface: #F3EAD6;

// tailwind.config.js — theme.extend.colors
colors: {
  'ink-gold': {
    'text': '#0A0A0A',
    'secondary': '#1C1A16',
    'accent': '#8A6A2B',
    'primary': '#C9A557',
    'surface': '#F3EAD6',
  },
}

{
    "ink-gold": {
        "text": {
            "value": "#0A0A0A",
            "type": "color"
        },
        "secondary": {
            "value": "#1C1A16",
            "type": "color"
        },
        "accent": {
            "value": "#8A6A2B",
            "type": "color"
        },
        "primary": {
            "value": "#C9A557",
            "type": "color"
        },
        "surface": {
            "value": "#F3EAD6",
            "type": "color"
        }
    }
}

{
    "text": "#0A0A0A",
    "secondary": "#1C1A16",
    "accent": "#8A6A2B",
    "primary": "#C9A557",
    "surface": "#F3EAD6"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0A0A0A
#1C1A16
#8A6A2B
#C9A557
#F3EAD6

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.

Ink & Gold

Contrast matrix

Export tokens

How the roles work

Related palettes