This palette channels Logan Paul’s high-energy, attention-first presence through a hard-edged neon contrast system anchored by the brand’s signature website yellow. The bright core color is paired with deep inky contrast and sharp electric supports, creating a loud but usable identity for digital-first hype, entertainment, and creator-led merchandising.
This palette channels Logan Paul’s high-energy, attention-first presence through a hard-edged neon contrast system anchored by the brand’s signature website yellow. The bright core color is paired with deep inky contrast and sharp electric supports, creating a loud but usable identity for digital-first hype, entertainment, and creator-led merchandising.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors work as a recognizable hype system by combining a signature acid yellow with aggressive black and a vivid pink-red accent. Together they create immediate pop, strong recognition, and enough tension to feel on-brand for entertainment-driven digital experiences.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors work as a recognizable hype system by combining a signature acid yellow with aggressive black and a vivid pink-red accent. Together they create immediate pop, strong recognition, and enough tension to feel on-brand for entertainment-driven digital experiences.
RolesLogo, Btn Primary Bg
This is the brand’s attention color and gives the palette its unmistakable website-recognition hook.
#FFF200255, 242, 057, 100, 500, 5, 100, 0RolesBtn Secondary Bg, Btn Outlined Border, Headline
This anchors the system with a tough, high-contrast frame that makes the bright yellow feel louder.
#0A0A0A10, 10, 100, 0, 40, 0, 0, 96RolesLink, Btn Outlined Text
This adds an energetic digital edge that keeps the palette from becoming a simple black-and-yellow replica.
#FF3D7F255, 61, 127340, 100, 620, 76, 50, 0The support colors extend the palette with disciplined utility tones that keep the neon core readable across interfaces. They add controlled emphasis and separation without competing with the main brand signals.
RolesIcon, Outline
This cool accent sharpens UI details and balances the warm intensity of the yellow without overpowering it.
#2A4DFF42, 77, 255230, 100, 5884, 70, 0, 0RolesBorder
This softer metallic note reinforces a premium, trophy-like attitude while staying subordinate to the louder main colors.
#B8A16A184, 161, 10642, 35, 570, 13, 42, 28Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F3F1EC243, 241, 23643, 23, 940, 1, 3, 5RolesBg Dark, Divider, Text, Btn Primary Text
#0F111515, 17, 21220, 17, 729, 19, 0, 92Copy palette values for design systems, websites, and client handoff.
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-signature-volt-yellow: #FFF200;
--color-stage-black: #0A0A0A;
--color-arena-magenta: #FF3D7F;
--color-electric-cobalt: #2A4DFF;
--color-muted-championship-gold: #B8A16A;
--color-pure-white: #FFFFFF;
--color-off-white: #F3F1EC;
--color-near-black: #0F1115;
}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: #FFF200;
--role-btn-primary-bg: #FFF200;
--role-btn-secondary-bg: #0A0A0A;
--role-btn-outlined-border: #0A0A0A;
--role-headline: #0A0A0A;
--role-link: #FF3D7F;
--role-btn-outlined-text: #FF3D7F;
--role-icon: #2A4DFF;
--role-outline: #2A4DFF;
--role-border: #B8A16A;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #0F1115;
--role-divider: #0F1115;
--role-text: #0F1115;
--role-btn-primary-text: #0F1115;
}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.{
"signature-volt-yellow": "#FFF200",
"stage-black": "#0A0A0A",
"arena-magenta": "#FF3D7F",
"electric-cobalt": "#2A4DFF",
"muted-championship-gold": "#B8A16A",
"pure-white": "#FFFFFF",
"off-white": "#F3F1EC",
"near-black": "#0F1115"
}