Tylenol color palette
ConsumerTylenol's brand identity is defined by its iconic, bold red, supported by clean whites and functional grays for clarity and trust. The palette is consistent across packaging, digital, and advertising, emphasizing reliability and medical authority.
tylenol.comTylenol colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Tylenol RedPrimary197, 0, 24
- Tylenol WhiteSecondary255, 255, 255
- Tylenol Light GrayAccent237, 237, 237
Surfaces
Page, cards and dividers.- Tylenol Background GrayBackground247, 247, 247
- Tylenol Surface WhiteSurface255, 255, 255
- Tylenol Border GrayBorder216, 216, 216
Text
Three tiers of copy.- Tylenol Primary TextText34, 34, 34
- Tylenol Secondary TextSecondary text85, 85, 85
- Tylenol Muted TextMuted text136, 136, 136
Semantic
Feedback and state colors.- Tylenol Success GreenSuccess75, 174, 79
- Tylenol Warning YellowWarning246, 177, 0
- Tylenol Error RedError197, 0, 24
- Tylenol Info BlueInfo0, 118, 192
Use Tylenol's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tylenol-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0076C0;
--error: #C50018;
--accent: #EDEDED;
--border: #D8D8D8;
--primary: #C50018;
--success: #4BAE4F;
--surface: #FFFFFF;
--warning: #F6B100;
--secondary: #FFFFFF;
--text-muted: #888888;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #555555;
}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
15.9: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
7.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.5:1
Pass
Tylenol gray and neutral colors
The quiet part of the Tylenol palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Tylenol Background GrayBackground
- HEX
- RGB
- HSL
- Tylenol Surface WhiteSurface
- HEX
- RGB
- HSL
- Tylenol Border GrayBorder
- HEX
- RGB
- HSL
- Tylenol Primary TextText
- HEX
- RGB
- HSL
- Tylenol Secondary TextSecondary text
- HEX
- RGB
- HSL
- Tylenol Muted TextMuted text
- HEX
- RGB
- HSL
About Tylenol's colors
Tylenol's palette is anchored by a strong, medical red, complemented by neutral whites and grays for clarity and accessibility. The use of accent colors is minimal, focusing attention on core messaging and product packaging.
Primary red dominates packaging and calls to action.
Neutral grays and whites provide balance and readability.
Accent colors are reserved for semantic states and subtle UI cues.
Psychology
Red conveys urgency, trust, and medical reliability, aligning with Tylenol's healthcare positioning. The supporting neutrals evoke cleanliness and approachability.
Evolution
Tylenol's palette has remained largely unchanged for decades, maintaining brand recognition and consistency. Minor adjustments have been made to gray tones for improved digital accessibility.
Where Tylenol uses each color
- Primary
Used for logo, primary buttons, and key packaging elements.
- Secondary
Backgrounds, negative space, and product labels.
- Accent
Section dividers, subtle UI backgrounds, and hover states.
- Backgrounds
Main website and app backgrounds, as well as packaging panels.
- Text
Headlines, body copy, and product information use primary and secondary text colors.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
Tylenol color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Tylenol brand red is #C50018, used prominently on packaging and digital assets.
Tylenol Red (#C50018) is RGB(197, 0, 24) and typically CMYK(0, 100, 88, 23) for print.
Tylenol uses #EDEDED (Light Gray), #F7F7F7 (Background Gray), and #D8D8D8 (Border Gray) for UI and packaging backgrounds.
Use Tylenol Red (#C50018) for primary actions and branding, with whites and grays for backgrounds and text to ensure clarity and accessibility.
The secondary color is Tylenol White, #FFFFFF, and the accent is Tylenol Light Gray, #EDEDED. Together with the primary they make up the three brand colors at the top of this page.
6 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 Tylenol's colors consistently when it generates UI.
Make something in the spirit of Tylenol
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.