Didi color palette
TravelDidi's brand color system is centered around a distinctive orange, reflecting energy and accessibility in the travel and mobility sector. The palette is supported by clean neutrals and dark tones for clarity and usability across digital and physical touchpoints.
didiglobal.comDidi colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Didi OrangePrimary255, 136, 0
- Didi WhiteSecondary255, 255, 255
- Didi YellowAccent255, 179, 0
Surfaces
Page, cards and dividers.- Didi Light GrayBackground247, 247, 247
- Didi Surface GraySurface250, 250, 250
- Didi Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Didi BlackText34, 34, 34
- Didi Medium GraySecondary text102, 102, 102
- Didi Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Didi GreenSuccess0, 196, 143
- Didi YellowWarning255, 179, 0
- Didi RedError255, 59, 48
- Didi BlueInfo33, 150, 243
Use Didi's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
didi-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #FF3B30;
--accent: #FFB300;
--border: #E5E5E5;
--primary: #FF8800;
--success: #00C48F;
--surface: #FAFAFA;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F7F7F7;
--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
14.9:1
Pass
Text on surface
Needs 4.5:1 for body text
15.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.5: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.7:1
Fail
Didi gray and neutral colors
The quiet part of the Didi palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Didi Light GrayBackground
- HEX
- RGB
- HSL
- Didi Surface GraySurface
- HEX
- RGB
- HSL
- Didi Border GrayBorder
- HEX
- RGB
- HSL
- Didi BlackText
- HEX
- RGB
- HSL
- Didi Medium GraySecondary text
- HEX
- RGB
- HSL
- Didi Muted GrayMuted text
- HEX
- RGB
- HSL
About Didi's colors
Didi's color palette is built around a vibrant orange, paired with whites and grays for clarity and approachability. The palette ensures high visibility and a friendly, modern interface.
Primary orange is complemented by neutral backgrounds.
Accent yellow is used for highlights and warnings.
Dark text contrasts with light surfaces for readability.
Psychology
Orange conveys warmth, energy, and friendliness, aligning with Didi's brand values of accessibility and movement. The use of clean neutrals supports a trustworthy and professional image.
Evolution
Didi's palette has remained consistent, with orange as the core brand color since its inception. Minor adjustments have been made to neutral tones for improved digital legibility.
Where Didi uses each color
- Primary
Didi Orange is used for the logo, main call-to-action buttons, and key highlights in the app and website.
- Secondary
Didi White is the primary background for screens and printed materials.
- Accent
Didi Yellow is used for notifications, highlights, and warning states.
- Backgrounds
Didi Light Gray and Surface Gray are used for app backgrounds, cards, and UI surfaces.
- Text
Didi Black and Medium Gray are used for primary and secondary text throughout the interface.
- Semantic
Didi Green, Yellow, Red, and Blue are used for success, warning, error, and informational states respectively.
Didi color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Didi brand color hex code is #FF8800, known as Didi Orange.
Didi Orange (#FF8800) is RGB(255, 136, 0) and CMYK(0, 47, 100, 0).
Didi uses #F7F7F7 (Light Gray), #FAFAFA (Surface Gray), #222222 (Black), #666666 (Medium Gray), and #999999 (Muted Gray) for backgrounds and text.
Use Didi Orange (#FF8800) for primary actions and branding, neutrals for backgrounds and text, and semantic colors for status indicators. Maintain high contrast for accessibility and brand consistency.
The secondary color is Didi White, #FFFFFF, and the accent is Didi Yellow, #FFB300. 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 Didi's colors consistently when it generates UI.
Make something in the spirit of Didi
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.