This palette is energized by vivid blues and yellows from the arcade imagery, combined with deep blacks and grays for contrast and depth, creating a dynamic and youthful system suitable for gaming or tech-related brands.
This palette is energized by vivid blues and yellows from the arcade imagery, combined with deep blacks and grays for contrast and depth, creating a dynamic and youthful system suitable for gaming or tech-related brands.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors balance electric blue and a bright yellow-orange, providing high contrast and energy that reflects the arcade gaming vibe while maintaining visual harmony.
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 balance electric blue and a bright yellow-orange, providing high contrast and energy that reflects the arcade gaming vibe while maintaining visual harmony.
RolesLogo, Link, Btn Primary Bg, Headline
Electric Blue conveys energy and interactivity, evoking technology and excitement in digital environments.
#0A33FF10, 51, 255230, 100, 5296, 80, 0, 0RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Bright Amber adds warmth and vibrancy that signals attention and optimism, contrasting dynamically with the blue.
#FFB800255, 184, 043, 100, 500, 28, 100, 0Energetic Orange emphasizes enthusiasm and activity, reinforcing the brightness brought by yellow while distinctively complementing blue.
#FF6F11255, 111, 1724, 100, 530, 56, 93, 0Support colors extend the palette with a softer blue and muted gold that balance intensity, provide subtle accents, and enhance usability without overpowering the main colors.
RolesIcon, Border, Divider, Outline
Soft Royal Blue offers a subdued harmonic contrast to Electric Blue, useful for understated elements like borders and icons.
#254BFF37, 75, 255230, 100, 5785, 71, 0, 0RolesBg Dark
Muted Gold grounds the palette with a deeper tone that complements Bright Amber and ensures depth in background applications.
#B28B00178, 139, 047, 100, 350, 22, 100, 30Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#EDEDED237, 237, 2370, 0, 930, 0, 0, 7RolesText, Btn Secondary Text
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90Copy 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-electric-blue: #0A33FF;
--color-bright-amber: #FFB800;
--color-energetic-orange: #FF6F11;
--color-soft-royal-blue: #254BFF;
--color-muted-gold: #B28B00;
--color-pure-white: #FFFFFF;
--color-light-gray: #EDEDED;
--color-rich-black: #1A1A1A;
}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: #0A33FF;
--role-link: #0A33FF;
--role-btn-primary-bg: #0A33FF;
--role-headline: #0A33FF;
--role-btn-secondary-bg: #FFB800;
--role-btn-outlined-border: #FFB800;
--role-btn-outlined-text: #FFB800;
--role-icon: #254BFF;
--role-border: #254BFF;
--role-divider: #254BFF;
--role-outline: #254BFF;
--role-bg-dark: #B28B00;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-text: #1A1A1A;
--role-btn-secondary-text: #1A1A1A;
}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-blue": "#0A33FF",
"bright-amber": "#FFB800",
"energetic-orange": "#FF6F11",
"soft-royal-blue": "#254BFF",
"muted-gold": "#B28B00",
"pure-white": "#FFFFFF",
"light-gray": "#EDEDED",
"rich-black": "#1A1A1A"
}