Kellogg's color palette
Food & DrinkKellogg's brand identity is defined by its iconic red, used consistently across packaging, digital, and print. The palette is bold, simple, and instantly recognizable, with white and dark gray supporting the signature red.
kelloggs.comKellogg's colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Kellogg's RedPrimary237, 28, 36
- Kellogg's WhiteSecondary255, 255, 255
- Kellogg's YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Kellogg's Light GrayBackground245, 245, 245
- Kellogg's White SurfaceSurface255, 255, 255
- Kellogg's Silver GrayBorder209, 211, 212
Text
Three tiers of copy.- Kellogg's CharcoalText35, 31, 32
- Kellogg's Medium GraySecondary text109, 110, 113
- Kellogg's Muted GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- Kellogg's GreenSuccess67, 176, 42
- Kellogg's Warning YellowWarning255, 184, 28
- Kellogg's Error RedError210, 38, 48
- Kellogg's Info BlueInfo0, 114, 206
Use Kellogg's's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
kelloggs-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D22630;
--accent: #FFD600;
--border: #D1D3D4;
--primary: #ED1C24;
--success: #43B02A;
--surface: #FFFFFF;
--warning: #FFB81C;
--secondary: #FFFFFF;
--text-muted: #A7A8AA;
--background: #F5F5F5;
--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
15.0:1
Pass
Text on surface
Needs 4.5:1 for body text
16.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7: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.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Kellogg's gray and neutral colors
The quiet part of the Kellogg's palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Kellogg's Light GrayBackground
- HEX
- RGB
- HSL
- Kellogg's White SurfaceSurface
- HEX
- RGB
- HSL
- Kellogg's Silver GrayBorder
- HEX
- RGB
- HSL
- Kellogg's CharcoalText
- HEX
- RGB
- HSL
- Kellogg's Medium GraySecondary text
- HEX
- RGB
- HSL
- Kellogg's Muted GrayMuted text
- HEX
- RGB
- HSL
About Kellogg's's colors
Kellogg's color palette is centered on a vibrant red, supported by white, yellow, and neutral grays. The palette is designed for high visibility and strong brand recognition.
Red and white create a high-contrast, energetic pairing.
Yellow is used as an accent to highlight and draw attention.
Grays provide balance and legibility for text and UI elements.
Psychology
Red evokes energy, appetite, and excitement, fitting for a food brand. The white and gray tones convey cleanliness and approachability.
Evolution
Kellogg's red has remained consistent for decades, reinforcing its brand equity. Minor adjustments to supporting grays and accent colors have modernized the palette for digital use.
Where Kellogg's uses each color
- Primary
Kellogg's Red is used for the logo, primary buttons, and key packaging elements.
- Secondary
Kellogg's White serves as the main background for packaging, website sections, and text.
- Accent
Kellogg's Yellow highlights call-to-action buttons and important notifications.
- Backgrounds
Light gray backgrounds are used for UI panels and sections to provide subtle contrast.
- Text
Charcoal and medium gray are used for primary and secondary text to ensure readability.
- Semantic
Green, yellow, red, and blue are used for status indicators and alerts in digital interfaces.
Kellogg's color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Kellogg's brand red is #ED1C24. This color is used for the logo and key brand elements.
Kellogg's Red is #ED1C24, which is RGB(237, 28, 36) and CMYK(0, 100, 100, 0).
Kellogg's uses a range of grays: #F5F5F5 for light backgrounds, #D1D3D4 for borders, #6D6E71 for secondary text, and #A7A8AA for muted text.
Use Kellogg's Red (#ED1C24) for primary branding and calls to action, white (#FFFFFF) for backgrounds, and grays for text and UI structure. Accent yellow (#FFD600) should highlight important features or information.
The secondary color is Kellogg's White, #FFFFFF, and the accent is Kellogg's Yellow, #FFD600. 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 Kellogg's's colors consistently when it generates UI.
Make something in the spirit of Kellogg's
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.