Dr. Martens color palette
FashionDr. Martens' color identity is defined by its bold yellow paired with deep black, reflecting the brand's industrial heritage and rebellious spirit. The palette is minimal, focusing on strong contrasts and utilitarian neutrals.
drmartens.comDr. Martens colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Dr. Martens YellowPrimary255, 216, 0
- Dr. Martens BlackSecondary35, 31, 32
- Dr. Martens WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Dr. Martens Light GreyBackground248, 248, 248
- Dr. Martens Surface GreySurface229, 229, 229
- Dr. Martens Border GreyBorder204, 204, 204
Text
Three tiers of copy.- Dr. Martens BlackText35, 31, 32
- Dr. Martens Mid GreySecondary text109, 110, 113
- Dr. Martens Muted GreyMuted text167, 168, 170
Semantic
Feedback and state colors.- Dr. Martens GreenSuccess109, 190, 69
- Dr. Martens YellowWarning255, 216, 0
- Dr. Martens RedError208, 2, 27
- Dr. Martens BlueInfo0, 87, 184
Use Dr. Martens's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
dr-martens-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0057B8;
--error: #D0021B;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #FFD800;
--success: #6DBE45;
--surface: #E5E5E5;
--warning: #FFD800;
--secondary: #231F20;
--text-muted: #A7A8AA;
--background: #F8F8F8;
--text-primary: #231F20;
--text-secondary: #6D6E71;
}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.3:1
Pass
Text on surface
Needs 4.5:1 for body text
12.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.0:1
Fail
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Dr. Martens gray and neutral colors
The quiet part of the Dr. Martens palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Dr. Martens Light GreyBackground
- HEX
- RGB
- HSL
- Dr. Martens Surface GreySurface
- HEX
- RGB
- HSL
- Dr. Martens Border GreyBorder
- HEX
- RGB
- HSL
- Dr. Martens BlackText
- HEX
- RGB
- HSL
- Dr. Martens Mid GreySecondary text
- HEX
- RGB
- HSL
- Dr. Martens Muted GreyMuted text
- HEX
- RGB
- HSL
About Dr. Martens's colors
Dr. Martens uses a high-contrast palette of yellow and black, accented by clean whites and industrial greys. This creates a bold, utilitarian look that is instantly recognizable.
Primary yellow contrasts with deep black for maximum visibility.
Neutral greys support clear hierarchy and legibility.
Accent white provides clarity and space in layouts.
Psychology
The yellow evokes energy, optimism, and attention, while black communicates strength and durability. The overall palette signals reliability with a rebellious edge.
Evolution
Dr. Martens' color palette has remained consistent, with yellow and black as core elements since its inception. The use of greys and white has increased in digital applications to enhance usability.
Where Dr. Martens uses each color
- Primary
Dr. Martens Yellow is used in the logo, key calls to action, and product details.
- Secondary
Dr. Martens Black appears in navigation bars, footers, and text.
- Accent
Dr. Martens White is used for backgrounds and negative space.
- Backgrounds
Light and surface greys are used for page backgrounds and UI surfaces.
- Text
Black is primary for headlines and body text, with mid and muted greys for secondary and disabled text.
- Semantic
Green, yellow, red, and blue are used for status indicators and alerts in digital interfaces.
Dr. Martens color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Dr. Martens brand yellow is #FFD800. This color is central to the brand's visual identity.
Dr. Martens Yellow (#FFD800) in RGB is 255, 216, 0. In CMYK, it is 0, 15, 100, 0.
Dr. Martens uses a range of greys: Light Grey (#F8F8F8), Surface Grey (#E5E5E5), Border Grey (#CCCCCC), Mid Grey (#6D6E71), and Muted Grey (#A7A8AA). These support the brand's utilitarian aesthetic.
Use Dr. Martens Yellow (#FFD800) for highlights and key actions, Black (#231F20) for text and backgrounds, and greys for UI structure. Accent White (#FFFFFF) provides contrast and clarity.
The secondary color is Dr. Martens Black, #231F20, and the accent is Dr. Martens White, #FFFFFF. 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 Dr. Martens's colors consistently when it generates UI.
Make something in the spirit of Dr. Martens
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.