Estée Lauder color palette
FashionEstée Lauder's color identity is defined by its signature deep navy blue and elegant gold, reflecting luxury and sophistication. The palette is consistent across packaging, digital, and retail environments.
esteelauder.comEstée Lauder colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Estée Lauder NavyPrimary0, 34, 68
- Estée Lauder GoldSecondary191, 160, 84
- Estée Lauder ChampagneAccent214, 198, 177
Surfaces
Page, cards and dividers.- Estée Lauder WhiteBackground255, 255, 255
- Estée Lauder Light GraySurface245, 245, 245
- Estée Lauder Pale GrayBorder217, 217, 214
Text
Three tiers of copy.- Estée Lauder CharcoalText26, 26, 26
- Estée Lauder Medium GraySecondary text77, 77, 77
- Estée Lauder Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Estée Lauder Success GreenSuccess75, 177, 116
- Estée Lauder Warning GoldWarning226, 185, 59
- Estée Lauder Error RedError217, 79, 79
- Estée Lauder Info BlueInfo58, 111, 161
Use Estée Lauder's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
estee-lauder-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A6FA1;
--error: #D94F4F;
--accent: #D6C6B1;
--border: #D9D9D6;
--primary: #002244;
--success: #4BB174;
--surface: #F5F5F5;
--warning: #E2B93B;
--secondary: #BFA054;
--text-muted: #888888;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4D4D4D;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.8:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.3:1
Pass
Estée Lauder gray and neutral colors
The quiet part of the Estée Lauder palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Estée Lauder WhiteBackground
- HEX
- RGB
- HSL
- Estée Lauder Light GraySurface
- HEX
- RGB
- HSL
- Estée Lauder Pale GrayBorder
- HEX
- RGB
- HSL
- Estée Lauder CharcoalText
- HEX
- RGB
- HSL
- Estée Lauder Medium GraySecondary text
- HEX
- RGB
- HSL
- Estée Lauder Muted GrayMuted text
- HEX
- RGB
- HSL
About Estée Lauder's colors
Estée Lauder's color palette is built around deep blue and gold, symbolizing timeless elegance and trust. The supporting neutrals provide a clean, sophisticated backdrop for product and content focus.
Primary navy and gold are used together for strong brand recognition.
Champagne and pale grays add warmth and softness.
Accent colors are reserved for functional UI states.
Psychology
Navy blue conveys trust, stability, and luxury, while gold evokes prestige and exclusivity. The neutral tones maintain a sense of calm and refinement.
Evolution
The core palette of navy and gold has remained stable for decades, reinforcing brand consistency. Minor adjustments to neutrals and accent colors have modernized the digital experience.
Where Estée Lauder uses each color
- Primary
Used in the logo, navigation bar, and key call-to-action buttons.
- Secondary
Applied to packaging accents, headings, and decorative elements.
- Accent
Appears in product highlights and subtle UI details.
- Backgrounds
White and light gray backgrounds dominate web pages and product displays.
- Text
Charcoal and medium gray are used for primary and secondary text, ensuring readability.
- Semantic
Success, warning, error, and info colors are used for notifications and status indicators.
Estée Lauder color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Estée Lauder brand color is navy blue, hex code #002244.
The primary navy (#002244) is RGB(0, 34, 68) and CMYK(100, 50, 0, 73).
Estée Lauder uses #F5F5F5 for light gray surfaces and #1A1A1A for primary text, supporting a clean and elegant interface.
Navy and gold should dominate brand touchpoints, with neutrals for backgrounds and text, and accent colors reserved for functional or interactive elements.
The secondary color is Estée Lauder Gold, #BFA054, and the accent is Estée Lauder Champagne, #D6C6B1. 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 Estée Lauder's colors consistently when it generates UI.
Make something in the spirit of Estée Lauder
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.