The Home Depot color palette
EcommerceThe Home Depot's color identity is defined by its signature orange, used consistently across branding, signage, and digital interfaces. The palette emphasizes high visibility and approachability, with supporting neutrals for contrast and clarity.
homedepot.comThe Home Depot colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Home Depot OrangePrimary249, 99, 5
- Home Depot CharcoalSecondary34, 34, 34
- Home Depot WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Home Depot Light GrayBackground245, 245, 245
- Home Depot Surface GraySurface250, 250, 250
- Home Depot Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Home Depot CharcoalText34, 34, 34
- Home Depot Medium GraySecondary text117, 117, 117
- Home Depot Muted GrayMuted text158, 158, 158
Semantic
Feedback and state colors.- Home Depot Success GreenSuccess92, 184, 92
- Home Depot Warning YellowWarning255, 193, 7
- Home Depot Error RedError211, 47, 47
- Home Depot Info BlueInfo25, 118, 210
Use The Home Depot's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
the-home-depot-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #F96305;
--success: #5CB85C;
--surface: #FAFAFA;
--warning: #FFC107;
--secondary: #222222;
--text-muted: #9E9E9E;
--background: #F5F5F5;
--text-primary: #222222;
--text-secondary: #757575;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.6:1
Pass
Text on surface
Needs 4.5:1 for body text
15.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.2:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.4:1
Fail
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
The Home Depot gray and neutral colors
The quiet part of the The Home Depot palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Home Depot Light GrayBackground
- HEX
- RGB
- HSL
- Home Depot Surface GraySurface
- HEX
- RGB
- HSL
- Home Depot Border GrayBorder
- HEX
- RGB
- HSL
- Home Depot CharcoalText
- HEX
- RGB
- HSL
- Home Depot Medium GraySecondary text
- HEX
- RGB
- HSL
- Home Depot Muted GrayMuted text
- HEX
- RGB
- HSL
About The Home Depot's colors
The Home Depot palette centers on a bold, high-contrast orange, supported by neutral grays and white for balance and legibility. The palette is designed for strong brand recognition and clear communication.
Primary orange dominates calls to action and branding.
Neutrals provide contrast for text and backgrounds.
Accent white ensures clarity and separation of UI elements.
Psychology
Orange conveys energy, friendliness, and accessibility, aligning with The Home Depot's DIY ethos. The neutral grays add professionalism and readability.
Evolution
The orange has remained consistent since the brand's inception, reinforcing recognition. Minor adjustments to neutral tones have improved digital accessibility over time.
Where The Home Depot uses each color
- Primary
Home Depot Orange is used for the logo, primary buttons, and promotional banners.
- Secondary
Home Depot Charcoal appears in navigation bars, headings, and footer backgrounds.
- Accent
Home Depot White is used for text on orange backgrounds and as a general background color.
- Backgrounds
Home Depot Light Gray is the main page background for digital interfaces.
- Text
Charcoal and medium gray are used for primary and secondary text, ensuring readability.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
The Home Depot color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Home Depot brand color is Home Depot Orange, hex code #F96305.
Home Depot Orange is RGB(249, 99, 5) and CMYK(0, 60, 98, 2). The hex code is #F96305.
The Home Depot uses Charcoal (#222222), Light Gray (#F5F5F5), Surface Gray (#FAFAFA), and Border Gray (#E0E0E0) for backgrounds, text, and UI elements.
Use Home Depot Orange (#F96305) for primary actions and branding, with neutrals for backgrounds and text to maintain clarity and accessibility.
The secondary color is Home Depot Charcoal, #222222, and the accent is Home Depot White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
2 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies The Home Depot's colors consistently when it generates UI.
Make something in the spirit of The Home Depot
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.