What colors are in the Chain Violet palette?

The Chain Violet palette has 5 colors: #0A0616, #1E103A, #7C3AED, #C4A5FF, #EDE7FB.

Where can I use this palette?

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

Is the Chain Violet palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.59: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 Chain Violet palette?

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

Text #0A0616 Jet Black Secondary #1E103A Russian Violet Primary #7C3AED Blue Violet Accent #C4A5FF Wisteria Surface #EDE7FB Lavender

Chain Violet

Futuristic Web3 & crypto 5 colors

A violet-on-black system for wallets and explorers. The accent glows because the surface is nearly lightless — depth comes from chroma, not shadow.

Open in generator All palettes

Text Jet Black — #0A0616

Secondary Russian Violet — #1E103A

Primary Blue Violet — #7C3AED

Accent Wisteria — #C4A5FF

Surface Lavender — #EDE7FB

Contrast matrix

Text on Surface 16.59 AAA

Primary on Surface 4.73 AA

Text on Secondary 1.13 Fail

Surface on Primary 4.73 AA

Accent on Text 9.68 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: #0A0616;
  --secondary: #1E103A;
  --primary: #7C3AED;
  --accent: #C4A5FF;
  --surface: #EDE7FB;
}

$chain-violet-text: #0A0616;
$chain-violet-secondary: #1E103A;
$chain-violet-primary: #7C3AED;
$chain-violet-accent: #C4A5FF;
$chain-violet-surface: #EDE7FB;

// tailwind.config.js — theme.extend.colors
colors: {
  'chain-violet': {
    'text': '#0A0616',
    'secondary': '#1E103A',
    'primary': '#7C3AED',
    'accent': '#C4A5FF',
    'surface': '#EDE7FB',
  },
}

{
    "chain-violet": {
        "text": {
            "value": "#0A0616",
            "type": "color"
        },
        "secondary": {
            "value": "#1E103A",
            "type": "color"
        },
        "primary": {
            "value": "#7C3AED",
            "type": "color"
        },
        "accent": {
            "value": "#C4A5FF",
            "type": "color"
        },
        "surface": {
            "value": "#EDE7FB",
            "type": "color"
        }
    }
}

{
    "text": "#0A0616",
    "secondary": "#1E103A",
    "primary": "#7C3AED",
    "accent": "#C4A5FF",
    "surface": "#EDE7FB"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0A0616
#1E103A
#7C3AED
#C4A5FF
#EDE7FB

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.

Chain Violet

Contrast matrix

Export tokens

How the roles work

Related palettes