Glossier color palette
FashionGlossier's brand color identity is defined by its signature soft pink, complemented by a minimalist palette of whites, grays, and subtle accents. The color system emphasizes a clean, modern, and approachable aesthetic consistent across digital and physical touchpoints.
glossier.comGlossier colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Glossier PinkPrimary255, 238, 240
- Glossier WhiteSecondary255, 255, 255
- Glossier Light GrayAccent229, 229, 229
Surfaces
Page, cards and dividers.- Glossier Soft BackgroundBackground248, 248, 248
- Glossier SurfaceSurface244, 244, 244
- Glossier Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Glossier CharcoalText34, 34, 34
- Glossier Medium GraySecondary text117, 117, 117
- Glossier Muted GrayMuted text179, 179, 179
Semantic
Feedback and state colors.- Glossier MintSuccess96, 191, 166
- Glossier PeachWarning255, 217, 179
- Glossier CoralError255, 111, 97
- Glossier BlueInfo163, 199, 230
Use Glossier's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
glossier-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #A3C7E6;
--error: #FF6F61;
--accent: #E5E5E5;
--border: #D1D1D1;
--primary: #FFEEF0;
--success: #60BFA6;
--surface: #F4F4F4;
--warning: #FFD9B3;
--secondary: #FFFFFF;
--text-muted: #B3B3B3;
--background: #F8F8F8;
--text-primary: #222222;
--text-secondary: #757575;
}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
14.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.3:1
Fail
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.0:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Glossier gray and neutral colors
The quiet part of the Glossier palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Glossier Soft BackgroundBackground
- HEX
- RGB
- HSL
- Glossier SurfaceSurface
- HEX
- RGB
- HSL
- Glossier Border GrayBorder
- HEX
- RGB
- HSL
- Glossier CharcoalText
- HEX
- RGB
- HSL
- Glossier Medium GraySecondary text
- HEX
- RGB
- HSL
- Glossier Muted GrayMuted text
- HEX
- RGB
- HSL
About Glossier's colors
Glossier's palette is built around a signature blush pink, supported by soft neutrals and minimal accent colors. This creates a sense of warmth, approachability, and modernity.
Primary pink contrasts with deep charcoal for legibility.
Neutrals unify backgrounds and surfaces.
Accent colors are used sparingly for feedback and highlights.
Psychology
The blush pink evokes softness, femininity, and approachability, aligning with Glossier's inclusive brand ethos. The restrained use of color supports a clean, trustworthy, and modern feel.
Evolution
Since its launch, Glossier has maintained a consistent color palette centered on its signature pink and clean neutrals. Minor adjustments have been made to gray tones and accent colors for improved accessibility and digital clarity.
Where Glossier uses each color
- Primary
Glossier Pink is used for key brand elements, packaging, and highlights across the website.
- Secondary
Glossier White is the main background for product pages and navigation.
- Accent
Glossier Light Gray appears in UI elements such as input fields and dividers.
- Backgrounds
Glossier Soft Background is used for page backgrounds and overlays.
- Text
Glossier Charcoal and Medium Gray are used for primary and secondary text, ensuring readability.
- Semantic
Mint, Peach, Coral, and Blue are used for status indicators, alerts, and informational messages.
Glossier color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Glossier brand color is Glossier Pink, with the hex code #FFEEF0.
Glossier Pink (#FFEEF0) in RGB is (255, 238, 240). For CMYK, it is approximately (0, 7, 6, 0).
Glossier uses several grays: Light Gray (#E5E5E5), Border Gray (#D1D1D1), Medium Gray (#757575), and Muted Gray (#B3B3B3) for UI and text elements.
Use Glossier Pink (#FFEEF0) for brand highlights and packaging, with white and soft neutrals as backgrounds. Grays and accent colors are reserved for UI, text, and semantic feedback.
The secondary color is Glossier White, #FFFFFF, and the accent is Glossier Light Gray, #E5E5E5. Together with the primary they make up the three brand colors at the top of this page.
2 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 Glossier's colors consistently when it generates UI.
Make something in the spirit of Glossier
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.