This palette channels the bold, arena-ready energy of Imagine Dragons through a vivid electric red, a deep performance black, and a charged gold accent. The combination feels dramatic and anthemic while still working as a clear system for modern branding and digital UI.
This palette channels the bold, arena-ready energy of Imagine Dragons through a vivid electric red, a deep performance black, and a charged gold accent. The combination feels dramatic and anthemic while still working as a clear system for modern branding and digital UI.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a vivid red, a near-black, and a bright gold to create a high-energy system that feels explosive, cinematic, and instantly recognizable. They work together as a stage-lit identity with enough contrast to support both performance-driven branding and readable interfaces.
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 combine a vivid red, a near-black, and a bright gold to create a high-energy system that feels explosive, cinematic, and instantly recognizable. They work together as a stage-lit identity with enough contrast to support both performance-driven branding and readable interfaces.
RolesLogo, Btn Primary Bg
Crimson delivers the urgent, explosive energy that anchors the brand and gives it immediate stage presence.
#E10600225, 6, 02, 100, 440, 97, 100, 12RolesBtn Secondary Bg
Charcoal adds depth and seriousness, keeping the palette grounded and making the brighter colors hit harder.
#11111117, 17, 170, 0, 70, 0, 0, 93RolesLink, Btn Outlined Border, Btn Outlined Text, Headline
Goldenrod introduces a charged accent that echoes spotlight warmth and adds a memorable performance-ready glow.
#D4A017212, 160, 2343, 80, 460, 25, 89, 17The support colors extend the main palette with cooler stage-like tension and a subdued warm balance, helping the red and gold feel more dimensional without stealing attention. They are restrained enough to reinforce the identity while improving usability across UI states and supporting graphics.
RolesIcon, Border
Steel Blue cools the palette slightly and gives icons and borders a disciplined contrast against the louder main colors.
#2F4B6647, 75, 102209, 37, 2954, 26, 0, 60RolesDivider, Outline
Olive Brown softens the intensity with an earthy note that keeps dividers and outlines present but understated.
#6E5A3D110, 90, 6136, 29, 340, 18, 45, 57Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Light
#F4F1EA244, 241, 23442, 31, 940, 1, 4, 4RolesBg Dark, Text
#0A0A0A10, 10, 100, 0, 40, 0, 0, 96Copy 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-crimson: #E10600;
--color-charcoal: #111111;
--color-goldenrod: #D4A017;
--color-steel-blue: #2F4B66;
--color-olive-brown: #6E5A3D;
--color-white: #FFFFFF;
--color-ivory: #F4F1EA;
--color-black: #0A0A0A;
}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: #E10600;
--role-btn-primary-bg: #E10600;
--role-btn-secondary-bg: #111111;
--role-link: #D4A017;
--role-btn-outlined-border: #D4A017;
--role-btn-outlined-text: #D4A017;
--role-headline: #D4A017;
--role-icon: #2F4B66;
--role-border: #2F4B66;
--role-divider: #6E5A3D;
--role-outline: #6E5A3D;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-light: #F4F1EA;
--role-bg-dark: #0A0A0A;
--role-text: #0A0A0A;
}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.{
"crimson": "#E10600",
"charcoal": "#111111",
"goldenrod": "#D4A017",
"steel-blue": "#2F4B66",
"olive-brown": "#6E5A3D",
"white": "#FFFFFF",
"ivory": "#F4F1EA",
"black": "#0A0A0A"
}