The Home Depot colors

The Home Depot color codes

Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.

Where the The Home Depot colors come from

The Home Depot does not publish hex values in public brand guidelines, so these were read from the code of its live website (stylesheets and the SVG files it serves) on 16 October 2026. They are the colors www.homedepot.com actually renders, which can differ slightly from print or logo colors.

• Source (live website CSS or SVG): https://corporate.homedepot.com/sites/default/files/css/css_Tq94LMMERhnKVgo45hbSOmleGY8ZeEsGxdHjd9a0_pY.css?delta=1&language=en&theme=bootstrap_thd checked 2026-10-16

The Home Depot color contrast

Black text on The Home Depot home depot orange has a contrast ratio of 6.81:1 and passes WCAG AA for body text. Used as a text color, Home Depot orange reaches 3.08:1 on white and 6.81:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.

The Home Depot colors in CSS and Tailwind

Copy the The Home Depot palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Home Depot orange, for hover states, borders and tinted backgrounds.

:root {
  --home-depot-home-depot-orange: #F96302;
  --home-depot-dark-orange: #BC4B02;
  --home-depot-text-gray: #333333;
  --home-depot-white: #FFFFFF;
}

@import "tailwindcss";

@theme {
  --color-home-depot-home-depot-orange: #F96302;
  --color-home-depot-dark-orange: #BC4B02;
  --color-home-depot-text-gray: #333333;
  --color-home-depot-white: #FFFFFF;
}

@theme {
  --color-home-depot-50: #FFF2ED;
  --color-home-depot-100: #FFE3D8;
  --color-home-depot-200: #FFCCB8;
  --color-home-depot-300: #FFA884;
  --color-home-depot-400: #F96302;
  --color-home-depot-500: #E05800;
  --color-home-depot-600: #BE4900;
  --color-home-depot-700: #A03D00;
  --color-home-depot-800: #843100;
  --color-home-depot-900: #6F2800;
  --color-home-depot-950: #451500;
}

Named colors closest to the The Home Depot palette

The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.

Palettes like The Home Depot

Curated palettes that include a color close to The Home Depot home depot orange #F96302.

• Pomelo Slice#2B0B00 #893300 #E86C31 #FFD7C6
• Lime Slice#2D5A27 #E85D04 #F7931E #FFF3B0 #FFFBE6

How to use a The Home Depot-style palette

• Lead with Home Depot orange #F96302 for buttons, links and key highlights, with black text on it.
• Give most of the layout to Text gray #333333 and White #FFFFFF, about 60% of the screen, so Home Depot orange stands out.
• Keep Dark orange for small accents (around 10%): status colors, illustrations or charts.
• As text on a white page, Home Depot orange reaches 3.08:1: it passes WCAG AA only for large or bold text (18pt, or 14pt bold).

To see how www.homedepot.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Home Depot orange into a full light and dark color system with accessible roles, open it in the Color System Studio.

More brand colors

• Uber colors#000000 #FFFFFF #111111 #F6F6F6
• Lyft colors#FF00BF #1D0C17 #820076 #F1F0EC
• Target colors#CC0000 #FAF2ED #333333 #FFFFFF
• Amazon colors#FF9900 #131921 #232F3E #FEBD69
• Walmart colors#0053E2 #FFC220 #001E60 #4DBDF5
• FedEx colors#4D148C #FF6200
• UPS colors#351C15 #FFC400 #F2F2F2
• IKEA colors#0058A3 #FFDB00 #007CC1 #111111
• Tiffany colors#81D8D0 #000000 #00A4B7
• Pepsi colors#0000FE #0025FF #0E0E96 #FF1400
• John Deere colors#367C2B #FFDE00 #185F11 #1B1C1B
• Barbie colors#FF3EB5 #FFD8EF

Trademarks

Frequently asked questions