Shein color palette
EcommerceShein's brand color identity is minimalist and monochrome, centered around black and white with subtle gray accents for a modern, fashion-forward look. The palette emphasizes simplicity and clarity, reflecting Shein's focus on accessible, trend-driven ecommerce.
shein.comShein colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Shein BlackPrimary34, 34, 34
- Shein WhiteSecondary255, 255, 255
- Shein CoralAccent255, 90, 95
Surfaces
Page, cards and dividers.- Shein Light GrayBackground250, 250, 250
- Shein Surface GraySurface245, 245, 245
- Shein Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Shein BlackText34, 34, 34
- Shein Medium GraySecondary text102, 102, 102
- Shein Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Shein Success GreenSuccess39, 174, 96
- Shein Warning OrangeWarning242, 153, 74
- Shein Error RedError235, 87, 87
- Shein Info BlueInfo45, 156, 219
Use Shein's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
shein-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2D9CDB;
--error: #EB5757;
--accent: #FF5A5F;
--border: #E5E5E5;
--primary: #222222;
--success: #27AE60;
--surface: #F5F5F5;
--warning: #F2994A;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #FAFAFA;
--text-primary: #222222;
--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
15.2:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.5: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.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Shein gray and neutral colors
The quiet part of the Shein palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Shein Light GrayBackground
- HEX
- RGB
- HSL
- Shein Surface GraySurface
- HEX
- RGB
- HSL
- Shein Border GrayBorder
- HEX
- RGB
- HSL
- Shein BlackText
- HEX
- RGB
- HSL
- Shein Medium GraySecondary text
- HEX
- RGB
- HSL
- Shein Muted GrayMuted text
- HEX
- RGB
- HSL
About Shein's colors
Shein's color palette is built on a foundation of monochrome tones, using black, white, and grays to create a clean, neutral canvas. Occasional accent colors like coral are used sparingly for calls to action or highlights.
Primary black contrasts with white for maximum readability.
Accent coral draws attention to key actions.
Grays provide depth and hierarchy in UI elements.
Psychology
The monochrome scheme communicates simplicity, modernity, and accessibility, aligning with Shein's fast-fashion ethos. The coral accent adds a touch of energy and approachability without overwhelming the neutral base.
Evolution
Shein's palette has remained consistently minimal, with black and white dominating both branding and UI. Only minor adjustments to accent colors and gray tones have occurred as the site design evolved.
Where Shein uses each color
- Primary
Used for logo, primary navigation text, and main headings.
- Secondary
Applied to backgrounds, product cards, and whitespace.
- Accent
Highlights CTAs such as 'Add to Bag' buttons and promotional tags.
- Backgrounds
Light gray and white backgrounds are used throughout product listings and checkout flows.
- Text
Black is used for primary text, with medium and muted grays for secondary and disabled text.
- Semantic
Green, orange, red, and blue are used for success, warning, error, and informational states in notifications and forms.
Shein color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Shein brand color is #222222, known as 'Shein Black'. This is used for the logo and most primary text.
Shein Black (#222222) in RGB is (34, 34, 34). In CMYK, it is approximately (0, 0, 0, 87).
Shein uses several gray tones: #FAFAFA (Light Gray), #F5F5F5 (Surface Gray), #E5E5E5 (Border Gray), #666666 (Medium Gray), and #999999 (Muted Gray). These provide structure and hierarchy in the UI.
Use #222222 for primary text and logos, #FFFFFF and #FAFAFA for backgrounds, and #FF5A5F for accents like buttons. Grays are reserved for borders, surfaces, and secondary text to maintain a clean, modern interface.
The secondary color is Shein White, #FFFFFF, and the accent is Shein Coral, #FF5A5F. 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 Shein's colors consistently when it generates UI.
Make something in the spirit of Shein
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.