This palette channels The Rock’s signature palette with a bold black-and-gold core and restrained silver-gray support, creating a strong, instantly recognizable system that feels powerful and premium. It translates the look into usable brand and UI colors while staying faithful to the iconic colors associated with the persona.
This palette channels The Rock’s signature palette with a bold black-and-gold core and restrained silver-gray support, creating a strong, instantly recognizable system that feels powerful and premium. It translates the look into usable brand and UI colors while staying faithful to the iconic colors associated with the persona.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair deep black with metallic gold for a high-contrast, unmistakable look that reads as powerful, premium, and performance-driven. The relationship is iconic rather than decorative, making the palette immediately recognizable across brand and interface use.
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 pair deep black with metallic gold for a high-contrast, unmistakable look that reads as powerful, premium, and performance-driven. The relationship is iconic rather than decorative, making the palette immediately recognizable across brand and interface use.
RolesLogo, Btn Primary Bg, Headline
Black anchors the identity with confidence, intensity, and a strong stage-like presence.
#0000000, 0, 00, 0, 00, 0, 0, 100RolesLink, Btn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Gold brings the recognizable championship energy and adds a premium, victorious edge.
#D4AF37212, 175, 5546, 65, 520, 17, 74, 17The support colors extend the black-and-gold system with muted metallic and steel tones that add flexibility without challenging the core palette. They keep the look disciplined, industrial, and polished.
RolesIcon, Border
Silver provides a cool metallic counterpoint that softens the intensity while preserving an elite feel.
#C0C0C0192, 192, 1920, 0, 750, 0, 0, 25RolesDivider, Outline
Slate adds structural clarity and works well for rules, frames, and subtle UI separation.
#708090112, 128, 144210, 13, 5022, 11, 0, 44Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesBg Dark, Text, Btn Secondary 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-black: #000000;
--color-gold: #D4AF37;
--color-silver: #C0C0C0;
--color-slate: #708090;
--color-white: #FFFFFF;
--color-ivory: #F5F5F5;
--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: #000000;
--role-btn-primary-bg: #000000;
--role-headline: #000000;
--role-link: #D4AF37;
--role-btn-secondary-bg: #D4AF37;
--role-btn-outlined-border: #D4AF37;
--role-btn-outlined-text: #D4AF37;
--role-icon: #C0C0C0;
--role-border: #C0C0C0;
--role-divider: #708090;
--role-outline: #708090;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #111111;
--role-text: #111111;
--role-btn-secondary-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.{
"black": "#000000",
"gold": "#D4AF37",
"silver": "#C0C0C0",
"slate": "#708090",
"white": "#FFFFFF",
"ivory": "#F5F5F5",
"charcoal": "#111111"
}