Electric Magenta#E1007A
Neon Aqua#28BFD6
Deep Teal Ink#0E4A5A
Soft Aqua Mist#7CD7E3
Steel Lagoon#3E93A6
Palette direction

Electric Beast Gaming Color Palette

A punchy aqua-and-magenta palette with a playful, high-energy contrast that fits gaming, esports, or youth-focused digital brands. The colors feel instantly recognizable together: electric pink creates motion and attitude, while icy cyan and deep teal keep the system legible and modern.

CustomTechelectricplayfulaquamagenta
palette-preview.example
Tech color direction

Electric Beast Gaming Color Palette

A punchy aqua-and-magenta palette with a playful, high-energy contrast that fits gaming, esports, or youth-focused digital brands. The colors feel instantly recognizable together: electric pink creates motion and attitude, while icy cyan and deep teal keep the system legible and modern.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Pure White #FFFFFFon Deep Teal Ink #0E4A5A9.8:1 Excellent
Logo Near-Black Ink #081114on Neon Aqua #28BFD68.6:1 Excellent
Logo Pure White #FFFFFFon Electric Magenta #E1007A4.7:1 Strong
Logo Near-Black Ink #081114on Pure White #FFFFFF19.1:1 Excellent
Icon color
BackgroundElectric Magenta#E1007ATextPure White#FFFFFF
Primary Button4.68:1
AA

Best for the main action users should notice first.

BackgroundNeon Aqua#28BFD6TextNear-Black Ink#081114
Secondary Button8.64:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextFrosted White#F4F7F8
Outlined Button1.08:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextNeon Aqua#28BFD6
Text Button2.21:1
Low

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsCustom color relationship
9:41Electric Beast Gaming Color Palette Color role balance
Custom system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CElectric Beast Gaming Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The palette pairs a hot magenta with vivid aqua and deep teal, creating a recognizable streetwise-tech identity rather than a standard harmonious set. The contrast is energetic and branded, with enough separation to keep the system flexible

Clear roles create a consistent brand experience.

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.Electric Magenta #E1007A
HeadlineUsed for main titles and key messages.Deep Teal Ink #0E4A5A
LinkUsed for links and interactive text.Neon Aqua #28BFD6

Buttons

Primary Button
BackgroundElectric Magenta #E1007A
TextPure White #FFFFFF
Secondary Button
BackgroundNeon Aqua #28BFD6
TextNear-Black Ink #081114
Outlined Button
BackgroundNeon Aqua #28BFD6
TextFrosted White #F4F7F8

Interface

TextDefault readable body text.Near-Black Ink #081114
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Near-Black Ink #081114
IconSmall interface icons and marks.Soft Aqua Mist #7CD7E3
BorderCards, inputs, and component borders.Soft Aqua Mist #7CD7E3
DividerSubtle separators between content.Steel Lagoon #3E93A6
OutlineFocus rings and emphasis outlines.Steel Lagoon #3E93A6

Palette Colors

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

Main (Brand) Colors

The palette pairs a hot magenta with vivid aqua and deep teal, creating a recognizable streetwise-tech identity rather than a standard harmonious set. The contrast is energetic and branded, with enough separation to keep the system flexible

PrimaryElectric Magenta

RolesLogo, Btn Primary Bg

Drives the brand's attitude and instant recognition with a sharp, animated punch.

HEX#E1007A
RGB225, 0, 122
HSL327, 100, 44
CMYK0, 100, 46, 12
SecondaryNeon Aqua

RolesLink, Btn Secondary Bg, Btn Outlined Border

Adds motion and digital clarity, giving the interface a bright interactive signal.

HEX#28BFD6
RGB40, 191, 214
HSL188, 69, 50
CMYK81, 11, 0, 16
TertiaryDeep Teal Ink

RolesHeadline

Provides a grounded, slightly edgy anchor that keeps the bright accents feeling intentional.

HEX#0E4A5A
RGB14, 74, 90
HSL193, 73, 20
CMYK84, 18, 0, 65

Support Colors

Muted blue-green accents extend the palette into UI details without competing with the main logo colors. They help separate structure, controls, and emphasis while staying inside a

Soft Aqua Mist

RolesIcon, Border

A lighter aqua support tone that softens interface lines and icons without losing the brand's cool edge.

HEX#7CD7E3
RGB124, 215, 227
HSL187, 65, 69
CMYK45, 5, 0, 11
Steel Lagoon

RolesDivider, Outline

A restrained teal-blue accent that supports dividers and outlines with calm structure and good readability.

HEX#3E93A6
RGB62, 147, 166
HSL191, 46, 45
CMYK63, 11, 0, 35

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Frosted White

RolesBtn Outlined Text

HEX#F4F7F8
RGB244, 247, 248
HSL195, 22, 96
CMYK2, 0, 0, 3
Near-Black Ink

RolesBg Dark, Text, Btn Secondary Text

HEX#081114
RGB8, 17, 20
HSL195, 43, 5
CMYK60, 15, 0, 92

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

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-electric-magenta: #E1007A;
  --color-neon-aqua: #28BFD6;
  --color-deep-teal-ink: #0E4A5A;
  --color-soft-aqua-mist: #7CD7E3;
  --color-steel-lagoon: #3E93A6;
  --color-pure-white: #FFFFFF;
  --color-frosted-white: #F4F7F8;
  --color-near-black-ink: #081114;
}

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: #E1007A;
  --role-btn-primary-bg: #E1007A;
  --role-link: #28BFD6;
  --role-btn-secondary-bg: #28BFD6;
  --role-btn-outlined-border: #28BFD6;
  --role-headline: #0E4A5A;
  --role-icon: #7CD7E3;
  --role-border: #7CD7E3;
  --role-divider: #3E93A6;
  --role-outline: #3E93A6;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-outlined-text: #F4F7F8;
  --role-bg-dark: #081114;
  --role-text: #081114;
  --role-btn-secondary-text: #081114;
}

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.
{
    "electric-magenta": "#E1007A",
    "neon-aqua": "#28BFD6",
    "deep-teal-ink": "#0E4A5A",
    "soft-aqua-mist": "#7CD7E3",
    "steel-lagoon": "#3E93A6",
    "pure-white": "#FFFFFF",
    "frosted-white": "#F4F7F8",
    "near-black-ink": "#081114"
}
Press Space to load new palette