What colors are in the Champagne Noir palette?

The Champagne Noir palette has 5 colors: #0B0A08, #211E18, #8C7A55, #D8C9A3, #F5F1E8.

Where can I use this palette?

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

Is the Champagne Noir palette accessible?

Its darkest and lightest colors have a contrast ratio of 17.56: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 Champagne Noir palette?

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

Text #0B0A08 Jet Black Secondary #211E18 Graphite Primary #8C7A55 Shadow Accent #D8C9A3 Soft Sage Surface #F5F1E8 Linen

Champagne Noir

Luxury Premium brand sites 5 colors

Near-black warmed by champagne. Luxury is spacing and one metal — the palette gives you the metal and asks you to supply the spacing.

Open in generator All palettes

Text Jet Black — #0B0A08

Secondary Graphite — #211E18

Primary Shadow — #8C7A55

Accent Soft Sage — #D8C9A3

Surface Linen — #F5F1E8

Contrast matrix

Text on Surface 17.56 AAA

Primary on Surface 3.70 AA Large

Text on Secondary 1.19 Fail

Surface on Primary 3.70 AA Large

Accent on Text 12.07 AAA

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: #0B0A08;
  --secondary: #211E18;
  --primary: #8C7A55;
  --accent: #D8C9A3;
  --surface: #F5F1E8;
}

$champagne-noir-text: #0B0A08;
$champagne-noir-secondary: #211E18;
$champagne-noir-primary: #8C7A55;
$champagne-noir-accent: #D8C9A3;
$champagne-noir-surface: #F5F1E8;

// tailwind.config.js — theme.extend.colors
colors: {
  'champagne-noir': {
    'text': '#0B0A08',
    'secondary': '#211E18',
    'primary': '#8C7A55',
    'accent': '#D8C9A3',
    'surface': '#F5F1E8',
  },
}

{
    "champagne-noir": {
        "text": {
            "value": "#0B0A08",
            "type": "color"
        },
        "secondary": {
            "value": "#211E18",
            "type": "color"
        },
        "primary": {
            "value": "#8C7A55",
            "type": "color"
        },
        "accent": {
            "value": "#D8C9A3",
            "type": "color"
        },
        "surface": {
            "value": "#F5F1E8",
            "type": "color"
        }
    }
}

{
    "text": "#0B0A08",
    "secondary": "#211E18",
    "primary": "#8C7A55",
    "accent": "#D8C9A3",
    "surface": "#F5F1E8"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0B0A08
#211E18
#8C7A55
#D8C9A3
#F5F1E8

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.

Champagne Noir

Contrast matrix

Export tokens

How the roles work

Related palettes