What colors are in the Graphite Luxe palette?

The Graphite Luxe palette has 5 colors: #0C0C0E, #1E1E22, #8A8478, #C8B98D, #ECEAE4.

Where can I use this palette?

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

Is the Graphite Luxe palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.24:1. 5 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 Graphite Luxe palette?

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

Text #0C0C0E Jet Black Secondary #1E1E22 Graphite Accent #8A8478 Warm Taupe Primary #C8B98D Tan Surface #ECEAE4 Platinum

Graphite Luxe

Luxury Premium brand 5 colors

Champagne used the way a metal should be, at a fraction of the surface, over graphite and true black. No second accent and no colour; the restraint is the luxury.

Open in generator All palettes

Text Jet Black — #0C0C0E

Secondary Graphite — #1E1E22

Accent Warm Taupe — #8A8478

Primary Tan — #C8B98D

Surface Platinum — #ECEAE4

Contrast matrix

Text on Surface 16.24 AAA

Primary on Surface 1.62 Fail

Text on Secondary 1.18 Fail

Surface on Primary 1.62 Fail

Accent on Text 5.26 AA

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: #0C0C0E;
  --secondary: #1E1E22;
  --accent: #8A8478;
  --primary: #C8B98D;
  --surface: #ECEAE4;
}

$graphite-luxe-text: #0C0C0E;
$graphite-luxe-secondary: #1E1E22;
$graphite-luxe-accent: #8A8478;
$graphite-luxe-primary: #C8B98D;
$graphite-luxe-surface: #ECEAE4;

// tailwind.config.js — theme.extend.colors
colors: {
  'graphite-luxe': {
    'text': '#0C0C0E',
    'secondary': '#1E1E22',
    'accent': '#8A8478',
    'primary': '#C8B98D',
    'surface': '#ECEAE4',
  },
}

{
    "graphite-luxe": {
        "text": {
            "value": "#0C0C0E",
            "type": "color"
        },
        "secondary": {
            "value": "#1E1E22",
            "type": "color"
        },
        "accent": {
            "value": "#8A8478",
            "type": "color"
        },
        "primary": {
            "value": "#C8B98D",
            "type": "color"
        },
        "surface": {
            "value": "#ECEAE4",
            "type": "color"
        }
    }
}

{
    "text": "#0C0C0E",
    "secondary": "#1E1E22",
    "accent": "#8A8478",
    "primary": "#C8B98D",
    "surface": "#ECEAE4"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0C0C0E
#1E1E22
#8A8478
#C8B98D
#ECEAE4

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.

Graphite Luxe

Contrast matrix

Export tokens

How the roles work

Related palettes