Website Signal Yellow#FAFA2A
Amplified Ember#A8322D
Backstage Charcoal#17181C
Midnight Tour Teal#2F5B66
Dusty Amp Copper#8A6A44
Palette direction

Imagine Dragons Inspired Color Palette

This palette translates an Imagine Dragons-inspired energy into a sharper digital system built around one signature site color and supporting contrasts that feel bold, atmospheric, and performance-ready. The main hues create a recognizable front-and-center identity, while the accents and neutrals keep the interface usable across announcements, merchandising, and media content.

Split ComplementaryCreativeimagine dragons inspiredconcert brandingalt rockmusic website
palette-preview.example
Creative color direction

Imagine Dragons Inspired Color Palette

This palette translates an Imagine Dragons-inspired energy into a sharper digital system built around one signature site color and supporting contrasts that feel bold, atmospheric, and performance-ready. The main hues create a recognizable front-and-center identity, while the accents and neutrals keep the interface usable across announcements, merchandising, and media content.

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 Backstage Charcoal #17181C17.7:1 Excellent
Logo Deep Black #0B0B0Con Website Signal Yellow #FAFA2A17.6:1 Excellent
Logo Pure White #FFFFFFon Dusty Amp Copper #8A6A445.0:1 Strong
Icon color
BackgroundWebsite Signal Yellow#FAFA2ATextDeep Black#0B0B0C
Primary Button17.59:1
AAA

Best for the main action users should notice first.

BackgroundAmplified Ember#A8322DTextPure White#FFFFFF
Secondary Button6.65:1
AA

Useful for softer choices and secondary paths.

BackgroundPaper White#F4F1EATextDusty Amp Copper#8A6A44
Outlined Button4.41:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPaper White#F4F1EATextMidnight Tour Teal#2F5B66
Text Button6.63:1
AA

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

Palette composition8 colorsSplit Complementary color relationship
9:41Imagine Dragons Inspired Color Palette Color role balance
Split Complementary 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.

CImagine Dragons Inspired Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a site-specific golden yellow with a deep volcanic red and a near-black charcoal, creating a high-impact system that feels energetic without becoming chaotic. Their relationship is distinctive enough for a music brand because it balances stage-light intensity with grounded, editorial contrast.

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.Website Signal Yellow #FAFA2A
HeadlineUsed for main titles and key messages.Amplified Ember #A8322D
LinkUsed for links and interactive text.Midnight Tour Teal #2F5B66

Buttons

Primary Button
BackgroundWebsite Signal Yellow #FAFA2A
TextDeep Black #0B0B0C
Secondary Button
BackgroundAmplified Ember #A8322D
TextPure White #FFFFFF
Outlined Button
BackgroundMidnight Tour Teal #2F5B66
TextDusty Amp Copper #8A6A44

Interface

TextDefault readable body text.Deep Black #0B0B0C
Bg LightLight page or section background.Paper White #F4F1EA
Bg DarkDark page or section background.Backstage Charcoal #17181C
IconSmall interface icons and marks.Midnight Tour Teal #2F5B66
BorderCards, inputs, and component borders.Dusty Amp Copper #8A6A44
DividerSubtle separators between content.Dusty Amp Copper #8A6A44
OutlineFocus rings and emphasis outlines.Dusty Amp Copper #8A6A44

Palette Colors

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

Main (Brand) Colors

The main colors combine a site-specific golden yellow with a deep volcanic red and a near-black charcoal, creating a high-impact system that feels energetic without becoming chaotic. Their relationship is distinctive enough for a music brand because it balances stage-light intensity with grounded, editorial contrast.

PrimaryWebsite Signal Yellow

RolesLogo, Btn Primary Bg

This is the signature attention color and the clearest nod to the brand’s website presence.

HEX#FAFA2A
RGB250, 250, 42
HSL60, 95, 57
CMYK0, 0, 83, 2
SecondaryAmplified Ember

RolesHeadline, Btn Secondary Bg

This adds urgency and heat, giving headlines and secondary actions a strong concert-poster feel.

HEX#A8322D
RGB168, 50, 45
HSL2, 58, 42
CMYK0, 70, 73, 34
TertiaryBackstage Charcoal

RolesBg Dark

This near-black anchors the system and delivers the deepest readable tone for interface text and dark surfaces.

HEX#17181C
RGB23, 24, 28
HSL228, 10, 10
CMYK18, 14, 0, 89

Support Colors

The support colors extend the core into cooler atmospheric territory so the palette can handle links, borders, and subtle interface structure without stealing focus from the main brand colors. They stay restrained and supportive, acting like stage haze and light spill around the core signals.

Midnight Tour Teal

RolesLink, Icon, Btn Outlined Border

This muted teal brings a controlled cool contrast that supports navigation and outlines without overpowering the yellow-red core.

HEX#2F5B66
RGB47, 91, 102
HSL192, 37, 29
CMYK54, 11, 0, 60
Dusty Amp Copper

RolesBtn Outlined Text, Border, Outline, Divider

This softened copper bridges the warm main colors and keeps outlined treatments legible with a tactile, tour-merch quality.

HEX#8A6A44
RGB138, 106, 68
HSL33, 34, 40
CMYK0, 23, 51, 46

Neutral Colors

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

Pure White

RolesBtn Secondary Text

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

RolesBg Light

HEX#F4F1EA
RGB244, 241, 234
HSL42, 31, 94
CMYK0, 1, 4, 4
Deep Black

RolesText, Btn Primary Text

HEX#0B0B0C
RGB11, 11, 12
HSL240, 4, 5
CMYK8, 8, 0, 95

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-website-signal-yellow: #FAFA2A;
  --color-amplified-ember: #A8322D;
  --color-backstage-charcoal: #17181C;
  --color-midnight-tour-teal: #2F5B66;
  --color-dusty-amp-copper: #8A6A44;
  --color-pure-white: #FFFFFF;
  --color-paper-white: #F4F1EA;
  --color-deep-black: #0B0B0C;
}

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: #FAFA2A;
  --role-btn-primary-bg: #FAFA2A;
  --role-headline: #A8322D;
  --role-btn-secondary-bg: #A8322D;
  --role-bg-dark: #17181C;
  --role-link: #2F5B66;
  --role-icon: #2F5B66;
  --role-btn-outlined-border: #2F5B66;
  --role-btn-outlined-text: #8A6A44;
  --role-border: #8A6A44;
  --role-outline: #8A6A44;
  --role-divider: #8A6A44;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-light: #F4F1EA;
  --role-text: #0B0B0C;
  --role-btn-primary-text: #0B0B0C;
}

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.
{
    "website-signal-yellow": "#FAFA2A",
    "amplified-ember": "#A8322D",
    "backstage-charcoal": "#17181C",
    "midnight-tour-teal": "#2F5B66",
    "dusty-amp-copper": "#8A6A44",
    "pure-white": "#FFFFFF",
    "paper-white": "#F4F1EA",
    "deep-black": "#0B0B0C"
}
Press Space to load new palette