Lay's color palette
Food & DrinkLay's brand color identity centers on a vibrant yellow, reflecting its cheerful and approachable image. The palette is bold, energetic, and consistent across packaging and digital platforms.
lays.comLay's colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Lay's YellowPrimary255, 214, 0
- Lay's RedSecondary228, 26, 28
- Lay's WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Lay's CreamBackground255, 249, 227
- Lay's Light YellowSurface244, 224, 77
- Lay's GoldBorder229, 194, 0
Text
Three tiers of copy.- Lay's CharcoalText45, 45, 45
- Lay's GraySecondary text109, 109, 109
- Lay's Light GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Lay's GreenSuccess122, 193, 67
- Lay's OrangeWarning255, 179, 0
- Lay's Alert RedError211, 47, 47
- Lay's BlueInfo25, 118, 210
Use Lay's's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
lays-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #E5C200;
--primary: #FFD600;
--success: #7AC143;
--surface: #F4E04D;
--warning: #FFB300;
--secondary: #E41A1C;
--text-muted: #BDBDBD;
--background: #FFF9E3;
--text-primary: #2D2D2D;
--text-secondary: #6D6D6D;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.1:1
Pass
Text on surface
Needs 4.5:1 for body text
10.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
3.8:1
Fail
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.4:1
Fail
Lay's background, border and text colors
The quiet part of the Lay's palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Lay's CreamBackground
- HEX
- RGB
- HSL
- Lay's Light YellowSurface
- HEX
- RGB
- HSL
- Lay's GoldBorder
- HEX
- RGB
- HSL
- Lay's CharcoalText
- HEX
- RGB
- HSL
- Lay's GraySecondary text
- HEX
- RGB
- HSL
- Lay's Light GrayMuted text
- HEX
- RGB
- HSL
About Lay's's colors
Lay's color palette is built around a dominant yellow, supported by bold red and white for contrast and clarity. The colors are chosen for high visibility and a sense of warmth and fun.
Primary yellow paired with red for strong visual impact.
White used for clarity and contrast in logos and text.
Dark neutrals provide legibility and balance.
Psychology
Yellow conveys happiness, energy, and appetite, making it ideal for a snack brand. Red adds excitement and draws attention to key elements.
Evolution
Lay's palette has remained largely stable, with yellow and red as core colors since early branding. Minor adjustments have been made to yellow tones for digital consistency.
Where Lay's uses each color
- Primary
Lay's Yellow is used for packaging backgrounds, website headers, and key brand elements.
- Secondary
Lay's Red appears in the logo, call-to-action buttons, and accent graphics.
- Accent
Lay's White is used for logo text, backgrounds, and highlights.
- Backgrounds
Lay's Cream serves as a subtle background on digital and print materials.
- Text
Lay's Charcoal and Gray are used for primary and secondary text on web and packaging.
- Semantic
Lay's Green, Orange, Alert Red, and Blue are used for status messages and informational tags in digital interfaces.
Lay's color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Lay's brand yellow is #FFD600. This color is used as the primary background on packaging and digital assets.
Lay's Yellow (#FFD600) is RGB(255, 214, 0) and CMYK(0, 16, 100, 0). These values ensure color consistency across print and digital.
Lay's uses #2D2D2D (Lay's Charcoal), #6D6D6D (Lay's Gray), and #BDBDBD (Lay's Light Gray) for text and UI elements. These provide contrast and readability against the bright yellow background.
Use Lay's Yellow (#FFD600) for primary branding, with Lay's Red (#E41A1C) for accents and calls to action. Neutrals and white support legibility and balance in layouts.
The secondary color is Lay's Red, #E41A1C, and the accent is Lay's White, #FFFFFF. 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 Lay's's colors consistently when it generates UI.
Make something in the spirit of Lay's
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.