Sephora color palette
FashionSephora's color identity centers on a bold black and white palette, reflecting its modern, luxurious, and high-contrast brand image. The brand uses black as its primary color, with white and neutral grays for balance and clarity across digital and physical touchpoints.
sephora.comSephora colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Sephora BlackPrimary0, 0, 0
- Sephora WhiteSecondary255, 255, 255
- Sephora RedAccent226, 35, 26
Surfaces
Page, cards and dividers.- Sephora Light GrayBackground246, 246, 246
- Sephora White SurfaceSurface255, 255, 255
- Sephora Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Sephora Black TextText0, 0, 0
- Sephora Medium Gray TextSecondary text102, 102, 102
- Sephora Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Sephora Success GreenSuccess0, 138, 5
- Sephora Warning YellowWarning255, 184, 0
- Sephora Error RedError226, 35, 26
- Sephora Info BlueInfo0, 125, 184
Use Sephora's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
sephora-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #007DB8;
--error: #E2231A;
--accent: #E2231A;
--border: #E0E0E0;
--primary: #000000;
--success: #008A05;
--surface: #FFFFFF;
--warning: #FFB800;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F6F6F6;
--text-primary: #000000;
--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
19.4:1
Pass
Text on surface
Needs 4.5:1 for body text
21.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
Sephora gray and neutral colors
The quiet part of the Sephora palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Sephora Light GrayBackground
- HEX
- RGB
- HSL
- Sephora White SurfaceSurface
- HEX
- RGB
- HSL
- Sephora Border GrayBorder
- HEX
- RGB
- HSL
- Sephora Black TextText
- HEX
- RGB
- HSL
- Sephora Medium Gray TextSecondary text
- HEX
- RGB
- HSL
- Sephora Muted GrayMuted text
- HEX
- RGB
- HSL
About Sephora's colors
Sephora's palette is built on high-contrast black and white, with red as a powerful accent. The use of neutrals supports a clean, editorial look that highlights product imagery.
Black and white create strong contrast and clarity.
Red is used sparingly for calls to action and highlights.
Grays provide depth and hierarchy in the UI.
Psychology
Black conveys sophistication, luxury, and authority, while white adds a sense of clarity and modernity. Red draws attention and signals urgency or action.
Evolution
Sephora's palette has remained consistent, with black and white as core brand colors since its inception. Minor adjustments to gray tones and accent usage have been made for digital accessibility.
Where Sephora uses each color
- Primary
Sephora Black is used for the logo, navigation bars, and primary text.
- Secondary
Sephora White is the main background color for web pages and packaging.
- Accent
Sephora Red highlights buttons, promotional banners, and error states.
- Backgrounds
Sephora Light Gray is used for secondary backgrounds and card surfaces.
- Text
Black and gray tones are used for primary, secondary, and muted text throughout the site.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and informational states in the UI.
Sephora color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Sephora brand color is black, hex code #000000.
Sephora Black is RGB(0, 0, 0) and CMYK(0, 0, 0, 100), corresponding to hex #000000.
Sephora uses a range of grays, including #F6F6F6 for backgrounds, #E0E0E0 for borders, #666666 for secondary text, and #999999 for muted text.
Use black and white as the dominant colors, with red for accents and calls to action. Grays should provide structure and hierarchy, while semantic colors are reserved for status indicators.
The secondary color is Sephora White, #FFFFFF, and the accent is Sephora Red, #E2231A. 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 Sephora's colors consistently when it generates UI.
Make something in the spirit of Sephora
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.