Net-a-Porter color palette
EcommerceNet-a-Porter is known for its minimalist, luxury-focused color identity, relying on a classic black-and-white palette with subtle gray tones. The brand's visual system emphasizes elegance and simplicity, reflecting its high-end fashion positioning.
net-a-porter.comNet-a-Porter colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Net-a-Porter BlackPrimary0, 0, 0
- Net-a-Porter WhiteSecondary255, 255, 255
- Net-a-Porter Light GrayAccent199, 199, 199
Surfaces
Page, cards and dividers.- Net-a-Porter WhiteBackground255, 255, 255
- Net-a-Porter Off WhiteSurface245, 245, 245
- Net-a-Porter Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Net-a-Porter BlackText0, 0, 0
- Net-a-Porter Dark GraySecondary text102, 102, 102
- Net-a-Porter Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Net-a-Porter Success GreenSuccess0, 128, 96
- Net-a-Porter Warning GoldWarning255, 215, 0
- Net-a-Porter Error RedError208, 2, 27
- Net-a-Porter Info BlueInfo0, 124, 166
Use Net-a-Porter's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
net-a-porter-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #007CA6;
--error: #D0021B;
--accent: #C7C7C7;
--border: #E5E5E5;
--primary: #000000;
--success: #008060;
--surface: #F5F5F5;
--warning: #FFD700;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #FFFFFF;
--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
21.0:1
Pass
Text on surface
Needs 4.5:1 for body text
19.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Net-a-Porter gray and neutral colors
The quiet part of the Net-a-Porter palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Net-a-Porter WhiteBackground
- HEX
- RGB
- HSL
- Net-a-Porter Off WhiteSurface
- HEX
- RGB
- HSL
- Net-a-Porter Border GrayBorder
- HEX
- RGB
- HSL
- Net-a-Porter BlackText
- HEX
- RGB
- HSL
- Net-a-Porter Dark GraySecondary text
- HEX
- RGB
- HSL
- Net-a-Porter Muted GrayMuted text
- HEX
- RGB
- HSL
About Net-a-Porter's colors
Net-a-Porter's palette is rooted in monochrome minimalism, using black, white, and refined grays to convey luxury and clarity. The restrained use of accent colors supports a timeless, editorial feel.
Primary black contrasts with white backgrounds for clarity.
Grays provide subtle separation and hierarchy.
Accent colors are reserved for status and feedback messaging.
Psychology
Black and white evoke sophistication, exclusivity, and trust. The palette's restraint signals a premium, curated experience.
Evolution
Net-a-Porter's color palette has remained largely unchanged since its inception, maintaining a consistent black-and-white identity. Minor adjustments to gray tones have been made for digital accessibility and UI clarity.
Where Net-a-Porter uses each color
- Primary
Used for the logo, primary navigation, and main text.
- Secondary
Backgrounds, whitespace, and product imagery frames.
- Accent
Dividers, subtle UI elements, and hover states.
- Backgrounds
Main site and app backgrounds are white or off-white.
- Text
Primary text is black; secondary and muted text use dark and muted grays.
- Semantic
Success, warning, error, and info colors are used for notifications, alerts, and system messages.
Net-a-Porter color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Net-a-Porter brand color is black, with the hex code #000000.
Net-a-Porter Black is RGB(0, 0, 0) and CMYK(0, 0, 0, 100). The hex code is #000000.
Net-a-Porter uses several neutral grays: #C7C7C7 (Light Gray), #666666 (Dark Gray), and #999999 (Muted Gray) for UI elements and text.
Use black (#000000) for primary branding and text, white (#FFFFFF) for backgrounds, and grays for secondary text and UI elements. Accent and semantic colors are reserved for feedback and notifications.
The secondary color is Net-a-Porter White, #FFFFFF, and the accent is Net-a-Porter Light Gray, #C7C7C7. 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 Net-a-Porter's colors consistently when it generates UI.
Make something in the spirit of Net-a-Porter
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.