Illy color palette
Food & DrinkIlly is known for its iconic red and white color identity, reflecting Italian espresso culture and premium quality. The brand's palette is minimal, focusing on a signature red paired with white and subtle grays for UI clarity.
illy.comIlly colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Illy RedPrimary226, 35, 26
- Illy WhiteSecondary255, 255, 255
- Illy Deep RedAccent165, 28, 26
Surfaces
Page, cards and dividers.- Illy Light GrayBackground247, 247, 247
- Illy Soft GraySurface242, 242, 242
- Illy Border GrayBorder217, 217, 217
Text
Three tiers of copy.- Illy CharcoalText34, 34, 34
- Illy Medium GraySecondary text102, 102, 102
- Illy Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Illy Success GreenSuccess76, 176, 80
- Illy Warning YellowWarning246, 195, 67
- Illy Error RedError211, 47, 47
- Illy Info BlueInfo25, 118, 210
Use Illy's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
illy-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #A51C1A;
--border: #D9D9D9;
--primary: #E2231A;
--success: #4CB050;
--surface: #F2F2F2;
--warning: #F6C343;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F7F7F7;
--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
14.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Illy gray and neutral colors
The quiet part of the Illy palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Illy Light GrayBackground
- HEX
- RGB
- HSL
- Illy Soft GraySurface
- HEX
- RGB
- HSL
- Illy Border GrayBorder
- HEX
- RGB
- HSL
- Illy CharcoalText
- HEX
- RGB
- HSL
- Illy Medium GraySecondary text
- HEX
- RGB
- HSL
- Illy Muted GrayMuted text
- HEX
- RGB
- HSL
About Illy's colors
Illy’s palette is built around a vibrant, energetic red, contrasted with white and subtle grays for clarity and elegance. The color system is simple, direct, and highly recognizable.
Primary red is complemented by white for high contrast.
Grays are used for backgrounds and UI elements.
Accent deep red provides depth and hierarchy.
Psychology
Red evokes passion, energy, and Italian heritage, aligning with Illy’s espresso culture. The white and gray tones create a sense of cleanliness and premium quality.
Evolution
Illy’s core red and white palette has remained consistent for decades, reinforcing strong brand recognition. Minor adjustments to gray tones have been made for modern digital interfaces.
Where Illy uses each color
- Primary
Illy Red is used for the logo, primary buttons, and key call-to-action elements.
- Secondary
Illy White is the dominant background on packaging and digital interfaces.
- Accent
Illy Deep Red appears in hover states, highlights, and secondary buttons.
- Backgrounds
Illy Light Gray and Soft Gray are used for page backgrounds and card surfaces.
- Text
Illy Charcoal and Medium Gray are used for primary and secondary text throughout the website and printed materials.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for alerts and status indicators in digital applications.
Illy color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Illy brand red is #E2231A, used for the logo and primary branding elements.
Illy Red (#E2231A) is RGB(226, 35, 26) and CMYK(0, 85, 88, 11).
Illy uses Illy Light Gray (#F7F7F7), Illy Soft Gray (#F2F2F2), and Illy Border Gray (#D9D9D9) for backgrounds and borders.
Use Illy Red (#E2231A) for key branding and calls to action, with white and grays for backgrounds and text to maintain clarity and brand consistency.
The secondary color is Illy White, #FFFFFF, and the accent is Illy Deep Red, #A51C1A. 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 Illy's colors consistently when it generates UI.
Make something in the spirit of Illy
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.