Haribo color palette
Food & DrinkHaribo's color identity is defined by its iconic bright red and yellow, reflecting its playful and joyful confectionery brand. The palette is bold and simple, with strong use of primary colors and minimal neutrals.
haribo.comHaribo colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Haribo RedPrimary237, 28, 36
- Haribo YellowSecondary255, 217, 0
- Haribo BlueAccent0, 102, 179
Surfaces
Page, cards and dividers.- Haribo WhiteBackground255, 255, 255
- Haribo Light GraySurface246, 246, 246
- Haribo Gray BorderBorder204, 204, 204
Text
Three tiers of copy.- Haribo CharcoalText34, 34, 34
- Haribo Medium GraySecondary text102, 102, 102
- Haribo Light Gray TextMuted text170, 170, 170
Semantic
Feedback and state colors.- Haribo GreenSuccess109, 190, 69
- Haribo OrangeWarning255, 179, 0
- Haribo Error RedError208, 2, 27
- Haribo Info BlueInfo41, 171, 226
Use Haribo's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
haribo-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #29ABE2;
--error: #D0021B;
--accent: #0066B3;
--border: #CCCCCC;
--primary: #ED1C24;
--success: #6DBE45;
--surface: #F6F6F6;
--warning: #FFB300;
--secondary: #FFD900;
--text-muted: #AAAAAA;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Haribo gray and neutral colors
The quiet part of the Haribo palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Haribo WhiteBackground
- HEX
- RGB
- HSL
- Haribo Light GraySurface
- HEX
- RGB
- HSL
- Haribo Gray BorderBorder
- HEX
- RGB
- HSL
- Haribo CharcoalText
- HEX
- RGB
- HSL
- Haribo Medium GraySecondary text
- HEX
- RGB
- HSL
- Haribo Light Gray TextMuted text
- HEX
- RGB
- HSL
About Haribo's colors
Haribo's palette is based on high-contrast, saturated primary colors to evoke fun and energy. The use of red and yellow is instantly recognizable and associated with the brand's packaging.
Primary red and yellow are complementary and dominate packaging.
Blue accent is used for contrast and emphasis.
Neutral grays and white support UI clarity.
Psychology
Bright red and yellow convey excitement, happiness, and appetite appeal. Blue adds trust and reliability, while greens and oranges are used for positive feedback and warnings.
Evolution
Haribo's core red and yellow colors have remained consistent for decades, reinforcing brand recognition. Minor adjustments to supporting colors and neutrals have been made for digital applications.
Where Haribo uses each color
- Primary
Used in the logo, main CTAs, and product packaging.
- Secondary
Appears in logo outlines, highlights, and background elements.
- Accent
Used for navigation highlights, links, and promotional banners.
- Backgrounds
White and light gray are used for website backgrounds and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the site.
- Semantic
Green, orange, and blue are used for status messages and alerts in digital interfaces.
Haribo color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Haribo brand red is #ED1C24. This color is used prominently in the logo and packaging.
Haribo Red (#ED1C24) is RGB(237, 28, 36) and CMYK(0, 100, 100, 0). These values are used for print and digital consistency.
Haribo uses #F6F6F6 for light gray surfaces and #CCCCCC for borders. For text, #222222 and #666666 are used as primary and secondary grays.
Primary red and yellow should dominate key branding elements, while blue and neutrals provide support in UI and backgrounds. Accent and semantic colors are reserved for highlights and feedback.
The secondary color is Haribo Yellow, #FFD900, and the accent is Haribo Blue, #0066B3. Together with the primary they make up the three brand colors at the top of this page.
4 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 Haribo's colors consistently when it generates UI.
Make something in the spirit of Haribo
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.