What colors are in the Cyber Blue Purple palette?

The Cyber Blue Purple palette has 5 colors: #05060F, #101228, #3D6BFF, #A855F7, #E4E9FF.

Where can I use this palette?

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

Is the Cyber Blue Purple palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.74: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 Cyber Blue Purple palette?

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

Text #05060F Jet Black Secondary #101228 Graphite Accent #3D6BFF Royal Blue Primary #A855F7 Medium Orchid Surface #E4E9FF Lavender

Cyber Blue Purple

Futuristic Web3 landing pages 5 colors

Two accents at full chroma, an electric blue and a synthetic purple, over a near-lightless ground. Everything structural stays desaturated so the signal colors do all the shouting.

Open in generator All palettes

Text Jet Black — #05060F

Secondary Graphite — #101228

Accent Royal Blue — #3D6BFF

Primary Medium Orchid — #A855F7

Surface Lavender — #E4E9FF

Contrast matrix

Text on Surface 16.74 AAA

Primary on Surface 3.28 AA Large

Text on Secondary 1.10 Fail

Surface on Primary 3.28 AA Large

Accent on Text 4.57 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: #05060F;
  --secondary: #101228;
  --accent: #3D6BFF;
  --primary: #A855F7;
  --surface: #E4E9FF;
}

$cyber-blue-purple-text: #05060F;
$cyber-blue-purple-secondary: #101228;
$cyber-blue-purple-accent: #3D6BFF;
$cyber-blue-purple-primary: #A855F7;
$cyber-blue-purple-surface: #E4E9FF;

// tailwind.config.js — theme.extend.colors
colors: {
  'cyber-blue-purple': {
    'text': '#05060F',
    'secondary': '#101228',
    'accent': '#3D6BFF',
    'primary': '#A855F7',
    'surface': '#E4E9FF',
  },
}

{
    "cyber-blue-purple": {
        "text": {
            "value": "#05060F",
            "type": "color"
        },
        "secondary": {
            "value": "#101228",
            "type": "color"
        },
        "accent": {
            "value": "#3D6BFF",
            "type": "color"
        },
        "primary": {
            "value": "#A855F7",
            "type": "color"
        },
        "surface": {
            "value": "#E4E9FF",
            "type": "color"
        }
    }
}

{
    "text": "#05060F",
    "secondary": "#101228",
    "accent": "#3D6BFF",
    "primary": "#A855F7",
    "surface": "#E4E9FF"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#05060F
#101228
#3D6BFF
#A855F7
#E4E9FF

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.

Cyber Blue Purple

Contrast matrix

Export tokens

How the roles work

Related palettes