This palette draws inspiration from the muted green frame, the vibrant orange wheels, and the subtle gray accents of the bike in the image. It balances earthy natural hues with energetic, warm tones to convey playfulness, reliability, and creativity in a modern, approachable way.
This palette draws inspiration from the muted green frame, the vibrant orange wheels, and the subtle gray accents of the bike in the image. It balances earthy natural hues with energetic, warm tones to convey playfulness, reliability, and creativity in a modern, approachable way.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors are an olive green, a bright orange, and a soft complementary beige, forming a split-complementary scheme that balances warm energy with grounded calmness.
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 are an olive green, a bright orange, and a soft complementary beige, forming a split-complementary scheme that balances warm energy with grounded calmness.
RolesLogo, Btn Primary Bg, Link
Olive Green represents nature, growth, and reliability, creating a sturdy foundation for the brand.
#8A9A5B138, 154, 9175, 26, 4810, 0, 41, 40RolesBtn Secondary Bg, Headline, Btn Outlined Border
Coral Orange is vibrant and playful, injecting energy and friendliness into the palette.
#F27121242, 113, 3323, 89, 540, 53, 86, 5RolesBtn Outlined Text
Sand softens the palette with a warm neutrality that balances the brighter hues.
#D6C6A8214, 198, 16839, 36, 750, 7, 21, 16The support colors extend the palette with muted earth tones that complement the main colors without overwhelming, supporting usability and visual balance.
RolesIcon, Border, Divider, Outline
Sage Gray adds subtle texture and neutrality, harmonizing with the olive green and sand.
#B2B7A3178, 183, 16375, 12, 683, 0, 11, 28Burnt Orange provides depth and variation to the secondary color, enhancing contrast and readability.
#C9642D201, 100, 4521, 63, 480, 50, 78, 21Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F7F6F2247, 246, 24248, 24, 960, 0, 2, 3RolesText, Btn Primary Text, Btn Secondary Text
#3F3A3863, 58, 5617, 6, 230, 8, 11, 75Copy 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-olive-green: #8A9A5B;
--color-coral-orange: #F27121;
--color-sand: #D6C6A8;
--color-sage-gray: #B2B7A3;
--color-burnt-orange: #C9642D;
--color-white: #FFFFFF;
--color-ivory: #F7F6F2;
--color-charcoal: #3F3A38;
}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: #8A9A5B;
--role-btn-primary-bg: #8A9A5B;
--role-link: #8A9A5B;
--role-btn-secondary-bg: #F27121;
--role-headline: #F27121;
--role-btn-outlined-border: #F27121;
--role-btn-outlined-text: #D6C6A8;
--role-icon: #B2B7A3;
--role-border: #B2B7A3;
--role-divider: #B2B7A3;
--role-outline: #B2B7A3;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F7F6F2;
--role-text: #3F3A38;
--role-btn-primary-text: #3F3A38;
--role-btn-secondary-text: #3F3A38;
}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.{
"olive-green": "#8A9A5B",
"coral-orange": "#F27121",
"sand": "#D6C6A8",
"sage-gray": "#B2B7A3",
"burnt-orange": "#C9642D",
"white": "#FFFFFF",
"ivory": "#F7F6F2",
"charcoal": "#3F3A38"
}