What colors are in the Aura Aesthetic palette?

The Aura Aesthetic palette has 5 colors: #2D0B4E, #6A1E9A, #B14EFF, #FF6EC7, #00E5FF.

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 Aura Aesthetic palette accessible?

Its darkest and lightest colors have a contrast ratio of 6.54:1. 3 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 Aura Aesthetic palette?

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

Text #2D0B4E Russian Violet Accent #6A1E9A Grape Primary #B14EFF Electric Purple Surface #FF6EC7 Neon Pink Secondary #00E5FF Bright Sky

Aura Aesthetic

5 colors

Open in generator All palettes

Text Russian Violet — #2D0B4E

Accent Grape — #6A1E9A

Primary Electric Purple — #B14EFF

Surface Neon Pink — #FF6EC7

Secondary Bright Sky — #00E5FF

Contrast matrix

Text on Surface 6.54 AA

Primary on Surface 1.54 Fail

Text on Secondary 10.75 AAA

Surface on Primary 1.54 Fail

Accent on Text 1.78 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: #2D0B4E;
  --accent: #6A1E9A;
  --primary: #B14EFF;
  --surface: #FF6EC7;
  --secondary: #00E5FF;
}

$aura-aesthetic-text: #2D0B4E;
$aura-aesthetic-accent: #6A1E9A;
$aura-aesthetic-primary: #B14EFF;
$aura-aesthetic-surface: #FF6EC7;
$aura-aesthetic-secondary: #00E5FF;

// tailwind.config.js — theme.extend.colors
colors: {
  'aura-aesthetic': {
    'text': '#2D0B4E',
    'accent': '#6A1E9A',
    'primary': '#B14EFF',
    'surface': '#FF6EC7',
    'secondary': '#00E5FF',
  },
}

{
    "aura-aesthetic": {
        "text": {
            "value": "#2D0B4E",
            "type": "color"
        },
        "accent": {
            "value": "#6A1E9A",
            "type": "color"
        },
        "primary": {
            "value": "#B14EFF",
            "type": "color"
        },
        "surface": {
            "value": "#FF6EC7",
            "type": "color"
        },
        "secondary": {
            "value": "#00E5FF",
            "type": "color"
        }
    }
}

{
    "text": "#2D0B4E",
    "accent": "#6A1E9A",
    "primary": "#B14EFF",
    "surface": "#FF6EC7",
    "secondary": "#00E5FF"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#2D0B4E
#6A1E9A
#B14EFF
#FF6EC7
#00E5FF

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.

Aura Aesthetic

Contrast matrix

Export tokens

How the roles work

Related palettes