DoorDash color palette
EcommerceDoorDash's color identity centers on a bold, energetic red paired with clean neutrals and clear semantic colors for accessibility and brand recognition. The palette is designed for high visibility and intuitive UI across web and mobile platforms.
doordash.comDoorDash colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- DoorDash RedPrimary255, 48, 8
- DoorDash WhiteSecondary255, 255, 255
- Dash Light GrayAccent246, 246, 246
Surfaces
Page, cards and dividers.- DoorDash WhiteBackground255, 255, 255
- Dash Light GraySurface246, 246, 246
- Dash Border GrayBorder226, 226, 226
Text
Three tiers of copy.- Dash BlackText25, 25, 25
- Dash Medium GraySecondary text118, 118, 118
- Dash Muted GrayMuted text183, 183, 183
Semantic
Feedback and state colors.- Dash GreenSuccess0, 193, 103
- Dash OrangeWarning255, 176, 32
- DoorDash RedError255, 48, 8
- Dash BlueInfo36, 118, 255
Use DoorDash's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
doordash-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2476FF;
--error: #FF3008;
--accent: #F6F6F6;
--border: #E2E2E2;
--primary: #FF3008;
--success: #00C167;
--surface: #F6F6F6;
--warning: #FFB020;
--secondary: #FFFFFF;
--text-muted: #B7B7B7;
--background: #FFFFFF;
--text-primary: #191919;
--text-secondary: #767676;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.6:1
Pass
Text on surface
Needs 4.5:1 for body text
16.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
2.0:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
DoorDash gray and neutral colors
The quiet part of the DoorDash palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- DoorDash WhiteBackground
- HEX
- RGB
- HSL
- Dash Light GraySurface
- HEX
- RGB
- HSL
- Dash Border GrayBorder
- HEX
- RGB
- HSL
- Dash BlackText
- HEX
- RGB
- HSL
- Dash Medium GraySecondary text
- HEX
- RGB
- HSL
- Dash Muted GrayMuted text
- HEX
- RGB
- HSL
About DoorDash's colors
DoorDash's palette is anchored by a vibrant red, conveying urgency and appetite, balanced by neutral whites and grays for clarity and readability. Semantic colors are used for accessibility and clear communication in UI states.
Primary red is complemented by neutral backgrounds and surfaces.
Semantic colors (green, orange, blue) are reserved for status and feedback.
Text colors provide strong contrast for accessibility.
Psychology
The bold red evokes energy, appetite, and action, encouraging engagement. Neutrals and semantic colors support clarity and trust in the user experience.
Evolution
DoorDash's palette has remained consistent since its major rebrand in 2019, focusing on the signature red. Minor adjustments to neutral and semantic tones have improved accessibility and digital legibility.
Where DoorDash uses each color
- Primary
Used for main action buttons, highlights, and the DoorDash logo.
- Secondary
Used for backgrounds, cards, and negative space throughout the app and website.
- Accent
Applied to UI surfaces, input fields, and subtle background areas.
- Backgrounds
White is the default background for most screens and content areas.
- Text
Dash Black is used for primary text, with medium and muted grays for secondary and disabled text.
- Semantic
Green, orange, and blue are used for success, warning, and informational states respectively, while red also serves as the error color.
DoorDash color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official DoorDash primary color is #FF3008. This vibrant red is used for branding and key actions.
DoorDash Red (#FF3008) in RGB is (255, 48, 8) and in CMYK is (0, 81, 97, 0). Use these values for print and digital consistency.
DoorDash uses Dash Light Gray (#F6F6F6), Dash Border Gray (#E2E2E2), Dash Medium Gray (#767676), and Dash Muted Gray (#B7B7B7) for backgrounds, borders, and text. These neutrals ensure clarity and accessibility.
Use DoorDash Red (#FF3008) for primary actions and highlights, with neutrals for backgrounds and surfaces. Semantic colors are reserved for status messages and feedback.
The secondary color is DoorDash White, #FFFFFF, and the accent is Dash Light Gray, #F6F6F6. Together with the primary they make up the three brand colors at the top of this page.
3 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 DoorDash's colors consistently when it generates UI.
Make something in the spirit of DoorDash
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
