Vicks color palette
ConsumerVicks' brand identity centers around its distinctive teal and green palette, evoking trust and health. The color system is consistent across packaging, digital, and advertising materials.
vicks.comVicks colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Vicks TealPrimary0, 118, 129
- Vicks AquaSecondary0, 156, 166
- Vicks MintAccent0, 181, 184
Surfaces
Page, cards and dividers.- Vicks LightBackground246, 249, 248
- Vicks Pale TealSurface230, 242, 242
- Vicks Soft BorderBorder178, 216, 216
Text
Three tiers of copy.- Vicks Deep TealText0, 54, 56
- Vicks SlateSecondary text76, 112, 114
- Vicks MistMuted text124, 166, 166
Semantic
Feedback and state colors.- Vicks Med GreenSuccess60, 179, 113
- Vicks YellowWarning255, 214, 0
- Vicks Alert RedError229, 57, 53
- Vicks Info AquaInfo0, 156, 166
Use Vicks's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
vicks-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009CA6;
--error: #E53935;
--accent: #00B5B8;
--border: #B2D8D8;
--primary: #007681;
--success: #3CB371;
--surface: #E6F2F2;
--warning: #FFD600;
--secondary: #009CA6;
--text-muted: #7CA6A6;
--background: #F6F9F8;
--text-primary: #003638;
--text-secondary: #4C7072;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.5:1
Pass
Text on surface
Needs 4.5:1 for body text
11.6: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.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Vicks background, border and text colors
The quiet part of the Vicks palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Vicks LightBackground
- HEX
- RGB
- HSL
- Vicks Pale TealSurface
- HEX
- RGB
- HSL
- Vicks Soft BorderBorder
- HEX
- RGB
- HSL
- Vicks Deep TealText
- HEX
- RGB
- HSL
- Vicks SlateSecondary text
- HEX
- RGB
- HSL
- Vicks MistMuted text
- HEX
- RGB
- HSL
About Vicks's colors
Vicks' palette is built around calming teal-greens, reinforcing its association with wellness and relief. The supporting colors are cool, clean, and medical in tone.
Primary and secondary teals are analogous for harmony.
Accent mint adds vibrancy and freshness.
Neutrals and deep teal provide contrast for legibility.
Psychology
Teal and green shades evoke trust, cleanliness, and a sense of calm, aligning with Vicks' health-focused messaging. The palette is designed to be reassuring and approachable.
Evolution
The core teal and green colors have remained stable for decades, maintaining strong brand recognition. Minor adjustments to supporting tones have modernized the palette for digital use.
Where Vicks uses each color
- Primary
Used in the Vicks logo, primary navigation, and key packaging elements.
- Secondary
Appears in backgrounds, secondary buttons, and highlights on the website.
- Accent
Used for call-to-action buttons and important icons.
- Backgrounds
Applied to page backgrounds and product packaging for a clean, clinical look.
- Text
Deep teal and slate are used for headings and body text to ensure readability.
- Semantic
Green, yellow, and red are used for status indicators and alerts in digital interfaces.
Vicks color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Vicks brand color is 'Vicks Teal', hex code #007681.
Vicks Teal (#007681) is RGB(0, 118, 129) and CMYK(100, 9, 0, 49).
Vicks uses 'Vicks Light' (#F6F9F8) for backgrounds and 'Vicks Mist' (#7CA6A6) for muted text and UI elements.
Primary teal (#007681) should dominate, with secondary and accent colors supporting navigation and calls to action. Neutrals and deep tones ensure accessibility and clarity in digital and print applications.
The secondary color is Vicks Aqua, #009CA6, and the accent is Vicks Mint, #00B5B8. 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 Vicks's colors consistently when it generates UI.
Make something in the spirit of Vicks
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.