HeavyDSparks-inspired branding uses a charged red-and-black core with a hard-edged metallic accent system that feels industrial, confident, and performance-driven. The palette keeps the main colors bold and recognizable while the supporting tones and neutrals preserve clarity across digital interfaces and brand touchpoints.
HeavyDSparks-inspired branding uses a charged red-and-black core with a hard-edged metallic accent system that feels industrial, confident, and performance-driven. The palette keeps the main colors bold and recognizable while the supporting tones and neutrals preserve clarity across digital interfaces and brand touchpoints.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a high-energy red, a deep carbon black, and a steel-inspired accent to create a memorable industrial system that feels aggressive but controlled. Together they deliver strong brand recognition, sharp contrast, and a rugged technical edge suited to HeavyDSparks-inspired applications.
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 high-energy red, a deep carbon black, and a steel-inspired accent to create a memorable industrial system that feels aggressive but controlled. Together they deliver strong brand recognition, sharp contrast, and a rugged technical edge suited to HeavyDSparks-inspired applications.
RolesLogo, Btn Primary Bg
Crimson drives the brand with urgency and impact, making the identity feel powerful and active.
#D72638215, 38, 56354, 70, 500, 82, 74, 16RolesBtn Secondary Bg, Headline
Charcoal grounds the palette with a heavy, engineered presence that reinforces strength and seriousness.
#11111117, 17, 170, 0, 70, 0, 0, 93RolesBtn Outlined Border, Btn Outlined Text, Link
Slate adds a metallic, technical note that softens the severity of the dark core without losing the industrial character.
#7A8C99122, 140, 153205, 13, 5420, 8, 0, 40The support colors extend the palette with quieter utility tones that improve hierarchy and balance without competing with the main industrial signal. They add depth, surface separation, and a subtle heat-treated feel that fits the HeavyDSparks-inspired direction.
RolesIcon, Border
Rust introduces a subdued heat and wear reference that feels authentic alongside the primary red and black.
#A64B35166, 75, 5312, 52, 430, 55, 68, 35RolesDivider, Outline
Smoke supports structure with a cool, understated metal tone that keeps interface elements visible but restrained.
#5F6F6D95, 111, 109173, 8, 4014, 0, 2, 56Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Light
#F2F2F0242, 242, 24060, 7, 950, 0, 1, 5RolesBg Dark, Text
#0B0B0B11, 11, 110, 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: #D72638;
--color-charcoal: #111111;
--color-slate: #7A8C99;
--color-rust: #A64B35;
--color-smoke: #5F6F6D;
--color-white: #FFFFFF;
--color-ivory: #F2F2F0;
--color-near-black: #0B0B0B;
}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: #D72638;
--role-btn-primary-bg: #D72638;
--role-btn-secondary-bg: #111111;
--role-headline: #111111;
--role-btn-outlined-border: #7A8C99;
--role-btn-outlined-text: #7A8C99;
--role-link: #7A8C99;
--role-icon: #A64B35;
--role-border: #A64B35;
--role-divider: #5F6F6D;
--role-outline: #5F6F6D;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-light: #F2F2F0;
--role-bg-dark: #0B0B0B;
--role-text: #0B0B0B;
}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": "#D72638",
"charcoal": "#111111",
"slate": "#7A8C99",
"rust": "#A64B35",
"smoke": "#5F6F6D",
"white": "#FFFFFF",
"ivory": "#F2F2F0",
"near-black": "#0B0B0B"
}