Listerine color palette
ConsumerListerine's color identity centers on a vibrant blue, reflecting freshness and cleanliness, with supporting cool tones and neutral grays for clarity. The palette is consistent across packaging, digital, and print materials.
listerine.comListerine colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Listerine BluePrimary0, 147, 208
- Listerine NavySecondary0, 59, 92
- Listerine AquaAccent0, 176, 218
Surfaces
Page, cards and dividers.- Listerine WhiteBackground255, 255, 255
- Listerine Light GraySurface245, 247, 250
- Listerine Border GrayBorder217, 226, 236
Text
Three tiers of copy.- Listerine CharcoalText34, 34, 34
- Listerine SlateSecondary text79, 91, 98
- Listerine Muted GrayMuted text138, 153, 166
Semantic
Feedback and state colors.- Listerine GreenSuccess67, 176, 42
- Listerine YellowWarning255, 194, 14
- Listerine RedError233, 79, 54
- Listerine BlueInfo0, 147, 208
Use Listerine's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
listerine-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0093D0;
--error: #E94F36;
--accent: #00B0DA;
--border: #D9E2EC;
--primary: #0093D0;
--success: #43B02A;
--surface: #F5F7FA;
--warning: #FFC20E;
--secondary: #003B5C;
--text-muted: #8A99A6;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #4F5B62;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.5:1
Pass
Muted text on background
Needs 3:1 for large text
2.9:1
Fail
Muted text on surface
Needs 3:1 for large text
2.7:1
Fail
Listerine background, border and text colors
The quiet part of the Listerine palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Listerine WhiteBackground
- HEX
- RGB
- HSL
- Listerine Light GraySurface
- HEX
- RGB
- HSL
- Listerine Border GrayBorder
- HEX
- RGB
- HSL
- Listerine CharcoalText
- HEX
- RGB
- HSL
- Listerine SlateSecondary text
- HEX
- RGB
- HSL
- Listerine Muted GrayMuted text
- HEX
- RGB
- HSL
About Listerine's colors
Listerine's palette is built around a signature blue, evoking trust, hygiene, and freshness. The supporting cool tones and neutral grays provide clarity and reinforce a clinical, reliable feel.
Primary blue is complemented by navy and aqua for depth.
Neutral grays balance the vivid blues for readability.
Accent colors highlight calls to action and product variants.
Psychology
Blue is associated with cleanliness, trust, and calmness, which aligns with Listerine's dental health positioning. The use of green and yellow for status signals adds a sense of vitality and caution where needed.
Evolution
Listerine's palette has remained stable, with the blue serving as a consistent brand anchor. Minor adjustments to gray tones have been made for digital accessibility.
Where Listerine uses each color
- Primary
Listerine Blue is used for headers, key buttons, and packaging backgrounds.
- Secondary
Listerine Navy appears in navigation bars, footers, and secondary buttons.
- Accent
Listerine Aqua is applied to highlights, links, and product variant labels.
- Backgrounds
Listerine White and Light Gray are used for website and app backgrounds.
- Text
Charcoal and Slate grays are used for primary and secondary text across digital and print.
- Semantic
Green, Yellow, and Red are used for success, warning, and error states in digital interfaces.
Listerine color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Listerine brand color is Listerine Blue, hex code #0093D0.
Listerine Blue (#0093D0) has an RGB value of (0, 147, 208) and a CMYK value of (100, 29, 0, 18).
Listerine uses Light Gray (#F5F7FA), Border Gray (#D9E2EC), and Muted Gray (#8A99A6) for backgrounds, borders, and muted text.
Use Listerine Blue (#0093D0) for primary actions and branding, with navy and aqua for support. Neutral grays provide structure and readability in backgrounds and text.
The secondary color is Listerine Navy, #003B5C, and the accent is Listerine Aqua, #00B0DA. 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 Listerine's colors consistently when it generates UI.
Make something in the spirit of Listerine
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.