Lipton color palette
Food & DrinkLipton's color identity is defined by its iconic bright yellow and vibrant red, reflecting energy and refreshment. The palette is consistent across packaging, digital, and advertising touchpoints.
lipton.comLipton colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Lipton YellowPrimary255, 242, 0
- Lipton RedSecondary227, 34, 25
- Lipton GoldAccent247, 198, 0
Surfaces
Page, cards and dividers.- Lipton WhiteBackground255, 255, 255
- Lipton Light YellowSurface255, 249, 217
- Lipton Light GrayBorder229, 229, 229
Text
Three tiers of copy.- Lipton CharcoalText35, 31, 32
- Lipton GraySecondary text109, 110, 113
- Lipton Muted GrayMuted text191, 191, 191
Semantic
Feedback and state colors.- Lipton GreenSuccess141, 198, 63
- Lipton AmberWarning255, 184, 28
- Lipton RedError227, 34, 25
- Lipton BlueInfo0, 149, 218
Use Lipton's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
lipton-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0095DA;
--error: #E32219;
--accent: #F7C600;
--border: #E5E5E5;
--primary: #FFF200;
--success: #8DC63F;
--surface: #FFF9D9;
--warning: #FFB81C;
--secondary: #E32219;
--text-muted: #BFBFBF;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #6D6E71;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.8:1
Pass
Muted text on background
Needs 3:1 for large text
1.8:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
Lipton background, border and text colors
The quiet part of the Lipton palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Lipton WhiteBackground
- HEX
- RGB
- HSL
- Lipton Light YellowSurface
- HEX
- RGB
- HSL
- Lipton Light GrayBorder
- HEX
- RGB
- HSL
- Lipton CharcoalText
- HEX
- RGB
- HSL
- Lipton GraySecondary text
- HEX
- RGB
- HSL
- Lipton Muted GrayMuted text
- HEX
- RGB
- HSL
About Lipton's colors
Lipton's palette is built around high-visibility yellow and red, evoking warmth, energy, and positivity. The supporting colors provide clarity and contrast for digital and print applications.
Primary yellow is complemented by vivid red for brand recognition.
Neutral grays and white balance the bright palette in UI contexts.
Green and blue are used sparingly for functional and informational cues.
Psychology
Yellow is associated with optimism, clarity, and refreshment, aligning with Lipton's brand values. Red adds a sense of energy and appetite stimulation.
Evolution
Lipton's palette has remained stable, with yellow and red as core identifiers for decades. Recent digital applications have introduced more nuanced neutrals for accessibility and clarity.
Where Lipton uses each color
- Primary
Lipton Yellow is used for packaging backgrounds, website headers, and key brand marks.
- Secondary
Lipton Red appears in the logo, call-to-action buttons, and accent graphics.
- Accent
Lipton Gold highlights product details and promotional banners.
- Backgrounds
Lipton White and Light Yellow are used for website and app backgrounds.
- Text
Lipton Charcoal and Gray are used for primary and secondary text in digital and print.
- Semantic
Green, Amber, Red, and Blue are used for status indicators and informational messaging in digital interfaces.
Lipton color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Lipton brand color is Lipton Yellow, hex code #FFF200.
Lipton Yellow (#FFF200) is RGB(255, 242, 0) and CMYK(0, 0, 100, 0).
Lipton uses Lipton Charcoal (#231F20), Lipton Gray (#6D6E71), and Lipton Muted Gray (#BFBFBF) for text and UI backgrounds.
Use Lipton Yellow (#FFF200) and Lipton Red (#E32219) for primary branding, with neutrals and accents supporting UI and legibility.
The secondary color is Lipton Red, #E32219, and the accent is Lipton Gold, #F7C600. 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 Lipton's colors consistently when it generates UI.
Make something in the spirit of Lipton
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.