Advil color palette
ConsumerAdvil's color identity is defined by its deep blue and bold yellow, reflecting trust and efficacy. The palette is consistent across packaging, digital, and promotional materials.
advil.comAdvil colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Advil BluePrimary0, 40, 120
- Advil YellowSecondary255, 209, 0
- Advil RedAccent226, 35, 26
Surfaces
Page, cards and dividers.- Advil Light GrayBackground245, 246, 250
- Advil WhiteSurface255, 255, 255
- Advil Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Advil Blue TextText0, 40, 120
- Advil Dark Gray TextSecondary text51, 51, 51
- Advil Muted GrayMuted text107, 114, 128
Semantic
Feedback and state colors.- Advil GreenSuccess0, 132, 61
- Advil Warning YellowWarning255, 184, 0
- Advil Error RedError226, 35, 26
- Advil Info BlueInfo0, 114, 206
Use Advil's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
advil-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #E2231A;
--accent: #E2231A;
--border: #D1D5DB;
--primary: #002878;
--success: #00843D;
--surface: #FFFFFF;
--warning: #FFB800;
--secondary: #FFD100;
--text-muted: #6B7280;
--background: #F5F6FA;
--text-primary: #002878;
--text-secondary: #333333;
}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.3:1
Pass
Text on surface
Needs 4.5:1 for body text
13.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
11.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Muted text on background
Needs 3:1 for large text
4.5:1
Pass
Muted text on surface
Needs 3:1 for large text
4.8:1
Pass
Advil background, border and text colors
The quiet part of the Advil palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Advil Light GrayBackground
- HEX
- RGB
- HSL
- Advil WhiteSurface
- HEX
- RGB
- HSL
- Advil Border GrayBorder
- HEX
- RGB
- HSL
- Advil Blue TextText
- HEX
- RGB
- HSL
- Advil Dark Gray TextSecondary text
- HEX
- RGB
- HSL
- Advil Muted GrayMuted text
- HEX
- RGB
- HSL
About Advil's colors
Advil's palette is anchored by a strong blue and vibrant yellow, creating a sense of reliability and energy. The supporting colors provide clarity and reinforce the brand's medical trustworthiness.
Primary blue and yellow are complementary for high contrast.
Red accent is used for urgency and highlights.
Neutral grays balance the bold colors for readability.
Psychology
The deep blue conveys trust, dependability, and calm, which are essential for a healthcare brand. Yellow adds energy and optimism, while red signals attention and action.
Evolution
Advil's core blue and yellow have remained consistent since its inception, reinforcing brand recognition. Minor adjustments have been made to neutral tones for improved digital accessibility.
Where Advil uses each color
- Primary
Advil Blue is used for the logo, navigation bars, and key call-to-action buttons.
- Secondary
Advil Yellow appears in highlights, packaging elements, and secondary buttons.
- Accent
Advil Red is reserved for urgent notifications, warnings, and promotional highlights.
- Backgrounds
Advil Light Gray and White are used for page backgrounds and content areas.
- Text
Advil Blue and Dark Gray are used for primary and secondary text, with Muted Gray for less prominent information.
- Semantic
Green, Yellow, and Red are used for success, warning, and error states in digital interfaces.
Advil color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Advil brand color is Advil Blue, hex code #002878.
Advil Blue (#002878) in RGB is (0, 40, 120) and in CMYK is (100, 67, 0, 53).
Advil uses Light Gray (#F5F6FA), Border Gray (#D1D5DB), and Muted Gray (#6B7280) for backgrounds, borders, and muted text.
Primary and secondary colors should be used for branding and key UI elements, while neutrals ensure readability and accessibility. Accent and semantic colors are reserved for highlights, alerts, and status indicators.
The secondary color is Advil Yellow, #FFD100, and the accent is Advil Red, #E2231A. 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 Advil's colors consistently when it generates UI.
Make something in the spirit of Advil
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.