Depop color palette
EcommerceDepop's color identity is defined by its bold, signature red paired with strong black and white neutrals, reflecting its energetic and youth-driven ecommerce platform. The palette is minimal, focusing on high contrast for clarity and brand recognition.
depop.comDepop colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Depop RedPrimary255, 34, 0
- Depop BlackSecondary0, 0, 0
- Depop WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Depop WhiteBackground255, 255, 255
- Depop Light GraySurface245, 245, 245
- Depop Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Depop BlackText0, 0, 0
- Depop Dark GraySecondary text102, 102, 102
- Depop Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Depop GreenSuccess0, 200, 83
- Depop AmberWarning255, 171, 0
- Depop Error RedError213, 0, 0
- Depop BlueInfo41, 98, 255
Use Depop's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
depop-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2962FF;
--error: #D50000;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #FF2200;
--success: #00C853;
--surface: #F5F5F5;
--warning: #FFAB00;
--secondary: #000000;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #000000;
--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
21.0:1
Pass
Text on surface
Needs 4.5:1 for body text
19.3: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.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Depop gray and neutral colors
The quiet part of the Depop palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Depop WhiteBackground
- HEX
- RGB
- HSL
- Depop Light GraySurface
- HEX
- RGB
- HSL
- Depop Border GrayBorder
- HEX
- RGB
- HSL
- Depop BlackText
- HEX
- RGB
- HSL
- Depop Dark GraySecondary text
- HEX
- RGB
- HSL
- Depop Muted GrayMuted text
- HEX
- RGB
- HSL
About Depop's colors
Depop’s palette is built around a vivid red, contrasted with black and white for maximum impact and readability. The minimal use of color supports a clean, modern, and energetic brand presence.
Primary red dominates calls to action and branding.
Black and white create strong contrast for UI clarity.
Accent colors are used sparingly for status and feedback.
Psychology
Red evokes excitement, urgency, and youthfulness, aligning with Depop’s target audience. The black and white neutrals ground the palette, giving it a contemporary and accessible feel.
Evolution
Depop’s color palette has remained consistent since its early years, with the signature red always at the forefront. Minor adjustments have been made to gray tones for improved accessibility and UI clarity.
Where Depop uses each color
- Primary
Depop Red is used for the logo, primary buttons, and key highlights throughout the app and website.
- Secondary
Depop Black appears in navigation bars, text, and backgrounds for high contrast.
- Accent
Depop White is used for backgrounds, cards, and negative space to balance the bold red.
- Backgrounds
Backgrounds are primarily white, with light gray used for subtle separation of UI elements.
- Text
Text is mostly black for primary content, with dark and muted grays for secondary and disabled text.
- Semantic
Green, amber, and blue are used for success, warning, and informational states respectively, while error red signals problems.
Depop color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Depop brand color is #FF2200, known as Depop Red. This is used for the logo and primary actions.
Depop Red (#FF2200) in RGB is (255, 34, 0). For CMYK, it is approximately (0, 87, 100, 0).
Depop uses #F5F5F5 for light gray surfaces, #E0E0E0 for borders, #666666 for secondary text, and #A3A3A3 for muted text. These grays support clarity and accessibility in the UI.
Depop Red (#FF2200) should be reserved for primary actions and branding, while black and white dominate backgrounds and text. Accent and semantic colors are used sparingly for feedback and status indications.
The secondary color is Depop Black, #000000, and the accent is Depop White, #FFFFFF. 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 Depop's colors consistently when it generates UI.
Make something in the spirit of Depop
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.