A sports-forward palette built around Adidas-inspired black-and-white contrast with a sharp green accent for digital emphasis. The system keeps the brand unmistakably athletic and minimalist while using a restrained accent to add energy without competing with the core identity.
A sports-forward palette built around Adidas-inspired black-and-white contrast with a sharp green accent for digital emphasis. The system keeps the brand unmistakably athletic and minimalist while using a restrained accent to add energy without competing with the core identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors create a stark, instantly recognizable sports system: clean black, crisp white, and a vivid green accent used sparingly for motion and emphasis. Together they read as performance-driven and digital-first rather than overly f
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 create a stark, instantly recognizable sports system: clean black, crisp white, and a vivid green accent used sparingly for motion and emphasis. Together they read as performance-driven and digital-first rather than overly f
RolesLogo, Btn Primary Bg, Headline
Anchors the brand with maximum contrast and a disciplined athletic edge.
#0000000, 0, 00, 0, 00, 0, 0, 100RolesBtn Secondary Bg, Bg Light
Keeps the interface clean, spacious, and unmistakably high-contrast.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesLink, Btn Outlined Border, Btn Outlined Text
Adds a sharp, performance-oriented accent for interactive elements and brand energy.
#52C41A82, 196, 26100, 77, 4458, 0, 87, 23The support colors extend the palette with a cooler, more subdued balance so the core black-white system stays dominant. They add UI structure and depth without pulling attention.
RolesIcon, Bg Dark
Softens the jump from pure black while preserving a technical, premium feel.
#2B2B2B43, 43, 430, 0, 170, 0, 0, 83RolesBorder, Divider, Outline
Provides neutral structure for UI lines and surfaces without introducing new hue direction.
#D8D8D8216, 216, 2160, 0, 850, 0, 0, 15Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText, 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-core-black: #000000;
--color-studio-white: #FFFFFF;
--color-signal-green: #52C41A;
--color-graphite: #2B2B2B;
--color-steel-mist: #D8D8D8;
--color-pure-white: #FFFFFF;
--color-off-white: #F5F5F5;
--color-ink-black: #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-btn-secondary-bg: #FFFFFF;
--role-bg-light: #FFFFFF;
--role-link: #52C41A;
--role-btn-outlined-border: #52C41A;
--role-btn-outlined-text: #52C41A;
--role-icon: #2B2B2B;
--role-bg-dark: #2B2B2B;
--role-border: #D8D8D8;
--role-divider: #D8D8D8;
--role-outline: #D8D8D8;
--role-btn-primary-text: #FFFFFF;
--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.{
"core-black": "#000000",
"studio-white": "#FFFFFF",
"signal-green": "#52C41A",
"graphite": "#2B2B2B",
"steel-mist": "#D8D8D8",
"pure-white": "#FFFFFF",
"off-white": "#F5F5F5",
"ink-black": "#111111"
}