Pepsi color palette
Food & DrinkPepsi's brand color identity is defined by its iconic blue, accented by red and white, reflecting its American heritage and energetic image. The palette is bold, clean, and instantly recognizable across packaging and digital platforms.
pepsi.comPepsi colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Pepsi BluePrimary0, 92, 180
- Pepsi RedSecondary227, 41, 52
- Pepsi WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Pepsi Light GrayBackground245, 247, 250
- Pepsi Surface GraySurface233, 237, 242
- Pepsi Border GrayBorder209, 215, 223
Text
Three tiers of copy.- Pepsi NavyText0, 37, 84
- Pepsi SlateSecondary text75, 92, 107
- Pepsi Muted GrayMuted text122, 138, 153
Semantic
Feedback and state colors.- Pepsi Success GreenSuccess67, 176, 42
- Pepsi Warning YellowWarning255, 184, 28
- Pepsi Error RedError227, 41, 52
- Pepsi Info BlueInfo0, 159, 218
Use Pepsi's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
pepsi-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FDA;
--error: #E32934;
--accent: #FFFFFF;
--border: #D1D7DF;
--primary: #005CB4;
--success: #43B02A;
--surface: #E9EDF2;
--warning: #FFB81C;
--secondary: #E32934;
--text-muted: #7A8A99;
--background: #F5F7FA;
--text-primary: #002554;
--text-secondary: #4B5C6B;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
12.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Pass
Pepsi background, border and text colors
The quiet part of the Pepsi palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Pepsi Light GrayBackground
- HEX
- RGB
- HSL
- Pepsi Surface GraySurface
- HEX
- RGB
- HSL
- Pepsi Border GrayBorder
- HEX
- RGB
- HSL
- Pepsi NavyText
- HEX
- RGB
- HSL
- Pepsi SlateSecondary text
- HEX
- RGB
- HSL
- Pepsi Muted GrayMuted text
- HEX
- RGB
- HSL
About Pepsi's colors
Pepsi's palette uses a triadic scheme centered on blue, red, and white, conveying energy and clarity. The supporting grays provide balance and usability for digital interfaces.
Primary blue dominates branding and packaging.
Red is used for accents and emphasis.
White and grays create contrast and legibility.
Psychology
Blue communicates trust, refreshment, and reliability, while red adds excitement and energy. The white and gray tones ensure a clean, modern appearance.
Evolution
Pepsi's core blue, red, and white palette has remained consistent for decades, with minor adjustments to blue's shade over time. The addition of modern grays supports digital applications and accessibility.
Where Pepsi uses each color
- Primary
Pepsi Blue is used for logos, primary buttons, and major navigation elements.
- Secondary
Pepsi Red appears in logo details, call-to-action highlights, and promotional graphics.
- Accent
Pepsi White is used for backgrounds, text, and to separate elements for clarity.
- Backgrounds
Pepsi Light Gray and Surface Gray are used for app backgrounds, cards, and interface panels.
- Text
Pepsi Navy and Slate are used for primary and secondary text throughout digital and print materials.
- Semantic
Success Green, Warning Yellow, and Error Red are used for status indicators and alerts in digital interfaces.
Pepsi color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Pepsi Blue is #005CB4, as specified in the brand guidelines.
Pepsi Blue (#005CB4) is RGB(0, 92, 180) and CMYK(100, 49, 0, 29) according to Pepsi's official standards.
Pepsi uses Light Gray (#F5F7FA), Surface Gray (#E9EDF2), Border Gray (#D1D7DF), and Muted Gray (#7A8A99) for backgrounds, surfaces, and muted text.
Pepsi Blue (#005CB4) should dominate, with Red (#E32934) and White (#FFFFFF) for accents and contrast; grays provide structure in digital layouts.
The secondary color is Pepsi Red, #E32934, and the accent is Pepsi White, #FFFFFF. 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 Pepsi's colors consistently when it generates UI.
Make something in the spirit of Pepsi
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.