Lululemon color palette
FashionLululemon's color identity is anchored by its iconic red, complemented by a clean, neutral palette for a modern, athletic look. The brand uses strong contrasts and minimal accents to maintain clarity and focus.
lululemon.comLululemon colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Lululemon RedPrimary231, 29, 50
- Lululemon BlackSecondary0, 0, 0
- Lululemon WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Lululemon Light GrayBackground247, 247, 247
- Lululemon Surface WhiteSurface255, 255, 255
- Lululemon Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Lululemon CharcoalText34, 34, 34
- Lululemon Medium GraySecondary text109, 110, 113
- Lululemon Muted GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- Lululemon Success GreenSuccess0, 128, 96
- Lululemon Warning YellowWarning255, 181, 0
- Lululemon Error RedError231, 29, 50
- Lululemon Info BlueInfo0, 119, 200
Use Lululemon's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
lululemon-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0077C8;
--error: #E71D32;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #E71D32;
--success: #008060;
--surface: #FFFFFF;
--warning: #FFB500;
--secondary: #000000;
--text-muted: #A7A8AA;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #6D6E71;
}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
4.8: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.4:1
Fail
Lululemon gray and neutral colors
The quiet part of the Lululemon palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Lululemon Light GrayBackground
- HEX
- RGB
- HSL
- Lululemon Surface WhiteSurface
- HEX
- RGB
- HSL
- Lululemon Border GrayBorder
- HEX
- RGB
- HSL
- Lululemon CharcoalText
- HEX
- RGB
- HSL
- Lululemon Medium GraySecondary text
- HEX
- RGB
- HSL
- Lululemon Muted GrayMuted text
- HEX
- RGB
- HSL
About Lululemon's colors
Lululemon's palette is built around a vibrant red, balanced by deep blacks and soft grays for a contemporary, high-contrast look. The use of minimal accent colors ensures the brand's identity remains strong and recognizable.
Primary red contrasts with neutral backgrounds.
Black and gray tones provide structure and clarity.
Accent white is used for clean, open space.
Psychology
Red conveys energy, passion, and confidence, aligning with Lululemon's active lifestyle ethos. The neutral tones evoke simplicity, trust, and modernity.
Evolution
Lululemon's core red has remained consistent since the brand's inception, reinforcing its identity. The supporting palette has evolved to include more refined grays and whites for digital clarity.
Where Lululemon uses each color
- Primary
Lululemon Red is used in the logo, key call-to-action buttons, and select promotional materials.
- Secondary
Lululemon Black appears in navigation bars, text, and product labels.
- Accent
Lululemon White is used for backgrounds, overlays, and secondary buttons.
- Backgrounds
Lululemon Light Gray is the main background for web pages and app screens.
- Text
Charcoal and Medium Gray are used for primary and secondary text across digital and print.
- Semantic
Success Green, Warning Yellow, and Error Red are used for notifications and status indicators in the UI.
Lululemon color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Lululemon primary brand color is Lululemon Red, hex code #E71D32.
Lululemon Red (#E71D32) has an RGB value of 231, 29, 50 and a CMYK value of 0, 87, 78, 9.
Lululemon uses several grays, including Light Gray (#F7F7F7), Border Gray (#E0E0E0), and Charcoal (#222222) for backgrounds, borders, and text.
Use Lululemon Red (#E71D32) for key branding and actions, with black, white, and gray tones for structure and readability. Semantic colors like Success Green (#008060) and Info Blue (#0077C8) are reserved for status and notifications.
The secondary color is Lululemon Black, #000000, and the accent is Lululemon White, #FFFFFF. 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 Lululemon's colors consistently when it generates UI.
Make something in the spirit of Lululemon
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.