Colgate color palette
ConsumerColgate's color identity is dominated by its iconic bright red, symbolizing energy and cleanliness, with white and gray neutrals supporting across packaging and digital. The palette is consistent and instantly recognizable across all touchpoints.
colgate.comColgate colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Colgate RedPrimary228, 28, 35
- Colgate WhiteSecondary255, 255, 255
- Colgate AquaAccent0, 156, 166
Surfaces
Page, cards and dividers.- Colgate Light GrayBackground247, 247, 247
- Colgate Soft GraySurface242, 242, 242
- Colgate Border GrayBorder217, 217, 217
Text
Three tiers of copy.- Colgate CharcoalText34, 34, 34
- Colgate Medium GraySecondary text102, 102, 102
- Colgate Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Colgate GreenSuccess67, 176, 42
- Colgate YellowWarning255, 184, 28
- Colgate RedError228, 28, 35
- Colgate AquaInfo0, 156, 166
Use Colgate's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
colgate-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009CA6;
--error: #E41C23;
--accent: #009CA6;
--border: #D9D9D9;
--primary: #E41C23;
--success: #43B02A;
--surface: #F2F2F2;
--warning: #FFB81C;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #666666;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4: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.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Colgate gray and neutral colors
The quiet part of the Colgate palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Colgate Light GrayBackground
- HEX
- RGB
- HSL
- Colgate Soft GraySurface
- HEX
- RGB
- HSL
- Colgate Border GrayBorder
- HEX
- RGB
- HSL
- Colgate CharcoalText
- HEX
- RGB
- HSL
- Colgate Medium GraySecondary text
- HEX
- RGB
- HSL
- Colgate Muted GrayMuted text
- HEX
- RGB
- HSL
About Colgate's colors
Colgate's palette is built around a vivid red, supported by clean whites and cool aquas for freshness. The use of neutral grays ensures clarity and readability in digital and print applications.
Red and white create strong contrast for brand recognition.
Aqua accentuates freshness and oral care cues.
Grays provide neutral backgrounds for product and text clarity.
Psychology
Red conveys energy, urgency, and trust, aligning with health and hygiene messaging. Aqua and white reinforce cleanliness and a sense of freshness.
Evolution
Colgate's core red and white palette has remained stable for decades, ensuring global consistency. Recent digital applications have introduced more nuanced grays and aqua accents for UI clarity.
Where Colgate uses each color
- Primary
Colgate Red is used in the logo, primary buttons, and key call-to-action areas.
- Secondary
Colgate White appears in backgrounds, packaging, and as a contrast to the red in the logo.
- Accent
Colgate Aqua is used for highlights, links, and freshness cues on the website.
- Backgrounds
Colgate Light Gray and Soft Gray serve as page backgrounds and card surfaces in digital interfaces.
- Text
Colgate Charcoal and Medium Gray are used for primary and secondary text, ensuring readability.
- Semantic
Colgate Green, Yellow, and Red are used for success, warning, and error states in digital UI elements.
Colgate color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Colgate brand color is Colgate Red, with the hex code #E41C23.
Colgate Red is RGB(228, 28, 35) and CMYK(0, 100, 100, 0). The hex code is #E41C23.
Colgate uses Light Gray (#F7F7F7), Soft Gray (#F2F2F2), Border Gray (#D9D9D9), Medium Gray (#666666), and Muted Gray (#999999) for backgrounds, borders, and text.
Colgate Red should dominate key brand elements, with white and gray backgrounds for clarity, and aqua accents for freshness. Use semantic colors for UI states and ensure sufficient contrast for accessibility.
The secondary color is Colgate White, #FFFFFF, and the accent is Colgate Aqua, #009CA6. 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 Colgate's colors consistently when it generates UI.
Make something in the spirit of Colgate
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.