Amethyst Charismatic Color Palette for Fantasy Gaming Brand | ColorFl...

Amethyst#7B4B94

Burgundy#6D3944

Slate Blue#5A6D7C

Charcoal#3B3A42

Soft Mauve#A58CA9

Palette direction

Amethyst Charismatic Fantasy Color Palette

This palette evokes the enigmatic and charismatic aura of Astarion from Baldur's Gate 3, centered on the rich and mystical amethyst hue to express charm and intrigue, balanced with deep and muted colors to enhance legibility and sophistication.

CustomCreativeamethystpurplegamingfantasy

Desktop website

Amethyst Charismatic Fantasy Color Palette

https://Colorfly.design

Creative color direction

Amethyst Charismatic Fantasy Color Palette

This palette evokes the enigmatic and charismatic aura of Astarion from Baldur's Gate 3, centered on the rich and mystical amethyst hue to express charm and intrigue, balanced with deep and muted colors to enhance legibility and sophistication.

Explore the color system View examples Guidelines

Browser tab & favicon

Amethyst Charismatic Fantasy Color Palette

https://Colorfly.design

16px source shown at 4x Favicon inspection

Check whether the symbol stays distinct before it reaches the browser tab.

Instagram post

colorfly

Logo color pairings

9.1:1

9.1:1

5.4:1

Logo pattern

Gradients

Mobile website

9:41

Creative Amethyst Charismatic Fantasy Color Palette

The main colors combine a deep amethyst purple with a muted burgundy and a dusty slate blue, creating a unique yet harmonious trio that reflects Astarion's mystique and allure while maintaining contrast and visual interest.

iPhone app icon

9:41

Wednesday, July 109:41

Email signature

New message

Tohello@client.com

SubjectColor direction and next steps

Hi Jordan,

Here is the refined color direction we discussed. The system is ready for review.

Avery StonePalette designeravery@colorfly.comhttps://Colorfly.design

Analytics system

Pie, bar, and trend charts reveal whether the palette can support clear, expressive product interfaces.

Audience split

Monthly growth

Trend line

Continue to Color Roles

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Amethyst #7B4B94

HeadlineUsed for main titles and key messages.Burgundy #6D3944

LinkUsed for links and interactive text.Amethyst #7B4B94

Buttons

Primary Button

Contrast6.41:1AA

BackgroundAmethyst #7B4B94

TextIvory #FFFFFF

Secondary Button

Contrast9.06:1AA

BackgroundBurgundy #6D3944

TextIvory #FFFFFF

Outlined Button

Contrast6.41:1AA

BorderAmethyst #7B4B94

TextAmethyst #7B4B94

Interface

TextDefault readable body text.Onyx #1B1B1F

Bg LightLight page or section background.Ivory #FFFFFF

Bg DarkDark page or section background.Alabaster #F4F1ED

IconSmall interface icons and marks.Charcoal #3B3A42

BorderCards, inputs, and component borders.Charcoal #3B3A42

DividerSubtle separators between content.Charcoal #3B3A42

OutlineFocus rings and emphasis outlines.Charcoal #3B3A42

Continue to Color Specs

Print Color Values

CMYK values are calculated from HEX by default. Adjust them only when preparing print materials.

Screen colors stay unchanged.Manual CMYK edits are used in exports and handoff.

CMYK

Calculated CMYK

AmethystMain color - #7B4B94

CMYK

Calculated CMYK

BurgundyMain color - #6D3944

CMYK

Calculated CMYK

Slate BlueMain color - #5A6D7C

CMYK

Calculated CMYK

CharcoalSupport color - #3B3A42

CMYK

Calculated CMYK

Soft MauveSupport color - #A58CA9

CMYK

Calculated CMYK

IvoryNeutral color - #FFFFFF

CMYK

Calculated CMYK

AlabasterNeutral color - #F4F1ED

CMYK

Calculated CMYK

OnyxNeutral color - #1B1B1F

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors combine a deep amethyst purple with a muted burgundy and a dusty slate blue, creating a unique yet harmonious trio that reflects Astarion's mystique and allure while maintaining contrast and visual interest.

PrimaryAmethyst

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Amethyst purple evokes mystery and luxury fitting Astarion's charm and supernatural essence.

HEX#7B4B94

RGB123, 75, 148

HSL279, 33, 44

CMYK17, 49, 0, 42

SecondaryBurgundy

RolesBtn Secondary Bg, Headline

Muted burgundy adds a seductive and intense undercurrent, complementing amethyst with depth.

HEX#6D3944

RGB109, 57, 68

HSL347, 31, 33

CMYK0, 48, 38, 57

TertiarySlate Blue

Dusty slate blue balances the palette with cool calmness, softening the warmth and adding subtle sophistication.

HEX#5A6D7C

RGB90, 109, 124

HSL206, 16, 42

CMYK27, 12, 0, 51

Support Colors

Support colors extend the palette with a dark charcoal for icons and borders, and a soft mauve to enhance accents and provide subtle variety without distracting from main colors.

Charcoal

RolesIcon, Border, Divider, Outline

Charcoal anchors the palette with strong, legible accents that complement the purples and reds.

HEX#3B3A42

RGB59, 58, 66

HSL248, 6, 24

CMYK11, 12, 0, 74

Soft Mauve

Soft mauve offers a gentle supporting color that harmonizes with amethyst and tones down intensity where needed.

HEX#A58CA9

RGB165, 140, 169

HSL292, 14, 61

CMYK2, 17, 0, 34

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Ivory

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Alabaster

RolesBg Dark

HEX#F4F1ED

RGB244, 241, 237

HSL34, 24, 94

CMYK0, 1, 3, 4

Onyx

RolesText

HEX#1B1B1F

RGB27, 27, 31

HSL240, 7, 11

CMYK13, 13, 0, 88

Continue to Export

Export and Handoff

Copy palette values, role tokens, animated gradient snippets, and structured handoff data for websites, design systems, and client work.

Export logo in seconds

Click to copy and go to Logo Export on myLogo.review to export your logo files in seconds.

Use when: you want to send this palette into myLogo.review.

COLORFLY_PALETTE_V2
{
    "format": "colorfly_palette_v2",
    "source": "colorfly.design",
    "colors": [
        {
            "name": "Amethyst",
            "hex": "#7B4B94",
            "role": "main",
            "cmyk": {
                "c": 17,
                "m": 49,
                "y": 0,
                "k": 42,
                "source": "colorfly"
            }
        },
        {
            "name": "Burgundy",
            "hex": "#6D3944",
            "role": "main",
            "cmyk": {
                "c": 0,
                "m": 48,
                "y": 38,
                "k": 57,
                "source": "colorfly"
            }
        },
        {
            "name": "Slate Blue",
            "hex": "#5A6D7C",
            "role": "main",
            "cmyk": {
                "c": 27,
                "m": 12,
                "y": 0,
                "k": 51,
                "source": "colorfly"
            }
        },
        {
            "name": "Charcoal",
            "hex": "#3B3A42",
            "role": "support",
            "cmyk": {
                "c": 11,
                "m": 12,
                "y": 0,
                "k": 74,
                "source": "colorfly"
            }
        },
        {
            "name": "Soft Mauve",
            "hex": "#A58CA9",
            "role": "support",
            "cmyk": {
                "c": 2,
                "m": 17,
                "y": 0,
                "k": 34,
                "source": "colorfly"
            }
        },
        {
            "name": "Ivory",
            "hex": "#FFFFFF",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 0,
                "y": 0,
                "k": 0,
                "source": "colorfly"
            }
        },
        {
            "name": "Alabaster",
            "hex": "#F4F1ED",
            "role": "neutral",
            "cmyk": {
                "c": 0,
                "m": 1,
                "y": 3,
                "k": 4,
                "source": "colorfly"
            }
        },
        {
            "name": "Onyx",
            "hex": "#1B1B1F",
            "role": "neutral",
            "cmyk": {
                "c": 13,
                "m": 13,
                "y": 0,
                "k": 88,
                "source": "colorfly"
            }
        }
    ]
}
END_COLORFLY_PALETTE

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.

:root {
  --color-amethyst: #7B4B94;
  --color-burgundy: #6D3944;
  --color-slate-blue: #5A6D7C;
  --color-charcoal: #3B3A42;
  --color-soft-mauve: #A58CA9;
  --color-ivory: #FFFFFF;
  --color-alabaster: #F4F1ED;
  --color-onyx: #1B1B1F;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.

:root {
  --role-logo: #7B4B94;
  --role-link: #7B4B94;
  --role-btn-primary-bg: #7B4B94;
  --role-btn-outlined-border: #7B4B94;
  --role-btn-outlined-text: #7B4B94;
  --role-btn-secondary-bg: #6D3944;
  --role-headline: #6D3944;
  --role-icon: #3B3A42;
  --role-border: #3B3A42;
  --role-divider: #3B3A42;
  --role-outline: #3B3A42;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F4F1ED;
  --role-text: #1B1B1F;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.

{
    "amethyst": "#7B4B94",
    "burgundy": "#6D3944",
    "slate-blue": "#5A6D7C",
    "charcoal": "#3B3A42",
    "soft-mauve": "#A58CA9",
    "ivory": "#FFFFFF",
    "alabaster": "#F4F1ED",
    "onyx": "#1B1B1F"
}

Moving gradient background

Copy the animated radial gradient background from the visualizer, with this palette already applied.

Use when: you want the hero gradient effect.

<div class="colorfly-moving-gradient-bg">
  <span class="colorfly-gradient-spark" aria-hidden="true"></span>
  <div>
    <small>Motion gradient</small>
    <h2>Gradient background</h2>
    <p>A moving brand gradient built from your palette.</p>
  </div>
</div>

<style>
.colorfly-moving-gradient-bg {
  --gradient-anchor: #7B4B94;
  --gradient-partner: #B69CC4;
  --gradient-accent: #3B3A42;
  --gradient-text: #000000;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  overflow: hidden;
  padding: 42px;
  color: var(--gradient-text);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%),
    linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor));
  background-size: 160% 160%, 180% 180%, 240% 240%;
  animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite;
}
.colorfly-moving-gradient-bg > div {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: center;
}
.colorfly-moving-gradient-bg::before,
.colorfly-moving-gradient-bg::after,
.colorfly-gradient-spark {
  content: "";
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.colorfly-moving-gradient-bg::before {
  left: -10%;
  top: -18%;
  width: min(520px, 72%);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%),
    radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%);
  opacity: .86;
  animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite;
}
.colorfly-moving-gradient-bg::after {
  right: -12%;
  bottom: -24%;
  width: min(620px, 82%);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%),
    radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%);
  opacity: .78;
  animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite;
}
.colorfly-gradient-spark {
  left: 42%;
  top: 44%;
  width: min(360px, 54%);
  background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%);
  opacity: .46;
  animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite;
}
@keyframes colorfly-gradient-bg {
  0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; }
  18% { background-position: 44% 88%, 58% 12%, 34% 22%; }
  39% { background-position: 86% 38%, 18% 74%, 86% 64%; }
  63% { background-position: 26% 16%, 84% 92%, 42% 100%; }
  82% { background-position: 68% 68%, 32% 30%, 100% 34%; }
}
@keyframes colorfly-gradient-orb-one {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  22% { transform: translate3d(78%, 22%, 0) scale(1.12); }
  47% { transform: translate3d(44%, 86%, 0) scale(.92); }
  72% { transform: translate3d(112%, 56%, 0) scale(1.2); }
}
@keyframes colorfly-gradient-orb-two {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  19% { transform: translate3d(-48%, -18%, 0) scale(.9); }
  53% { transform: translate3d(-92%, -62%, 0) scale(1.14); }
  79% { transform: translate3d(-22%, -86%, 0) scale(.98); }
}
@keyframes colorfly-gradient-spark {
  0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); }
  28% { transform: translate3d(52%, -34%, 0) scale(1.08); }
  58% { transform: translate3d(-44%, 38%, 0) scale(.96); }
  84% { transform: translate3d(20%, 28%, 0) scale(1.18); }
}
</style>

Moving gradient text

Copy the animated gradient text treatment from the visualizer, generated from the main and support colors.

Use when: you want gradient headline text.

<div class="colorfly-gradient-text-card">
  <small>Gradient type</small>
  <h2>Gradient on text</h2>
  <p>A moving text gradient built from your palette.</p>
</div>

<style>
.colorfly-gradient-text-card {
  --gradient-text-a: #7B4B94;
  --gradient-text-b: #B69CC4;
  --gradient-text-c: #3B3A42;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 310px;
  overflow: hidden;
  padding: 42px;
  text-align: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%),
    linear-gradient(135deg, #fff, #fbfbfd);
}
.colorfly-gradient-text-card::before,
.colorfly-gradient-text-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}
.colorfly-gradient-text-card::before {
  left: 9%;
  top: 15%;
  width: min(330px, 48%);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%);
  animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite;
}
.colorfly-gradient-text-card::after {
  right: 7%;
  bottom: 6%;
  width: min(360px, 52%);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%);
  animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite;
}
.colorfly-gradient-text-card small,
.colorfly-gradient-text-card p {
  position: relative;
  z-index: 1;
  color: #65616d;
}
.colorfly-gradient-text-card h2 {
  position: relative;
  z-index: 1;
  margin: 10px 0 12px;
  color: transparent;
  font-size: clamp(42px, 8vw, 96px);
  line-height: .92;
  background:
    radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%),
    radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%),
    linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a));
  background-size: 220% 220%, 240% 240%, 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite;
}
@keyframes colorfly-gradient-text-shift {
  0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; }
  27% { background-position: 78% 18%, 28% 82%, 42% 50%; }
  61% { background-position: 36% 92%, 86% 24%, 100% 50%; }
  84% { background-position: 92% 48%, 18% 40%, 58% 50%; }
}
@keyframes colorfly-gradient-text-glow-one {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.92); }
  42% { transform: translate3d(80%, 32%, 0) scale(1.12); }
  72% { transform: translate3d(28%, 86%, 0) scale(.98); }
}
@keyframes colorfly-gradient-text-glow-two {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  36% { transform: translate3d(-62%, -18%, 0) scale(.9); }
  76% { transform: translate3d(-36%, -78%, 0) scale(1.12); }
}
</style>

Start with room to explore

Build your first color system

Try ColorFly with 5 free AI actions and turn your next brand direction into a palette with purpose. No credit card required.

Try it for free

Press Space to load new palette