San Pellegrino color palette
Food & DrinkSan Pellegrino's brand color identity centers on a deep blue and vibrant red, reflecting its Italian heritage and premium positioning. The palette is classic, with strong contrasts and restrained use of accent colors.
sanpellegrino.comSan Pellegrino colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- San Pellegrino BluePrimary27, 54, 93
- San Pellegrino RedSecondary233, 78, 56
- San Pellegrino GoldAccent247, 201, 72
Surfaces
Page, cards and dividers.- San Pellegrino WhiteBackground255, 255, 255
- San Pellegrino Light GreySurface244, 246, 248
- San Pellegrino Border GreyBorder209, 213, 219
Text
Three tiers of copy.- San Pellegrino Blue TextText27, 54, 93
- San Pellegrino Secondary TextSecondary text73, 88, 103
- San Pellegrino Muted GreyMuted text123, 135, 148
Semantic
Feedback and state colors.- San Pellegrino GreenSuccess75, 170, 80
- San Pellegrino GoldWarning247, 201, 72
- San Pellegrino RedError233, 78, 56
- San Pellegrino Blue InfoInfo27, 54, 93
Use San Pellegrino's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
san-pellegrino-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1B365D;
--error: #E94E38;
--accent: #F7C948;
--border: #D1D5DB;
--primary: #1B365D;
--success: #4BAA50;
--surface: #F4F6F8;
--warning: #F7C948;
--secondary: #E94E38;
--text-muted: #7B8794;
--background: #FFFFFF;
--text-primary: #1B365D;
--text-secondary: #495867;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
11.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.7:1
Pass
Muted text on background
Needs 3:1 for large text
3.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
San Pellegrino background, border and text colors
The quiet part of the San Pellegrino palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- San Pellegrino WhiteBackground
- HEX
- RGB
- HSL
- San Pellegrino Light GreySurface
- HEX
- RGB
- HSL
- San Pellegrino Border GreyBorder
- HEX
- RGB
- HSL
- San Pellegrino Blue TextText
- HEX
- RGB
- HSL
- San Pellegrino Secondary TextSecondary text
- HEX
- RGB
- HSL
- San Pellegrino Muted GreyMuted text
- HEX
- RGB
- HSL
About San Pellegrino's colors
San Pellegrino's palette is built on a foundation of deep blue and red, evoking trust, heritage, and vibrancy. The use of gold and subtle greys adds a premium and approachable feel.
Primary blue and red are complementary and high-contrast.
Gold accent provides warmth and highlights.
Greys and white balance the strong colors for clarity.
Psychology
The blue conveys reliability and tradition, while the red star signals energy and Italian passion. Gold accents reinforce a sense of quality and celebration.
Evolution
San Pellegrino's color palette has remained consistent for decades, with only minor adjustments to shades for digital clarity. The core blue and red have always been central to the brand's identity.
Where San Pellegrino uses each color
- Primary
Used for the logo, navigation bar, and key brand elements.
- Secondary
Appears in the iconic red star, call-to-action buttons, and highlights.
- Accent
Gold is used for premium cues, seals, and select packaging details.
- Backgrounds
White and light grey are used for website backgrounds and product photography.
- Text
Primary blue and secondary grey tones are used for headings and body text.
- Semantic
Green, gold, and red are used for status indicators, warnings, and errors in digital interfaces.
San Pellegrino color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official San Pellegrino primary brand color is #1B365D, known as San Pellegrino Blue. This is used across their logo and main branding elements.
San Pellegrino Blue (#1B365D) in RGB is (27, 54, 93) and in CMYK is approximately (71, 42, 0, 64). These values ensure color consistency in print and digital.
San Pellegrino uses #F4F6F8 (San Pellegrino Light Grey) and #D1D5DB (San Pellegrino Border Grey) as its primary neutral tones. These are used for backgrounds, surfaces, and UI elements.
The primary blue (#1B365D) should dominate, with red (#E94E38) and gold (#F7C948) as accents. Neutrals and white provide balance and should be used for backgrounds and text for optimal readability.
The secondary color is San Pellegrino Red, #E94E38, and the accent is San Pellegrino Gold, #F7C948. 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 San Pellegrino's colors consistently when it generates UI.
Make something in the spirit of San Pellegrino
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.