This palette draws from the rugged and vintage aesthetic of the motorcycle emblem, combining strong, industrial grays and blacks with classic, muted greens to evoke a sense of timeless durability and understated style. The palette balances harsh mechanical elements with softer, natural tones to create a versatile and memorable identity system.
This palette draws from the rugged and vintage aesthetic of the motorcycle emblem, combining strong, industrial grays and blacks with classic, muted greens to evoke a sense of timeless durability and understated style. The palette balances harsh mechanical elements with softer, natural tones to create a versatile and memorable identity system.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors blend charcoal black, muted olive green, and a softer gray-green to reflect the emblem's mechanical and vintage feel while maintaining harmony and visual recognition.
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 blend charcoal black, muted olive green, and a softer gray-green to reflect the emblem's mechanical and vintage feel while maintaining harmony and visual recognition.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Charcoal delivers a strong, grounded presence inspired by the emblem's chain and mechanical parts, symbolizing strength and reliability.
#2F2F2F47, 47, 470, 0, 180, 0, 0, 82RolesBtn Secondary Bg, Headline
Olive Green adds a classic, muted tone that communicates endurance and vintage authenticity, as seen in the background of the emblem's text.
#78866B120, 134, 10791, 11, 4710, 0, 20, 47Sage Green provides a softer complementary main color that balances the palette with a natural, slightly earthy touch.
#A3B18A163, 177, 13882, 20, 628, 0, 22, 31Supporting colors extend the main scheme with complementary muted tones of soft gray and muted olive to enhance usability and balance without overpowering.
RolesIcon, Border, Divider, Outline
Slate Gray supports the palette with a medium neutral tone that bridges the contrast between Charcoal and lighter neutrals, reinforcing the industrial feel.
#5A5A5A90, 90, 900, 0, 350, 0, 0, 65Moss Green adds subtle depth and warmth to the design, complementing Olive Green and enhancing natural undertones while remaining visually secondary.
#66775A102, 119, 9095, 14, 4114, 0, 24, 53Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#F2F1EC242, 241, 23650, 19, 940, 0, 2, 5RolesBg Dark
#E0DEDA224, 222, 21840, 9, 870, 1, 3, 12RolesText, Btn Secondary Text
#1D1D1B29, 29, 2760, 4, 110, 0, 7, 89Copy 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-charcoal: #2F2F2F;
--color-olive-green: #78866B;
--color-sage-green: #A3B18A;
--color-slate-gray: #5A5A5A;
--color-moss-green: #66775A;
--color-ivory: #F2F1EC;
--color-light-gray-beige: #E0DEDA;
--color-jet-black: #1D1D1B;
}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: #2F2F2F;
--role-link: #2F2F2F;
--role-btn-primary-bg: #2F2F2F;
--role-btn-outlined-border: #2F2F2F;
--role-btn-outlined-text: #2F2F2F;
--role-btn-secondary-bg: #78866B;
--role-headline: #78866B;
--role-icon: #5A5A5A;
--role-border: #5A5A5A;
--role-divider: #5A5A5A;
--role-outline: #5A5A5A;
--role-bg-light: #F2F1EC;
--role-btn-primary-text: #F2F1EC;
--role-bg-dark: #E0DEDA;
--role-text: #1D1D1B;
--role-btn-secondary-text: #1D1D1B;
}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.{
"charcoal": "#2F2F2F",
"olive-green": "#78866B",
"sage-green": "#A3B18A",
"slate-gray": "#5A5A5A",
"moss-green": "#66775A",
"ivory": "#F2F1EC",
"light-gray-beige": "#E0DEDA",
"jet-black": "#1D1D1B"
}