Electric Yellow#FFD400
Hyper Cyan#00C2FF
Punch Magenta#FF4DA6
Electric Violet#7B61FF
Volt Lime#A8FF2E
Palette direction

Mrbeast Inspired Viral Color Palette

A high-voltage mix of electric yellow, vivid cyan, and punchy magenta creates an instantly attention-grabbing system built for thumbnail energy, fast-paced motion graphics, and viral entertainment branding. The palette stays playful and loud while dark charcoal and clean neutrals keep the interface,

CustomCreativeenergeticboldplayfulviral
palette-preview.example
Creative color direction

Mrbeast Inspired Viral Color Palette

A high-voltage mix of electric yellow, vivid cyan, and punchy magenta creates an instantly attention-grabbing system built for thumbnail energy, fast-paced motion graphics, and viral entertainment branding. The palette stays playful and loud while dark charcoal and clean neutrals keep the interface,

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 Near-Black #111111on Electric Yellow #FFD40013.2:1 Excellent
Logo Near-Black #111111on Hyper Cyan #00C2FF9.1:1 Excellent
Logo Near-Black #111111on Punch Magenta #FF4DA66.2:1 Strong
Logo Near-Black #111111on Pure White #FFFFFF18.9:1 Excellent
Icon color
BackgroundElectric Yellow#FFD400TextNear-Black#111111
Primary Button13.19:1
AAA

Best for the main action users should notice first.

BackgroundHyper Cyan#00C2FFTextNear-Black#111111
Secondary Button9.14:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextPunch Magenta#FF4DA6
Outlined Button3.06:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextHyper Cyan#00C2FF
Text Button2.07:1
Low

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

Palette composition8 colorsCustom color relationship
9:41Mrbeast Inspired Viral 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.

CMrbeast Inspired Viral Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The palette pairs a signature electric yellow with vivid cyan and punchy magenta to create a high-contrast, instantly recognizable entertainment system. These hues feel loud and playful together without depending on a standard tech or brand

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 Yellow #FFD400
HeadlineUsed for main titles and key messages.Punch Magenta #FF4DA6
LinkUsed for links and interactive text.Hyper Cyan #00C2FF

Buttons

Primary Button
BackgroundElectric Yellow #FFD400
TextNear-Black #111111
Secondary Button
BackgroundHyper Cyan #00C2FF
TextNear-Black #111111
Outlined Button
BackgroundPunch Magenta #FF4DA6
TextPunch Magenta #FF4DA6

Interface

TextDefault readable body text.Near-Black #111111
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Near-Black #111111
IconSmall interface icons and marks.Electric Violet #7B61FF
BorderCards, inputs, and component borders.Volt Lime #A8FF2E
DividerSubtle separators between content.Volt Lime #A8FF2E
OutlineFocus rings and emphasis outlines.Volt Lime #A8FF2E

Palette Colors

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

Main (Brand) Colors

The palette pairs a signature electric yellow with vivid cyan and punchy magenta to create a high-contrast, instantly recognizable entertainment system. These hues feel loud and playful together without depending on a standard tech or brand

PrimaryElectric Yellow

RolesLogo, Btn Primary Bg

The loudest recognition color; it delivers the fast, hyper-visible energy associated with viral entertainment and thumbnail-first branding.

HEX#FFD400
RGB255, 212, 0
HSL50, 100, 50
CMYK0, 17, 100, 0
SecondaryHyper Cyan

RolesLink, Btn Secondary Bg

A crisp digital accent that adds motion and freshness, keeping the system feeling online-native and shareable.

HEX#00C2FF
RGB0, 194, 255
HSL194, 100, 50
CMYK100, 24, 0, 0
TertiaryPunch Magenta

RolesHeadline, Btn Outlined Border, Btn Outlined Text

A playful pop hue that adds personality and keeps headlines and outlined actions feeling bold without competing with the primary yellow.

HEX#FF4DA6
RGB255, 77, 166
HSL330, 100, 65
CMYK0, 70, 35, 0

Support Colors

These accents extend the main palette by adding controlled depth and reactive UI support, keeping the overall system vivid without stealing attention from the hero colors.

Electric Violet

RolesIcon

A sharp supporting accent that adds dimensional contrast and helps icons feel expressive against the brighter core colors.

HEX#7B61FF
RGB123, 97, 255
HSL250, 100, 69
CMYK52, 62, 0, 0
Volt Lime

RolesBorder, Divider, Outline

A neon-leaning support tone that reinforces the high-energy feel while working as a functional edge color in UI and motion graphics.

HEX#A8FF2E
RGB168, 255, 46
HSL85, 100, 59
CMYK34, 0, 82, 0

Neutral Colors

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

Pure White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Soft Ivory
HEX#F3F0E8
RGB243, 240, 232
HSL44, 31, 93
CMYK0, 1, 5, 5
Near-Black

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#111111
RGB17, 17, 17
HSL0, 0, 7
CMYK0, 0, 0, 93

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-yellow: #FFD400;
  --color-hyper-cyan: #00C2FF;
  --color-punch-magenta: #FF4DA6;
  --color-electric-violet: #7B61FF;
  --color-volt-lime: #A8FF2E;
  --color-pure-white: #FFFFFF;
  --color-soft-ivory: #F3F0E8;
  --color-near-black: #111111;
}

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: #FFD400;
  --role-btn-primary-bg: #FFD400;
  --role-link: #00C2FF;
  --role-btn-secondary-bg: #00C2FF;
  --role-headline: #FF4DA6;
  --role-btn-outlined-border: #FF4DA6;
  --role-btn-outlined-text: #FF4DA6;
  --role-icon: #7B61FF;
  --role-border: #A8FF2E;
  --role-divider: #A8FF2E;
  --role-outline: #A8FF2E;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #111111;
  --role-text: #111111;
  --role-btn-primary-text: #111111;
  --role-btn-secondary-text: #111111;
}

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-yellow": "#FFD400",
    "hyper-cyan": "#00C2FF",
    "punch-magenta": "#FF4DA6",
    "electric-violet": "#7B61FF",
    "volt-lime": "#A8FF2E",
    "pure-white": "#FFFFFF",
    "soft-ivory": "#F3F0E8",
    "near-black": "#111111"
}
Press Space to load new palette