Alibaba color palette
EcommerceAlibaba's color identity is defined by its distinctive orange, used consistently across its digital and physical touchpoints. The palette is complemented by neutral grays and white for clarity and accessibility.
alibaba.comAlibaba colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Alibaba OrangePrimary255, 106, 0
- Alibaba CharcoalSecondary35, 35, 35
- Alibaba Light OrangeAccent255, 179, 102
Surfaces
Page, cards and dividers.- Alibaba WhiteBackground255, 255, 255
- Alibaba Light GraySurface245, 245, 245
- Alibaba Border GrayBorder230, 230, 230
Text
Three tiers of copy.- Alibaba CharcoalText35, 35, 35
- Alibaba Medium GraySecondary text102, 102, 102
- Alibaba Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Alibaba Success GreenSuccess19, 206, 102
- Alibaba Warning YellowWarning255, 184, 0
- Alibaba Error RedError255, 73, 73
- Alibaba Info BlueInfo64, 158, 255
Use Alibaba's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
alibaba-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #409EFF;
--error: #FF4949;
--accent: #FFB366;
--border: #E6E6E6;
--primary: #FF6A00;
--success: #13CE66;
--surface: #F5F5F5;
--warning: #FFB800;
--secondary: #232323;
--text-muted: #999999;
--background: #FFFFFF;
--text-primary: #232323;
--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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
14.4: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
Alibaba gray and neutral colors
The quiet part of the Alibaba palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Alibaba WhiteBackground
- HEX
- RGB
- HSL
- Alibaba Light GraySurface
- HEX
- RGB
- HSL
- Alibaba Border GrayBorder
- HEX
- RGB
- HSL
- Alibaba CharcoalText
- HEX
- RGB
- HSL
- Alibaba Medium GraySecondary text
- HEX
- RGB
- HSL
- Alibaba Muted GrayMuted text
- HEX
- RGB
- HSL
About Alibaba's colors
Alibaba's palette is anchored by a vibrant orange, symbolizing energy and approachability, balanced by neutral grays and white for usability. The color system ensures strong brand recognition and clear UI hierarchy.
Primary orange is paired with deep charcoal for contrast.
Accent light orange is used for highlights and interactive elements.
Neutral grays support readability and structure.
Psychology
Orange conveys warmth, enthusiasm, and friendliness, aligning with Alibaba's accessible marketplace ethos. The supporting neutrals reinforce professionalism and trust.
Evolution
Alibaba's palette has remained stable, with orange as the core identity color since its inception. Minor adjustments to gray tones have improved accessibility and modernized the UI.
Where Alibaba uses each color
- Primary
Alibaba Orange is used for the logo, primary buttons, and key highlights across the website.
- Secondary
Alibaba Charcoal appears in navigation bars, footers, and primary text.
- Accent
Alibaba Light Orange is used for hover states, badges, and secondary highlights.
- Backgrounds
Alibaba White and Light Gray are used for page backgrounds and content areas.
- Text
Charcoal and Medium Gray are used for primary and secondary text, with Muted Gray for placeholders and disabled states.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
Alibaba color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Alibaba brand color is Alibaba Orange, with the hex code #FF6A00.
Alibaba Orange (#FF6A00) is RGB(255, 106, 0) and CMYK(0, 58, 100, 0).
Alibaba uses a range of grays: Alibaba Charcoal (#232323), Medium Gray (#666666), Muted Gray (#999999), and Light Gray (#F5F5F5) for backgrounds and text.
Use Alibaba Orange (#FF6A00) for primary actions and branding, with grays and white for backgrounds and text. Semantic colors are reserved for status and notifications.
The secondary color is Alibaba Charcoal, #232323, and the accent is Alibaba Light Orange, #FFB366. 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 Alibaba's colors consistently when it generates UI.
Make something in the spirit of Alibaba
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
