Band-Aid color palette
ConsumerBand-Aid's color identity centers on its iconic red, supported by clean whites and neutral grays for a clinical, trustworthy appearance. The palette is consistent across packaging, digital, and print, emphasizing health and reliability.
band-aid.comBand-Aid colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Band-Aid RedPrimary228, 27, 19
- Band-Aid WhiteSecondary255, 255, 255
- Band-Aid BlueAccent0, 114, 206
Surfaces
Page, cards and dividers.- Band-Aid Light GrayBackground247, 247, 247
- Band-Aid Surface GraySurface242, 242, 242
- Band-Aid Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Band-Aid CharcoalText34, 34, 34
- Band-Aid Medium GraySecondary text102, 102, 102
- Band-Aid Muted GrayMuted text167, 169, 172
Semantic
Feedback and state colors.- Band-Aid GreenSuccess67, 176, 42
- Band-Aid YellowWarning255, 194, 14
- Band-Aid RedError228, 27, 19
- Band-Aid BlueInfo0, 114, 206
Use Band-Aid's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
band-aid-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #E41B13;
--accent: #0072CE;
--border: #D1D3D4;
--primary: #E41B13;
--success: #43B02A;
--surface: #F2F2F2;
--warning: #FFC20E;
--secondary: #FFFFFF;
--text-muted: #A7A9AC;
--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.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Band-Aid gray and neutral colors
The quiet part of the Band-Aid palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Band-Aid Light GrayBackground
- HEX
- RGB
- HSL
- Band-Aid Surface GraySurface
- HEX
- RGB
- HSL
- Band-Aid Border GrayBorder
- HEX
- RGB
- HSL
- Band-Aid CharcoalText
- HEX
- RGB
- HSL
- Band-Aid Medium GraySecondary text
- HEX
- RGB
- HSL
- Band-Aid Muted GrayMuted text
- HEX
- RGB
- HSL
About Band-Aid's colors
Band-Aid's palette uses a strong red for brand recognition and trust, complemented by blue for reliability and grays for a clinical feel. The colors are chosen for clarity and accessibility in health-related contexts.
Red and blue create a bold, trustworthy contrast.
Neutrals balance the strong primary colors.
White space emphasizes cleanliness and care.
Psychology
Red signals urgency and care, aligning with first aid and health. Blue and gray tones reinforce trust, cleanliness, and professionalism.
Evolution
The Band-Aid palette has remained stable for decades, with red as the anchor. Minor adjustments have been made to grays and blues for digital clarity.
Where Band-Aid uses each color
- Primary
Band-Aid Red is used for the logo, key buttons, and primary calls to action.
- Secondary
Band-Aid White appears in backgrounds, packaging, and text for contrast.
- Accent
Band-Aid Blue highlights links, icons, and secondary actions.
- Backgrounds
Light and surface grays are used for website backgrounds and product imagery.
- Text
Charcoal and medium gray are used for primary and secondary text, ensuring readability.
- Semantic
Green, yellow, and red are used for success, warning, and error states in digital interfaces.
Band-Aid color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Band-Aid brand color is red, hex code #E41B13.
Band-Aid Red (#E41B13) is RGB(228, 27, 19) and CMYK(0, 88, 92, 11).
Band-Aid uses several grays: Light Gray (#F7F7F7), Surface Gray (#F2F2F2), Border Gray (#D1D3D4), Medium Gray (#666666), and Muted Gray (#A7A9AC).
Use Band-Aid Red (#E41B13) for primary branding and actions, with blue (#0072CE) for accents and grays for backgrounds and text. Maintain high contrast for accessibility and brand consistency.
The secondary color is Band-Aid White, #FFFFFF, and the accent is Band-Aid Blue, #0072CE. 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 Band-Aid's colors consistently when it generates UI.
Make something in the spirit of Band-Aid
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.