Hershey's color palette
Food & DrinkHershey's brand identity is defined by its iconic deep chocolate brown, reflecting its heritage as a chocolate maker. The palette is classic, warm, and rooted in rich, neutral tones.
hersheys.comHershey's colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hershey's Chocolate BrownPrimary75, 46, 7
- Hershey's WhiteSecondary255, 255, 255
- Hershey's CaramelAccent169, 140, 102
Surfaces
Page, cards and dividers.- Hershey's CreamBackground248, 247, 245
- Hershey's Light CocoaSurface230, 222, 213
- Hershey's TaupeBorder201, 187, 165
Text
Three tiers of copy.- Hershey's Chocolate BrownText75, 46, 7
- Hershey's Medium BrownSecondary text107, 79, 39
- Hershey's Muted BrownMuted text140, 115, 81
Semantic
Feedback and state colors.- Hershey's Cocoa SuccessSuccess122, 94, 58
- Hershey's GoldWarning217, 164, 65
- Hershey's BrickError176, 74, 58
- Hershey's CaramelInfo169, 140, 102
Use Hershey's's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hersheys-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #A98C66;
--error: #B04A3A;
--accent: #A98C66;
--border: #C9BBA5;
--primary: #4B2E07;
--success: #7A5E3A;
--surface: #E6DED5;
--warning: #D9A441;
--secondary: #FFFFFF;
--text-muted: #8C7351;
--background: #F8F7F5;
--text-primary: #4B2E07;
--text-secondary: #6B4F27;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
11.6:1
Pass
Text on surface
Needs 4.5:1 for body text
9.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
4.2:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Hershey's background, border and text colors
The quiet part of the Hershey's palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hershey's CreamBackground
- HEX
- RGB
- HSL
- Hershey's Light CocoaSurface
- HEX
- RGB
- HSL
- Hershey's TaupeBorder
- HEX
- RGB
- HSL
- Hershey's Chocolate BrownText
- HEX
- RGB
- HSL
- Hershey's Medium BrownSecondary text
- HEX
- RGB
- HSL
- Hershey's Muted BrownMuted text
- HEX
- RGB
- HSL
About Hershey's's colors
Hershey's color palette is grounded in deep browns and warm neutrals, evoking chocolate and comfort. The scheme is monochromatic with subtle accent tones for versatility.
Primary brown dominates backgrounds and logos.
White and cream provide contrast and clarity.
Caramel and gold serve as warm accent highlights.
Psychology
The rich brown conveys warmth, tradition, and indulgence, directly referencing chocolate. Cream and caramel tones add approachability and a sense of nostalgia.
Evolution
Hershey's palette has remained stable for decades, with the chocolate brown as a constant. Minor refinements have introduced lighter neutrals for modern packaging and digital clarity.
Where Hershey's uses each color
- Primary
Used in the Hershey's logo, main navigation bars, and key packaging elements.
- Secondary
White is used for text, backgrounds, and logo contrast.
- Accent
Caramel appears in call-to-action buttons and product highlights.
- Backgrounds
Cream and light cocoa are used for website backgrounds and product pages.
- Text
Chocolate brown is used for primary headlines; medium and muted browns for secondary and muted text.
- Semantic
Gold is used for warnings or special offers, cocoa brown for success messages, and brick red for errors.
Hershey's color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hershey's primary brand color is #4B2E07, known as Hershey's Chocolate Brown.
Hershey's Chocolate Brown (#4B2E07) is RGB(75, 46, 7) and CMYK(0, 39, 91, 71).
Hershey's uses a range of warm neutrals including Hershey's Cream (#F8F7F5), Light Cocoa (#E6DED5), and Taupe (#C9BBA5) for backgrounds and UI surfaces.
Use Hershey's Chocolate Brown (#4B2E07) for primary branding and text, with white (#FFFFFF) and cream (#F8F7F5) for backgrounds. Accent with caramel (#A98C66) and gold (#D9A441) for highlights and calls to action.
The secondary color is Hershey's White, #FFFFFF, and the accent is Hershey's Caramel, #A98C66. 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 Hershey's's colors consistently when it generates UI.
Make something in the spirit of Hershey's
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.