Innocent color palette
Food & DrinkInnocent uses a vibrant red as its primary color, complemented by soft neutrals and playful accent tones, reflecting its approachable and friendly brand identity. The palette is consistent across packaging, digital, and print materials.
innocentdrinks.co.ukInnocent colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Innocent RedPrimary237, 28, 36
- Innocent PeachSecondary247, 233, 225
- Innocent YellowAccent249, 214, 22
Surfaces
Page, cards and dividers.- Innocent WhiteBackground255, 255, 255
- Innocent Light GreySurface243, 243, 243
- Innocent Grey BorderBorder214, 214, 214
Text
Three tiers of copy.- Innocent CharcoalText51, 51, 51
- Innocent Mid GreySecondary text118, 118, 118
- Innocent Muted GreyMuted text179, 179, 179
Semantic
Feedback and state colors.- Innocent GreenSuccess109, 192, 103
- Innocent YellowWarning249, 214, 22
- Innocent RedError237, 28, 36
- Innocent BlueInfo0, 174, 239
Use Innocent's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
innocent-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00AEEF;
--error: #ED1C24;
--accent: #F9D616;
--border: #D6D6D6;
--primary: #ED1C24;
--success: #6DC067;
--surface: #F3F3F3;
--warning: #F9D616;
--secondary: #F7E9E1;
--text-muted: #B3B3B3;
--background: #FFFFFF;
--text-primary: #333333;
--text-secondary: #767676;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.6:1
Pass
Text on surface
Needs 4.5:1 for body text
11.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.1:1
Fail
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Innocent gray and neutral colors
The quiet part of the Innocent palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Innocent WhiteBackground
- HEX
- RGB
- HSL
- Innocent Light GreySurface
- HEX
- RGB
- HSL
- Innocent Grey BorderBorder
- HEX
- RGB
- HSL
- Innocent CharcoalText
- HEX
- RGB
- HSL
- Innocent Mid GreySecondary text
- HEX
- RGB
- HSL
- Innocent Muted GreyMuted text
- HEX
- RGB
- HSL
About Innocent's colors
Innocent's palette is built around a signature red, supported by soft, playful tones and clean neutrals. The colors evoke freshness, friendliness, and approachability.
Primary red is contrasted with soft neutrals for clarity.
Accent yellow adds vibrancy and highlights key elements.
Green and blue are used sparingly for semantic and informational cues.
Psychology
The red conveys energy and warmth, making the brand feel lively and inviting. Soft neutrals and playful accents reinforce Innocent's wholesome, cheerful personality.
Evolution
The Innocent palette has remained largely consistent since the brand's inception, with minor refinements to accent and neutral tones for digital clarity. The primary red has always been central to brand recognition.
Where Innocent uses each color
- Primary
Used for the Innocent logo, key buttons, and call-to-action elements on the website and packaging.
- Secondary
Appears as a background in illustrations and secondary UI elements.
- Accent
Highlights important information, promotions, and playful details in both digital and print.
- Backgrounds
White and light grey backgrounds are used for product packaging, website sections, and app screens.
- Text
Charcoal and mid grey are used for primary and secondary text across all media.
- Semantic
Green, yellow, and blue are used for status, warnings, and informational messages in digital interfaces.
Innocent color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Innocent brand color is Innocent Red, hex code #ED1C24.
Innocent Red is RGB(237, 28, 36) and CMYK(0, 100, 100, 0). The hex code is #ED1C24.
Innocent uses Innocent Light Grey (#F3F3F3), Innocent Grey Border (#D6D6D6), Innocent Charcoal (#333333), Innocent Mid Grey (#767676), and Innocent Muted Grey (#B3B3B3) for UI and text elements.
Use Innocent Red (#ED1C24) for primary branding and calls to action, with neutrals for backgrounds and text. Accent and semantic colors should be reserved for highlights, status, and informational cues.
The secondary color is Innocent Peach, #F7E9E1, and the accent is Innocent Yellow, #F9D616. Together with the primary they make up the three brand colors at the top of this page.
3 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 Innocent's colors consistently when it generates UI.
Make something in the spirit of Innocent
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.