This palette channels the practical energy of a Home Depot-inspired brand with a confident orange-led system anchored by deep industrial neutrals. The warm main colors keep the interface energetic and unmistakably retail-focused, while the muted support tones and clean neutrals maintain clarity for signage, ecommerce, and service moments.
This palette channels the practical energy of a Home Depot-inspired brand with a confident orange-led system anchored by deep industrial neutrals. The warm main colors keep the interface energetic and unmistakably retail-focused, while the muted support tones and clean neutrals maintain clarity for signage, ecommerce, and service moments.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette centers on high-visibility orange and a darker utility orange, creating a recognizable retail system with enough variation to support hierarchy without losing the brand’s direct, work-ready feel.
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 palette centers on high-visibility orange and a darker utility orange, creating a recognizable retail system with enough variation to support hierarchy without losing the brand’s direct, work-ready feel.
RolesLogo, Btn Primary Bg, Link
This saturated orange drives immediate recognition and signals action, availability, and retail momentum.
#F96302249, 99, 224, 98, 490, 60, 99, 2RolesBtn Secondary Bg, Headline
This deeper orange adds weight and hierarchy, giving the system a more grounded and dependable tone.
#C54A00197, 74, 023, 100, 390, 62, 100, 23RolesBtn Outlined Border, Btn Outlined Text
This restrained gray-orange neutral bridge keeps outlined controls functional without competing with the main brand colors.
#A8A29A168, 162, 15434, 7, 630, 4, 8, 34The support colors extend the orange system with understated industrial accents that reinforce structure, measurement, and service cues without stealing focus from the main hues.
RolesIcon, Border
This cool slate balances the warm oranges and improves usability across icons and structural UI elements.
#5C6B7392, 107, 115201, 11, 4120, 7, 0, 55RolesDivider, Outline
This muted olive introduces a practical materials-inspired note that softens the palette and works well for subtle separation.
#7A8A61122, 138, 9783, 17, 4612, 0, 30, 46Utility colors for backgrounds, text, borders, and balance.
RolesBtn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Light
#F4F1EA244, 241, 23442, 31, 940, 1, 4, 4RolesBg Dark, Text, Btn Primary Text
#1F1B1631, 27, 2233, 17, 100, 13, 29, 88Copy 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-aisle-orange: #F96302;
--color-signal-ember: #C54A00;
--color-tool-steel: #A8A29A;
--color-shop-slate: #5C6B73;
--color-workbench-olive: #7A8A61;
--color-pure-white: #FFFFFF;
--color-worktop-white: #F4F1EA;
--color-charcoal-black: #1F1B16;
}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: #F96302;
--role-btn-primary-bg: #F96302;
--role-link: #F96302;
--role-btn-secondary-bg: #C54A00;
--role-headline: #C54A00;
--role-btn-outlined-border: #A8A29A;
--role-btn-outlined-text: #A8A29A;
--role-icon: #5C6B73;
--role-border: #5C6B73;
--role-divider: #7A8A61;
--role-outline: #7A8A61;
--role-btn-secondary-text: #FFFFFF;
--role-bg-light: #F4F1EA;
--role-bg-dark: #1F1B16;
--role-text: #1F1B16;
--role-btn-primary-text: #1F1B16;
}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.{
"aisle-orange": "#F96302",
"signal-ember": "#C54A00",
"tool-steel": "#A8A29A",
"shop-slate": "#5C6B73",
"workbench-olive": "#7A8A61",
"pure-white": "#FFFFFF",
"worktop-white": "#F4F1EA",
"charcoal-black": "#1F1B16"
}