HelloFresh color palette
Food & DrinkHelloFresh uses a vibrant, fresh green-centric palette that reflects its food and meal kit focus. The brand's colors emphasize approachability, freshness, and clarity across digital and physical touchpoints.
hellofresh.comHelloFresh colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- HelloFresh GreenPrimary153, 204, 51
- HelloFresh CharcoalSecondary34, 34, 34
- HelloFresh YellowAccent248, 181, 0
Surfaces
Page, cards and dividers.- HelloFresh WhiteBackground255, 255, 255
- HelloFresh Light GraySurface246, 246, 246
- HelloFresh Border GrayBorder229, 229, 229
Text
Three tiers of copy.- HelloFresh CharcoalText34, 34, 34
- HelloFresh Medium GraySecondary text102, 102, 102
- HelloFresh Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- HelloFresh Success GreenSuccess107, 170, 31
- HelloFresh YellowWarning248, 181, 0
- HelloFresh Error RedError233, 79, 55
- HelloFresh Info TealInfo0, 150, 136
Use HelloFresh's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hellofresh-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009688;
--error: #E94F37;
--accent: #F8B500;
--border: #E5E5E5;
--primary: #99CC33;
--success: #6BAA1F;
--surface: #F6F6F6;
--warning: #F8B500;
--secondary: #222222;
--text-muted: #A3A3A3;
--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.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
HelloFresh gray and neutral colors
The quiet part of the HelloFresh palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- HelloFresh WhiteBackground
- HEX
- RGB
- HSL
- HelloFresh Light GraySurface
- HEX
- RGB
- HSL
- HelloFresh Border GrayBorder
- HEX
- RGB
- HSL
- HelloFresh CharcoalText
- HEX
- RGB
- HSL
- HelloFresh Medium GraySecondary text
- HEX
- RGB
- HSL
- HelloFresh Muted GrayMuted text
- HEX
- RGB
- HSL
About HelloFresh's colors
HelloFresh's palette is built around a fresh green, supported by neutral grays and bright accent tones. The scheme is designed for high legibility and to evoke freshness and trust.
Primary green is complemented by yellow accents.
Neutral grays provide structure and readability.
Accent colors are used sparingly for highlights and alerts.
Psychology
Green is associated with health, freshness, and sustainability, aligning with HelloFresh's food-focused mission. The supporting neutrals and yellow accent reinforce clarity and approachability.
Evolution
HelloFresh's color palette has remained largely consistent, with the green as a core identifier since launch. Minor adjustments have been made to gray tones and accent colors for improved accessibility and digital clarity.
Where HelloFresh uses each color
- Primary
Used for logo, primary buttons, and key highlights across the website and packaging.
- Secondary
Applied to headers, navigation bars, and main text for strong contrast.
- Accent
Used for call-to-action highlights, icons, and notification badges.
- Backgrounds
White and light gray backgrounds are standard for app screens and web pages.
- Text
Charcoal and medium gray are used for primary and secondary text, ensuring readability.
- Semantic
Success green, yellow, red, and teal are used for alerts, notifications, and status indicators.
HelloFresh color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official HelloFresh primary color is #99CC33, known as HelloFresh Green.
HelloFresh Green (#99CC33) is RGB(153, 204, 51) and CMYK(25, 0, 75, 20).
HelloFresh uses #222222 (Charcoal), #666666 (Medium Gray), #A3A3A3 (Muted Gray), #F6F6F6 (Light Gray), and #E5E5E5 (Border Gray) for UI structure and text.
Use HelloFresh Green (#99CC33) for primary actions and branding, with grays for text and backgrounds, and yellow (#F8B500) or red (#E94F37) for highlights and alerts.
The secondary color is HelloFresh Charcoal, #222222, and the accent is HelloFresh Yellow, #F8B500. 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 HelloFresh's colors consistently when it generates UI.
Make something in the spirit of HelloFresh
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.