Saint Laurent color palette
FashionSaint Laurent's color identity is defined by a minimalist, high-contrast palette centered on black and white, reflecting the brand's luxury and modernist heritage. The color system is stark, with subtle grays and gold accents used sparingly for emphasis.
ysl.comSaint Laurent colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Saint Laurent BlackPrimary0, 0, 0
- Saint Laurent WhiteSecondary255, 255, 255
- Saint Laurent GoldAccent193, 161, 98
Surfaces
Page, cards and dividers.- Saint Laurent Deep BlackBackground17, 17, 17
- Saint Laurent CharcoalSurface26, 26, 26
- Saint Laurent GraphiteBorder44, 44, 44
Text
Three tiers of copy.- Saint Laurent White TextText255, 255, 255
- Saint Laurent Silver GraySecondary text179, 179, 179
- Saint Laurent Muted GrayMuted text125, 125, 125
Semantic
Feedback and state colors.- Saint Laurent Gold SuccessSuccess193, 161, 98
- Saint Laurent Gold WarningWarning193, 161, 98
- Saint Laurent RedError208, 2, 27
- Saint Laurent Silver InfoInfo179, 179, 179
Use Saint Laurent's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
saint-laurent-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #B3B3B3;
--error: #D0021B;
--accent: #C1A162;
--border: #2C2C2C;
--primary: #000000;
--success: #C1A162;
--surface: #1A1A1A;
--warning: #C1A162;
--secondary: #FFFFFF;
--text-muted: #7D7D7D;
--background: #111111;
--text-primary: #FFFFFF;
--text-secondary: #B3B3B3;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.9:1
Pass
Text on surface
Needs 4.5:1 for body text
17.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.3:1
Pass
Muted text on background
Needs 3:1 for large text
4.6:1
Pass
Muted text on surface
Needs 3:1 for large text
4.2:1
Pass
Saint Laurent gray, dark and neutral colors
Saint Laurent runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Saint Laurent Deep BlackBackground
- HEX
- RGB
- HSL
- Saint Laurent CharcoalSurface
- HEX
- RGB
- HSL
- Saint Laurent GraphiteBorder
- HEX
- RGB
- HSL
- Saint Laurent White TextText
- HEX
- RGB
- HSL
- Saint Laurent Silver GraySecondary text
- HEX
- RGB
- HSL
- Saint Laurent Muted GrayMuted text
- HEX
- RGB
- HSL
About Saint Laurent's colors
Saint Laurent employs a monochromatic palette dominated by black and white, with gold used as a refined accent. This approach underscores the brand's timeless, sophisticated image.
Black and white provide high contrast for clarity and luxury.
Gold is reserved for accents, logos, and special highlights.
Grays are used for subtle UI elements and secondary text.
Psychology
Black conveys elegance, authority, and exclusivity, while white adds balance and clarity. Gold accents evoke a sense of prestige and luxury.
Evolution
Saint Laurent's palette has remained consistent, focusing on black and white since its rebranding in 2012. The use of gold as an accent has become more prominent in digital and packaging applications.
Where Saint Laurent uses each color
- Primary
Saint Laurent Black is used for navigation bars, backgrounds, and primary brand marks.
- Secondary
Saint Laurent White is used for text, backgrounds, and negative space.
- Accent
Saint Laurent Gold appears in logo details, buttons, and packaging highlights.
- Backgrounds
Deep Black is the main website and campaign background.
- Text
White and Silver Gray are used for primary and secondary text across digital and print.
- Semantic
Gold is used for success and warning states; Red is reserved for error messaging.
Saint Laurent color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Saint Laurent brand color is black, with the hex code #000000.
Saint Laurent Black (#000000) is RGB(0,0,0) and CMYK(0,0,0,100).
Saint Laurent uses a range of dark neutrals including Deep Black (#111111), Charcoal (#1A1A1A), and Graphite (#2C2C2C) for backgrounds and UI elements.
Use black (#000000) and white (#FFFFFF) as the dominant colors, with gold (#C1A162) reserved for accents and highlights. Grays are for secondary text and UI surfaces.
The secondary color is Saint Laurent White, #FFFFFF, and the accent is Saint Laurent Gold, #C1A162. 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 Saint Laurent's colors consistently when it generates UI.
Make something in the spirit of Saint Laurent
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.