Electronic Arts color palette
GamingElectronic Arts (EA) uses a bold, high-contrast color system centered on its signature EA Red, with black and white neutrals for clarity and impact. The palette is minimal, emphasizing brand recognition and digital legibility.
ea.comElectronic Arts colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- EA RedPrimary255, 71, 71
- EA BlackSecondary0, 0, 0
- EA WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- EA CharcoalBackground26, 26, 26
- EA Surface GraySurface35, 35, 35
- EA Border GrayBorder57, 57, 57
Text
Three tiers of copy.- EA Text WhiteText255, 255, 255
- EA Text GraySecondary text179, 179, 179
- EA Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- EA Success GreenSuccess75, 181, 67
- EA Warning YellowWarning255, 195, 0
- EA Error RedError255, 71, 71
- EA Info BlueInfo0, 153, 255
Use Electronic Arts's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
electronic-arts-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099FF;
--error: #FF4747;
--accent: #FFFFFF;
--border: #393939;
--primary: #FF4747;
--success: #4BB543;
--surface: #232323;
--warning: #FFC300;
--secondary: #000000;
--text-muted: #757575;
--background: #1A1A1A;
--text-primary: #FFFFFF;
--text-secondary: #B3B3B3;
}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.4:1
Pass
Text on surface
Needs 4.5:1 for body text
15.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.8:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Electronic Arts gray, dark and neutral colors
Electronic Arts runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- EA CharcoalBackground
- HEX
- RGB
- HSL
- EA Surface GraySurface
- HEX
- RGB
- HSL
- EA Border GrayBorder
- HEX
- RGB
- HSL
- EA Text WhiteText
- HEX
- RGB
- HSL
- EA Text GraySecondary text
- HEX
- RGB
- HSL
- EA Muted GrayMuted text
- HEX
- RGB
- HSL
About Electronic Arts's colors
EA's color palette is designed for high visibility and instant brand recognition, using a vivid red as its focal point. The supporting neutrals provide contrast and maintain a modern, digital-first appearance.
EA Red is complemented by deep blacks and clean whites.
Grays are used to create visual hierarchy and depth.
Accent colors are reserved for semantic states and highlights.
Psychology
The dominant red conveys energy, excitement, and urgency, fitting for a gaming brand. Black and gray neutrals reinforce a sense of professionalism and focus.
Evolution
EA's palette has remained consistent since its 2019 rebrand, which standardized the use of EA Red and simplified supporting tones. The color system is intentionally minimal to reinforce brand identity.
Where Electronic Arts uses each color
- Primary
EA Red is used for the logo, primary buttons, and key highlights across digital and print assets.
- Secondary
EA Black appears in navigation bars, footers, and as a background for high-contrast sections.
- Accent
EA White is used for text, icons, and to provide contrast on red or black backgrounds.
- Backgrounds
EA Charcoal and Surface Gray are used for app and website backgrounds, providing depth and reducing eye strain.
- Text
Text White and Text Gray are used for headings and body copy, ensuring legibility on dark backgrounds.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for notifications, status indicators, and alerts.
Electronic Arts color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official EA brand color is EA Red, hex code #FF4747.
EA Red is RGB(255, 71, 71) and CMYK(0, 72, 72, 0). The hex code is #FF4747.
EA uses EA Charcoal (#1A1A1A), EA Surface Gray (#232323), and EA Border Gray (#393939) for backgrounds and UI elements.
Use EA Red for primary actions and branding, with black and gray neutrals for backgrounds and surfaces. Semantic colors are reserved for status indicators and alerts.
The secondary color is EA Black, #000000, and the accent is EA White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
6 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 Electronic Arts's colors consistently when it generates UI.
Make something in the spirit of Electronic Arts
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.