Undead Dark Fantasy Color Palette for Gaming Software Brand

Undead Dark Fantasy Color Palette

This palette uses a custom color scheme blending deep, eerie tones with stark contrasting neutrals to embody the dark fantasy, horror, and playful elements of the undead pixelated logo. The main colors evoke a haunting and mystical atmosphere while remaining visually distinct and balanced by softer support tones. Neutrals provide strong contrast for readability and background depth.

ComplementaryTechdark fantasyundeadhorrorgaming

Main (Brand) Colors

The three main colors combine an ominous deep charcoal, an eerie muted teal, and an intense burnt orange to create a dark, mystical, yet playful brand identity that reflects the undead pixelated logo's mood.

PrimaryCharcoal

RolesLogo, Btn Primary Bg, Btn Outlined Border

Charcoal delivers a deep, near-black base representing shadow and mystery in the dark fantasy genre.

HEX#1a1a1a

RGB26, 26, 26

HSL0, 0, 10

CMYK0, 0, 0, 90

SecondaryTeal

RolesLink, Btn Secondary Bg, Btn Outlined Text

Teal injects a cold, haunted vitality balancing the darkness with a spectral, mystical feel.

HEX#3a6d6d

RGB58, 109, 109

HSL180, 31, 33

CMYK47, 0, 0, 57

TertiaryBurnt Orange

RolesHeadline

Burnt Orange brings warm, glowing energy to highlight text and evoke flickering fire, mixing horror with a playful edge.

HEX#d25c1a

RGB210, 92, 26

HSL22, 78, 46

CMYK0, 56, 88, 18

Support Colors

The support colors extend the main palette with muted variations that provide softer accents and subtle contrast without overpowering the mystical, eerie theme.

Slate

RolesIcon, Border, Divider, Outline

Slate adds a subdued medium tone that complements Teal and Charcoal, softening contrasts and providing texture and depth.

HEX#556b6e

RGB85, 107, 110

HSL187, 13, 38

CMYK23, 3, 0, 57

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#f9f9f9

RGB249, 249, 249

HSL0, 0, 98

CMYK0, 0, 0, 2

Snow

RolesBg Dark

HEX#e8e8e8

RGB232, 232, 232

HSL0, 0, 91

CMYK0, 0, 0, 9

Jet

RolesText

HEX#0a0a0a

RGB10, 10, 10

HSL0, 0, 4

CMYK0, 0, 0, 96

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Charcoal", "hex": "#1A1A1A", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } }, { "name": "Teal", "hex": "#3A6D6D", "role": "main", "cmyk": { "c": 47, "m": 0, "y": 0, "k": 57, "source": "colorfly" } }, { "name": "Burnt Orange", "hex": "#D25C1A", "role": "main", "cmyk": { "c": 0, "m": 56, "y": 88, "k": 18, "source": "colorfly" } }, { "name": "Slate", "hex": "#556B6E", "role": "support", "cmyk": { "c": 23, "m": 3, "y": 0, "k": 57, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F9F9F9", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Snow", "hex": "#E8E8E8", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 9, "source": "colorfly" } }, { "name": "Jet", "hex": "#0A0A0A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 96, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --role-logo: #1a1a1a; --role-btn-primary-bg: #1a1a1a; --role-btn-outlined-border: #1a1a1a; --role-link: #3a6d6d; --role-btn-secondary-bg: #3a6d6d; --role-btn-outlined-text: #3a6d6d; --role-headline: #d25c1a; --role-icon: #556b6e; --role-border: #556b6e; --role-divider: #556b6e; --role-outline: #556b6e; --role-bg-light: #f9f9f9; --role-btn-primary-text: #f9f9f9; --role-btn-secondary-text: #f9f9f9; --role-bg-dark: #e8e8e8; --role-text: #0a0a0a; }

<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: #1A1A1A; --gradient-partner: #818181; --gradient-accent: #556B6E; --gradient-text: #FFFFFF; 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>

<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: #1A1A1A; --gradient-text-b: #818181; --gradient-text-c: #556B6E; 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>