What colors are in the Cyberpunk Neon palette?

The Cyberpunk Neon palette has 5 colors: #0D0221, #FF2A6D, #05D9E8, #D1F7FF, #7700FF.

Where can I use this palette?

It's a Vibrant palette — well suited to landing pages, social media graphics, creative branding, calls to action.

Is the Cyberpunk Neon palette accessible?

Its darkest and lightest colors have a contrast ratio of 17.62:1. 4 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 Cyberpunk Neon palette?

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

Text #0D0221 Jet Black Accent #FF2A6D Flamingo Red Secondary #05D9E8 Dark Turquoise Surface #D1F7FF Ice Blue Primary #7700FF Violet

Cyberpunk Neon

5 colors

Open in generator All palettes

Text Jet Black — #0D0221

Accent Flamingo Red — #FF2A6D

Secondary Dark Turquoise — #05D9E8

Surface Ice Blue — #D1F7FF

Primary Violet — #7700FF

Contrast matrix

Text on Surface 17.62 AAA

Primary on Surface 5.72 AA

Text on Secondary 11.55 AAA

Surface on Primary 5.72 AA

Accent on Text 5.54 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: #0D0221;
  --accent: #FF2A6D;
  --secondary: #05D9E8;
  --surface: #D1F7FF;
  --primary: #7700FF;
}

$cyberpunk-neon-text: #0D0221;
$cyberpunk-neon-accent: #FF2A6D;
$cyberpunk-neon-secondary: #05D9E8;
$cyberpunk-neon-surface: #D1F7FF;
$cyberpunk-neon-primary: #7700FF;

// tailwind.config.js — theme.extend.colors
colors: {
  'cyberpunk-neon': {
    'text': '#0D0221',
    'accent': '#FF2A6D',
    'secondary': '#05D9E8',
    'surface': '#D1F7FF',
    'primary': '#7700FF',
  },
}

{
    "cyberpunk-neon": {
        "text": {
            "value": "#0D0221",
            "type": "color"
        },
        "accent": {
            "value": "#FF2A6D",
            "type": "color"
        },
        "secondary": {
            "value": "#05D9E8",
            "type": "color"
        },
        "surface": {
            "value": "#D1F7FF",
            "type": "color"
        },
        "primary": {
            "value": "#7700FF",
            "type": "color"
        }
    }
}

{
    "text": "#0D0221",
    "accent": "#FF2A6D",
    "secondary": "#05D9E8",
    "surface": "#D1F7FF",
    "primary": "#7700FF"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0D0221
#FF2A6D
#05D9E8
#D1F7FF
#7700FF

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.

Cyberpunk Neon

Contrast matrix

Export tokens

How the roles work

Related palettes