Marvel color palette
EntertainmentMarvel's brand color system is defined by its iconic, bold red, supported by a palette of black, white, and gray tones for contrast and clarity. The color identity is instantly recognizable and consistent across digital and print media.
marvel.comMarvel colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Marvel RedPrimary237, 29, 36
- Marvel WhiteSecondary255, 255, 255
- Marvel BlackAccent32, 32, 32
Surfaces
Page, cards and dividers.- Marvel Light GrayBackground244, 244, 244
- Marvel Surface GraySurface230, 230, 230
- Marvel Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Marvel Text BlackText34, 34, 34
- Marvel Text GraySecondary text102, 102, 102
- Marvel Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Marvel Success GreenSuccess67, 176, 71
- Marvel Warning OrangeWarning245, 166, 35
- Marvel Error RedError208, 2, 27
- Marvel Info BlueInfo74, 144, 226
Use Marvel's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
marvel-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4A90E2;
--error: #D0021B;
--accent: #202020;
--border: #CCCCCC;
--primary: #ED1D24;
--success: #43B047;
--surface: #E6E6E6;
--warning: #F5A623;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F4F4F4;
--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.5:1
Pass
Text on surface
Needs 4.5:1 for body text
12.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Marvel gray and neutral colors
The quiet part of the Marvel palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Marvel Light GrayBackground
- HEX
- RGB
- HSL
- Marvel Surface GraySurface
- HEX
- RGB
- HSL
- Marvel Border GrayBorder
- HEX
- RGB
- HSL
- Marvel Text BlackText
- HEX
- RGB
- HSL
- Marvel Text GraySecondary text
- HEX
- RGB
- HSL
- Marvel Muted GrayMuted text
- HEX
- RGB
- HSL
About Marvel's colors
Marvel's color palette is built around a dominant red, symbolizing energy and heroism, with supporting neutrals for balance. The palette is designed for high contrast and strong visual impact.
Primary red paired with white for maximum logo visibility.
Dark gray and black used for navigation and backgrounds.
Accent colors reserved for status and messaging.
Psychology
Red evokes excitement, power, and urgency, aligning with Marvel's action-oriented content. The use of black and white reinforces clarity and timelessness.
Evolution
Marvel's red has remained consistent since the 1960s, maintaining brand recognition. The supporting palette of grays and neutrals has expanded for modern digital interfaces.
Where Marvel uses each color
- Primary
Marvel Red is used for the logo, key buttons, and promotional banners.
- Secondary
Marvel White appears in backgrounds, logo text, and content areas.
- Accent
Marvel Black is used for navigation bars, footers, and overlays.
- Backgrounds
Marvel Light Gray and Surface Gray are used for page backgrounds and card surfaces.
- Text
Text Black is used for primary headlines, with Text Gray and Muted Gray for secondary and tertiary text.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for status indicators and alerts.
Marvel color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Marvel brand color is Marvel Red, hex code #ED1D24.
Marvel Red is RGB(237, 29, 36) and CMYK(0, 100, 100, 0). The hex code is #ED1D24.
Marvel uses Light Gray (#F4F4F4), Surface Gray (#E6E6E6), Border Gray (#CCCCCC), and several text grays for UI backgrounds and typography.
Use Marvel Red for logos and calls to action, neutrals for backgrounds and surfaces, and semantic colors for status or alerts. Always maintain high contrast for readability, using the exact hex codes provided.
The secondary color is Marvel White, #FFFFFF, and the accent is Marvel Black, #202020. 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 Marvel's colors consistently when it generates UI.
Make something in the spirit of Marvel
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.