Temu color palette
EcommerceTemu's brand identity centers on a vibrant orange primary color, paired with a clean white background and neutral gray tones for UI clarity. The palette is designed for high visibility and a friendly, approachable ecommerce experience.
temu.comTemu colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Temu OrangePrimary255, 72, 0
- Temu Light OrangeSecondary255, 179, 128
- Temu Accent PeachAccent255, 215, 179
Surfaces
Page, cards and dividers.- Temu WhiteBackground255, 255, 255
- Temu Light GraySurface245, 245, 245
- Temu Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Temu CharcoalText34, 34, 34
- Temu Medium GraySecondary text102, 102, 102
- Temu Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Temu GreenSuccess0, 178, 106
- Temu Warning YellowWarning255, 179, 0
- Temu Error RedError255, 59, 48
- Temu Info BlueInfo24, 144, 255
Use Temu's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
temu-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1890FF;
--error: #FF3B30;
--accent: #FFD7B3;
--border: #E0E0E0;
--primary: #FF4800;
--success: #00B26A;
--surface: #F5F5F5;
--warning: #FFB300;
--secondary: #FFB380;
--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
Temu gray and neutral colors
The quiet part of the Temu palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Temu WhiteBackground
- HEX
- RGB
- HSL
- Temu Light GraySurface
- HEX
- RGB
- HSL
- Temu Border GrayBorder
- HEX
- RGB
- HSL
- Temu CharcoalText
- HEX
- RGB
- HSL
- Temu Medium GraySecondary text
- HEX
- RGB
- HSL
- Temu Muted GrayMuted text
- HEX
- RGB
- HSL
About Temu's colors
Temu's palette is built around a bold, energetic orange, contrasted by neutral grays and white for clarity and accessibility. The supporting colors provide clear semantic cues for actions and statuses.
Primary orange is complemented by lighter orange and peach accents.
Neutral grays support readability and UI structure.
Semantic colors (green, yellow, red, blue) are reserved for status and feedback.
Psychology
The orange evokes warmth, affordability, and excitement, appealing to bargain-focused shoppers. Neutral tones keep the interface clean and trustworthy.
Evolution
Temu's color palette has remained consistent since launch, maintaining its signature orange for brand recognition. Minor adjustments to gray tones have improved accessibility and contrast.
Where Temu uses each color
- Primary
Temu Orange is used for main CTAs, highlights, and the logo.
- Secondary
Temu Light Orange appears in hover states, badges, and secondary buttons.
- Accent
Temu Accent Peach is used for subtle backgrounds and UI highlights.
- Backgrounds
Temu White and Light Gray are used for page backgrounds and cards.
- Text
Temu Charcoal and Medium Gray are used for primary and secondary text respectively.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and informational messages.
Temu color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Temu brand color is Temu Orange, hex code #FF4800. This is used in the logo and primary buttons.
Temu Orange (#FF4800) in RGB is (255, 72, 0). In CMYK, it is approximately (0, 72, 100, 0).
Temu uses several neutral grays: Temu Light Gray (#F5F5F5), Temu Border Gray (#E0E0E0), Temu Charcoal (#222222), and Temu Medium Gray (#666666). These provide structure and readability across the site.
Primary orange (#FF4800) is reserved for main actions and branding, while grays and whites form the UI foundation. Semantic colors are used only for status indicators and feedback.
The secondary color is Temu Light Orange, #FFB380, and the accent is Temu Accent Peach, #FFD7B3. 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 Temu's colors consistently when it generates UI.
Make something in the spirit of Temu
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
