Capcom color palette
GamingCapcom's color identity is defined by its iconic blue and yellow, reflecting energy and reliability. The palette is bold, simple, and consistent across its branding and digital presence.
capcom.comCapcom colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Capcom BluePrimary0, 87, 184
- Capcom YellowSecondary255, 210, 0
- Capcom WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Capcom Light GrayBackground245, 245, 245
- Capcom Surface GraySurface230, 231, 232
- Capcom Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Capcom Text BlackText34, 34, 34
- Capcom Text GraySecondary text102, 102, 102
- Capcom Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Capcom Success GreenSuccess76, 175, 80
- Capcom Warning OrangeWarning255, 152, 0
- Capcom Error RedError211, 47, 47
- Capcom Info BlueInfo2, 136, 209
Use Capcom's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
capcom-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #0057B8;
--success: #4CAF50;
--surface: #E6E7E8;
--warning: #FF9800;
--secondary: #FFD200;
--text-muted: #999999;
--background: #F5F5F5;
--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.6:1
Pass
Text on surface
Needs 4.5:1 for body text
12.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3: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
Capcom gray and neutral colors
The quiet part of the Capcom palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Capcom Light GrayBackground
- HEX
- RGB
- HSL
- Capcom Surface GraySurface
- HEX
- RGB
- HSL
- Capcom Border GrayBorder
- HEX
- RGB
- HSL
- Capcom Text BlackText
- HEX
- RGB
- HSL
- Capcom Text GraySecondary text
- HEX
- RGB
- HSL
- Capcom Muted GrayMuted text
- HEX
- RGB
- HSL
About Capcom's colors
Capcom's palette is dominated by a strong blue and vibrant yellow, creating high contrast and instant brand recognition. The supporting neutrals ensure clarity and usability in digital interfaces.
Primary blue paired with yellow for logo and highlights.
Neutral grays for backgrounds and UI surfaces.
Accent white for contrast and readability.
Psychology
Blue conveys trust, dependability, and professionalism, while yellow adds energy and optimism. Together, they evoke excitement and reliability, fitting for a global gaming company.
Evolution
Capcom's core blue and yellow have remained unchanged for decades, maintaining brand consistency. Minor adjustments to neutral tones have been made for modern digital interfaces.
Where Capcom uses each color
- Primary
Capcom Blue is used in the main logo, navigation bars, and key call-to-action buttons.
- Secondary
Capcom Yellow highlights the logo outline and is used for emphasis in banners and promotional graphics.
- Accent
Capcom White is used for text on colored backgrounds and as a highlight in UI elements.
- Backgrounds
Capcom Light Gray and Surface Gray are used for website backgrounds and content areas.
- Text
Capcom Text Black and Text Gray are used for primary and secondary text throughout digital and print materials.
- Semantic
Success, warning, error, and info colors are used for notifications, alerts, and status indicators in web and app interfaces.
Capcom color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Capcom brand color is Capcom Blue, hex code #0057B8.
Capcom Blue (#0057B8) in RGB is 0, 87, 184. In CMYK it is 100, 53, 0, 28.
Capcom uses Capcom Light Gray (#F5F5F5), Surface Gray (#E6E7E8), and Border Gray (#CCCCCC) for backgrounds and UI surfaces.
Use Capcom Blue as the dominant color for branding and navigation, with Capcom Yellow for highlights and calls to action. Apply neutral grays for backgrounds and maintain high contrast for readability.
The secondary color is Capcom Yellow, #FFD200, and the accent is Capcom 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 Capcom's colors consistently when it generates UI.
Make something in the spirit of Capcom
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.