What colors are in the Velvet Emerald palette?

The Velvet Emerald palette has 5 colors: #08211A, #0F3D30, #1E6B52, #C4A052, #EFEAD9.

Where can I use this palette?

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

Is the Velvet Emerald palette accessible?

Its darkest and lightest colors have a contrast ratio of 14.03: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 Velvet Emerald palette?

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

Text #08211A Graphite Secondary #0F3D30 Bottle Green Accent #1E6B52 Hunter Green Primary #C4A052 Brass Surface #EFEAD9 Eggshell

Velvet Emerald

Luxury Hospitality & fashion 5 colors

Deep emerald with an old-gold line, the palette of a members-only lobby. The green is the surface, not the accent — a rare inversion that reads expensive.

Open in generator All palettes

Text Graphite — #08211A

Secondary Bottle Green — #0F3D30

Accent Hunter Green — #1E6B52

Primary Brass — #C4A052

Surface Eggshell — #EFEAD9

Contrast matrix

Text on Surface 14.03 AAA

Primary on Surface 2.05 Fail

Text on Secondary 1.39 Fail

Surface on Primary 2.05 Fail

Accent on Text 2.64 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: #08211A;
  --secondary: #0F3D30;
  --accent: #1E6B52;
  --primary: #C4A052;
  --surface: #EFEAD9;
}

$velvet-emerald-text: #08211A;
$velvet-emerald-secondary: #0F3D30;
$velvet-emerald-accent: #1E6B52;
$velvet-emerald-primary: #C4A052;
$velvet-emerald-surface: #EFEAD9;

// tailwind.config.js — theme.extend.colors
colors: {
  'velvet-emerald': {
    'text': '#08211A',
    'secondary': '#0F3D30',
    'accent': '#1E6B52',
    'primary': '#C4A052',
    'surface': '#EFEAD9',
  },
}

{
    "velvet-emerald": {
        "text": {
            "value": "#08211A",
            "type": "color"
        },
        "secondary": {
            "value": "#0F3D30",
            "type": "color"
        },
        "accent": {
            "value": "#1E6B52",
            "type": "color"
        },
        "primary": {
            "value": "#C4A052",
            "type": "color"
        },
        "surface": {
            "value": "#EFEAD9",
            "type": "color"
        }
    }
}

{
    "text": "#08211A",
    "secondary": "#0F3D30",
    "accent": "#1E6B52",
    "primary": "#C4A052",
    "surface": "#EFEAD9"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#08211A
#0F3D30
#1E6B52
#C4A052
#EFEAD9

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.

Velvet Emerald

Contrast matrix

Export tokens

How the roles work

Related palettes