Harley-Davidson color palette
AutomotiveHarley-Davidson's color identity is built around its iconic orange, black, and white palette, reflecting its heritage and bold, rugged image. The brand uses these colors consistently across its website, products, and marketing materials.
harley-davidson.comHarley-Davidson colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Harley OrangePrimary255, 102, 0
- Harley BlackSecondary0, 0, 0
- Harley WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Iron GrayBackground24, 24, 24
- Steel GraySurface34, 34, 34
- Graphite GrayBorder68, 68, 68
Text
Three tiers of copy.- Harley WhiteText255, 255, 255
- Chrome GraySecondary text204, 204, 204
- Muted MetalMuted text136, 136, 136
Semantic
Feedback and state colors.- Road GreenSuccess76, 175, 80
- Caution YellowWarning255, 193, 7
- Engine RedError211, 47, 47
- Info BlueInfo25, 118, 210
Use Harley-Davidson's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
harley-davidson-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #444444;
--primary: #FF6600;
--success: #4CAF50;
--surface: #222222;
--warning: #FFC107;
--secondary: #000000;
--text-muted: #888888;
--background: #181818;
--text-primary: #FFFFFF;
--text-secondary: #CCCCCC;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.8:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
11.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
9.9:1
Pass
Muted text on background
Needs 3:1 for large text
5.0:1
Pass
Muted text on surface
Needs 3:1 for large text
4.5:1
Pass
Harley-Davidson gray, dark and neutral colors
Harley-Davidson runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Iron GrayBackground
- HEX
- RGB
- HSL
- Steel GraySurface
- HEX
- RGB
- HSL
- Graphite GrayBorder
- HEX
- RGB
- HSL
- Harley WhiteText
- HEX
- RGB
- HSL
- Chrome GraySecondary text
- HEX
- RGB
- HSL
- Muted MetalMuted text
- HEX
- RGB
- HSL
About Harley-Davidson's colors
Harley-Davidson's palette is dominated by high-contrast orange and black, conveying power and visibility. The use of neutral grays and white balances the boldness for digital and print applications.
Orange and black create a strong, energetic contrast.
White is used for clarity and separation.
Grays provide depth and structure in UI elements.
Psychology
Orange evokes excitement, adventure, and individuality, while black signifies strength and sophistication. The combination appeals to Harley's core values of freedom and rebellion.
Evolution
The core orange and black palette has remained consistent for decades, reinforcing brand recognition. Minor adjustments in gray tones have been made for digital clarity and accessibility.
Where Harley-Davidson uses each color
- Primary
Harley Orange is used for call-to-action buttons, highlights, and key brand marks.
- Secondary
Harley Black forms the background for navigation bars, footers, and product imagery.
- Accent
Harley White is used for text, icons, and logo contrast.
- Backgrounds
Iron Gray and Steel Gray are used for page backgrounds and content surfaces.
- Text
Harley White and Chrome Gray are used for primary and secondary text, with Muted Metal for less prominent information.
- Semantic
Road Green, Caution Yellow, Engine Red, and Info Blue are used for status indicators, alerts, and notifications.
Harley-Davidson color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Harley-Davidson orange is #FF6600. This color is used as the primary brand accent across all platforms.
Harley Orange (#FF6600) has an RGB value of 255, 102, 0. In CMYK, it is approximately 0, 60, 100, 0.
Harley-Davidson uses Iron Gray (#181818), Steel Gray (#222222), and Graphite Gray (#444444) for backgrounds and UI elements. These provide a rugged, industrial feel consistent with the brand's image.
Use Harley Orange (#FF6600) for calls to action and highlights, with Harley Black (#000000) and Iron Gray (#181818) as primary backgrounds. Text should be Harley White (#FFFFFF) or Chrome Gray (#CCCCCC) for optimal contrast.
The secondary color is Harley Black, #000000, and the accent is Harley White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
6 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 Harley-Davidson's colors consistently when it generates UI.
Make something in the spirit of Harley-Davidson
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.