Shopee color palette
EcommerceShopee's color identity is defined by its vibrant orange, supported by clean neutrals and functional accent colors for ecommerce clarity. The palette is consistent across digital and offline touchpoints.
shopee.comShopee colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Shopee OrangePrimary238, 77, 45
- Shopee Light OrangeSecondary255, 119, 66
- Shopee PeachAccent255, 191, 160
Surfaces
Page, cards and dividers.- Shopee WhiteBackground255, 255, 255
- Shopee Light GraySurface245, 245, 245
- Shopee Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Shopee CharcoalText34, 34, 34
- Shopee Medium GraySecondary text102, 102, 102
- Shopee Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Shopee GreenSuccess33, 178, 107
- Shopee YellowWarning255, 179, 0
- Shopee RedError226, 40, 40
- Shopee BlueInfo51, 153, 255
Use Shopee's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
shopee-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3399FF;
--error: #E22828;
--accent: #FFBFA0;
--border: #E5E5E5;
--primary: #EE4D2D;
--success: #21B26B;
--surface: #F5F5F5;
--warning: #FFB300;
--secondary: #FF7742;
--text-muted: #999999;
--background: #FFFFFF;
--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.9: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.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
Shopee gray and neutral colors
The quiet part of the Shopee palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Shopee WhiteBackground
- HEX
- RGB
- HSL
- Shopee Light GraySurface
- HEX
- RGB
- HSL
- Shopee Border GrayBorder
- HEX
- RGB
- HSL
- Shopee CharcoalText
- HEX
- RGB
- HSL
- Shopee Medium GraySecondary text
- HEX
- RGB
- HSL
- Shopee Muted GrayMuted text
- HEX
- RGB
- HSL
About Shopee's colors
Shopee's palette uses a dominant orange to convey energy and approachability, balanced by neutral grays and functional semantic colors. The system ensures clarity and accessibility across ecommerce interfaces.
Primary orange is complemented by lighter orange and peach for depth.
Neutral grays provide structure and legibility.
Semantic colors (green, yellow, red, blue) indicate status and feedback.
Psychology
Orange evokes friendliness, enthusiasm, and a sense of urgency, ideal for driving ecommerce engagement. The supporting neutrals and semantic colors ensure trust and usability.
Evolution
Shopee's palette has remained stable since its inception, with orange as the core brand color. Minor adjustments to gray tones and semantic colors have improved digital accessibility.
Where Shopee uses each color
- Primary
Shopee Orange is used for the logo, primary buttons, and promotional banners.
- Secondary
Shopee Light Orange highlights secondary buttons and hover states.
- Accent
Shopee Peach appears in backgrounds, badges, and subtle UI highlights.
- Backgrounds
Shopee White and Shopee Light Gray are used for main app and website backgrounds.
- Text
Shopee Charcoal is the default for headings and body text, with Medium Gray and Muted Gray for secondary and disabled text.
- Semantic
Shopee Green, Yellow, Red, and Blue are used for success, warning, error, and informational messages or icons.
Shopee color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Shopee primary color hex code is #EE4D2D. This orange is used for the logo and main action elements.
Shopee Orange (#EE4D2D) in RGB is (238, 77, 45). For CMYK, it is approximately (0, 68, 81, 7).
Shopee uses Shopee Light Gray (#F5F5F5), Shopee Border Gray (#E5E5E5), Shopee Charcoal (#222222), Shopee Medium Gray (#666666), and Shopee Muted Gray (#999999) for backgrounds, borders, and text. These ensure readability and a clean UI.
Use Shopee Orange (#EE4D2D) for primary actions and branding, with supporting colors for structure and status. Always maintain sufficient contrast and follow Shopee's UI guidelines for accessibility.
The secondary color is Shopee Light Orange, #FF7742, and the accent is Shopee Peach, #FFBFA0. 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 Shopee's colors consistently when it generates UI.
Make something in the spirit of Shopee
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.