Square Enix color palette
GamingSquare Enix's color identity is defined by a bold, high-impact red paired with a monochromatic grayscale palette, reflecting its premium gaming heritage. The palette is minimal, focusing on clarity and strong visual contrast.
square-enix.comSquare Enix colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Square Enix RedPrimary237, 28, 36
- Square Enix CharcoalSecondary34, 34, 34
- Square Enix WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Square Enix BlackBackground0, 0, 0
- Square Enix Dark SurfaceSurface26, 26, 26
- Square Enix Border GrayBorder68, 68, 68
Text
Three tiers of copy.- Square Enix Text WhiteText255, 255, 255
- Square Enix Text GraySecondary text204, 204, 204
- Square Enix Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Square Enix Success GreenSuccess67, 176, 71
- Square Enix Warning YellowWarning246, 168, 0
- Square Enix Error RedError237, 28, 36
- Square Enix Info BlueInfo0, 153, 204
Use Square Enix's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
square-enix-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099CC;
--error: #ED1C24;
--accent: #FFFFFF;
--border: #444444;
--primary: #ED1C24;
--success: #43B047;
--surface: #1A1A1A;
--warning: #F6A800;
--secondary: #222222;
--text-muted: #888888;
--background: #000000;
--text-primary: #FFFFFF;
--text-secondary: #CCCCCC;
}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
17.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
13.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
10.8:1
Pass
Muted text on background
Needs 3:1 for large text
5.9:1
Pass
Muted text on surface
Needs 3:1 for large text
4.9:1
Pass
Square Enix gray, dark and neutral colors
Square Enix 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.
- Square Enix BlackBackground
- HEX
- RGB
- HSL
- Square Enix Dark SurfaceSurface
- HEX
- RGB
- HSL
- Square Enix Border GrayBorder
- HEX
- RGB
- HSL
- Square Enix Text WhiteText
- HEX
- RGB
- HSL
- Square Enix Text GraySecondary text
- HEX
- RGB
- HSL
- Square Enix Muted GrayMuted text
- HEX
- RGB
- HSL
About Square Enix's colors
Square Enix uses a minimalist palette centered on a signature red for brand recognition and grayscale tones for clarity and contrast. The limited use of color emphasizes content and navigation.
Primary red contrasts strongly with black and white backgrounds.
Grayscale tones are used for UI, text, and surfaces.
Accent white provides visual hierarchy and separation.
Psychology
The red conveys energy, urgency, and excitement, aligning with the brand's dynamic gaming portfolio. Grayscale tones evoke sophistication and focus, supporting the premium image.
Evolution
The palette has remained consistent, with red as the core brand color since the company's inception. Minor adjustments to grayscale tones have been made to improve digital accessibility.
Where Square Enix uses each color
- Primary
Used in the Square Enix logo, primary buttons, and key calls to action.
- Secondary
Appears in navigation bars, footers, and dark UI backgrounds.
- Accent
Used for highlights, icons, and as a contrasting element against dark backgrounds.
- Backgrounds
Black and dark surfaces are used for main backgrounds and immersive app screens.
- Text
White and light gray are used for primary and secondary text throughout the website and apps.
- Semantic
Green, yellow, and blue are used for status indicators, notifications, and system messages.
Square Enix color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Square Enix primary color is #ED1C24. This red is used in the logo and key brand elements.
Square Enix Red (#ED1C24) is RGB(237, 28, 36) and CMYK(0, 100, 100, 0). Use these values for print and digital consistency.
Square Enix uses a range of grays including #222222 (Charcoal), #1A1A1A (Dark Surface), and #444444 (Border Gray) for backgrounds and UI elements.
Use #ED1C24 for primary actions and branding, with grayscale tones for backgrounds and text. Accent white (#FFFFFF) is reserved for highlights and contrast.
The secondary color is Square Enix Charcoal, #222222, and the accent is Square Enix 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 Square Enix's colors consistently when it generates UI.
Make something in the spirit of Square Enix
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.