L'Oréal color palette
FashionL'Oréal's color identity is defined by a refined, timeless black and gold palette, reflecting luxury and sophistication. The brand uses deep neutrals and gold accents to convey elegance across its digital and physical touchpoints.
loreal.comL'Oréal colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- L'Oréal BlackPrimary35, 31, 32
- L'Oréal GoldSecondary187, 164, 106
- L'Oréal WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- L'Oréal Light GrayBackground245, 245, 245
- L'Oréal Pale GraySurface229, 229, 229
- L'Oréal Soft BorderBorder209, 207, 207
Text
Three tiers of copy.- L'Oréal BlackText35, 31, 32
- L'Oréal Medium GraySecondary text109, 106, 107
- L'Oréal Muted GrayMuted text160, 159, 159
Semantic
Feedback and state colors.- L'Oréal Success GreenSuccess125, 186, 58
- L'Oréal Warning GoldWarning255, 215, 0
- L'Oréal Error RedError215, 38, 61
- L'Oréal Info BlueInfo58, 110, 165
Use L'Oréal's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
loreal-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A6EA5;
--error: #D7263D;
--accent: #FFFFFF;
--border: #D1CFCF;
--primary: #231F20;
--success: #7DBA3A;
--surface: #E5E5E5;
--warning: #FFD700;
--secondary: #BBA46A;
--text-muted: #A09F9F;
--background: #F5F5F5;
--text-primary: #231F20;
--text-secondary: #6D6A6B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.0:1
Pass
Text on surface
Needs 4.5:1 for body text
12.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
L'Oréal gray and neutral colors
The quiet part of the L'Oréal palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- L'Oréal Light GrayBackground
- HEX
- RGB
- HSL
- L'Oréal Pale GraySurface
- HEX
- RGB
- HSL
- L'Oréal Soft BorderBorder
- HEX
- RGB
- HSL
- L'Oréal BlackText
- HEX
- RGB
- HSL
- L'Oréal Medium GraySecondary text
- HEX
- RGB
- HSL
- L'Oréal Muted GrayMuted text
- HEX
- RGB
- HSL
About L'Oréal's colors
L'Oréal's palette is anchored in black and gold, symbolizing luxury and timelessness. The supporting neutrals and accent colors ensure clarity and accessibility across all brand materials.
Primary black pairs with gold for high-contrast elegance.
Neutrals support content legibility and visual hierarchy.
Accent white and gold highlight key elements and calls to action.
Psychology
Black conveys sophistication, authority, and exclusivity, while gold evokes prestige and quality. The neutral tones create a sense of approachability and balance the luxurious feel.
Evolution
L'Oréal's color palette has remained largely consistent, with black and gold as enduring core colors. Minor adjustments to neutral tones have been made for digital clarity and accessibility.
Where L'Oréal uses each color
- Primary
L'Oréal Black is used for the logo, navigation bars, and primary headings.
- Secondary
L'Oréal Gold appears in accents, highlights, and premium packaging details.
- Accent
L'Oréal White is used for backgrounds, text, and to provide contrast in layouts.
- Backgrounds
L'Oréal Light Gray and Pale Gray are used for website backgrounds and content sections.
- Text
L'Oréal Black and Medium Gray are used for primary and secondary text respectively.
- Semantic
Success Green, Warning Gold, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
L'Oréal color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official L'Oréal brand color is black, with the hex code #231F20. This color is used for the logo and primary brand elements.
L'Oréal Black (#231F20) has an RGB value of (35, 31, 32) and a CMYK value of (0, 11, 9, 86). These values are used in both digital and print applications.
L'Oréal uses a range of neutrals including Light Gray (#F5F5F5), Pale Gray (#E5E5E5), and Medium Gray (#6D6A6B) for backgrounds, surfaces, and text. These tones support the brand's elegant and accessible UI.
Use L'Oréal Black (#231F20) for logos and headings, Gold (#BBA46A) for accents, and neutrals for backgrounds and surfaces. Semantic colors are reserved for alerts and status messages to maintain brand consistency.
The secondary color is L'Oréal Gold, #BBA46A, and the accent is L'Oréal White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
3 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 L'Oréal's colors consistently when it generates UI.
Make something in the spirit of L'Oréal
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.