This palette channels WWE’s high-energy broadcast identity with bold red, black, and metallic gold accents that feel powerful without losing brand recognition. The neutral system keeps interfaces clean and readable, while the saturated main colors preserve the dramatic, arena-level impact associated with the brand.
This palette channels WWE’s high-energy broadcast identity with bold red, black, and metallic gold accents that feel powerful without losing brand recognition. The neutral system keeps interfaces clean and readable, while the saturated main colors preserve the dramatic, arena-level impact associated with the brand.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine WWE-style signal red, deep black, and metallic gold into a high-contrast system that feels iconic on screens, in motion, and across branded touchpoints. Their relationship is more custom than strictly harmonic, because the goal is faithful WWE-style recognition rather than a textbook color wheel pairing.
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 WWE-style signal red, deep black, and metallic gold into a high-contrast system that feels iconic on screens, in motion, and across branded touchpoints. Their relationship is more custom than strictly harmonic, because the goal is faithful WWE-style recognition rather than a textbook color wheel pairing.
RolesLogo, Btn Primary Bg, Headline
Crimson delivers the signature WWE intensity and gives the palette its most immediate sense of action and impact.
#C8102E200, 16, 46350, 85, 420, 92, 77, 22RolesLink, Btn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Black anchors the palette with a hard-edged broadcast feel that reinforces strength and contrast.
#0000000, 0, 00, 0, 00, 0, 0, 100Gold adds a championship-quality accent that elevates the palette without competing with the dominant red and black.
#D4AF37212, 175, 5546, 65, 520, 17, 74, 17The support colors soften the aggression of the main trio and add usable depth for interface states, overlays, and controlled accent moments. They stay subordinate to the WWE-inspired core while improving balance and flexibility.
RolesIcon, Border
Maroon extends the red family with a deeper, more restrained tone that supports structure and detail.
#6B0F1A107, 15, 26353, 75, 240, 86, 76, 58RolesDivider, Outline
Ochre echoes the gold accent in a quieter form, making separators and outlines feel branded without drawing too much attention.
#9C7A1F156, 122, 3144, 67, 370, 22, 80, 39Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F4F4244, 244, 2440, 0, 960, 0, 0, 4RolesBg Dark, Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy 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: #C8102E;
--color-black: #000000;
--color-gold: #D4AF37;
--color-maroon: #6B0F1A;
--color-ochre: #9C7A1F;
--color-white: #FFFFFF;
--color-ivory: #F4F4F4;
--color-charcoal: #111111;
}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: #C8102E;
--role-btn-primary-bg: #C8102E;
--role-headline: #C8102E;
--role-link: #000000;
--role-btn-secondary-bg: #000000;
--role-btn-outlined-border: #000000;
--role-btn-outlined-text: #000000;
--role-icon: #6B0F1A;
--role-border: #6B0F1A;
--role-divider: #9C7A1F;
--role-outline: #9C7A1F;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #111111;
--role-text: #111111;
}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": "#C8102E",
"black": "#000000",
"gold": "#D4AF37",
"maroon": "#6B0F1A",
"ochre": "#9C7A1F",
"white": "#FFFFFF",
"ivory": "#F4F4F4",
"charcoal": "#111111"
}