HyperX color palette
GamingHyperX's color identity is defined by its signature bold red, supported by deep blacks and neutral grays for a high-contrast, energetic look. The palette is optimized for gaming hardware, esports branding, and digital interfaces.
hyperx.comHyperX colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- HyperX RedPrimary226, 24, 54
- HyperX BlackSecondary20, 20, 20
- HyperX WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- HyperX Dark GrayBackground24, 24, 24
- HyperX Surface GraySurface35, 35, 35
- HyperX Border GrayBorder54, 54, 54
Text
Three tiers of copy.- HyperX Text WhiteText255, 255, 255
- HyperX Text GraySecondary text179, 179, 179
- HyperX Muted GrayMuted text124, 124, 124
Semantic
Feedback and state colors.- HyperX Success GreenSuccess75, 181, 67
- HyperX Warning YellowWarning255, 180, 0
- HyperX Error RedError226, 24, 54
- HyperX Info BlueInfo0, 153, 255
Use HyperX's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hyperx-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099FF;
--error: #E21836;
--accent: #FFFFFF;
--border: #363636;
--primary: #E21836;
--success: #4BB543;
--surface: #232323;
--warning: #FFB400;
--secondary: #141414;
--text-muted: #7C7C7C;
--background: #181818;
--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.8: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.5: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
4.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.8:1
Pass
HyperX gray, dark and neutral colors
HyperX 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.
- HyperX Dark GrayBackground
- HEX
- RGB
- HSL
- HyperX Surface GraySurface
- HEX
- RGB
- HSL
- HyperX Border GrayBorder
- HEX
- RGB
- HSL
- HyperX Text WhiteText
- HEX
- RGB
- HSL
- HyperX Text GraySecondary text
- HEX
- RGB
- HSL
- HyperX Muted GrayMuted text
- HEX
- RGB
- HSL
About HyperX's colors
HyperX's palette is anchored by a vivid red, contrasted with deep blacks and neutral grays to evoke energy and clarity. The use of white and accent colors ensures legibility and visual impact across digital and physical products.
Primary red is paired with black for high contrast.
White is used for text and accents on dark backgrounds.
Grays provide depth and separation in UI elements.
Psychology
The bold red communicates excitement, passion, and action, aligning with gaming culture. Black and gray tones add a sense of professionalism and focus.
Evolution
The HyperX palette has remained stable since its inception, consistently using red, black, and white as core colors. Minor adjustments to gray tones have been made for improved digital accessibility.
Where HyperX uses each color
- Primary
HyperX Red is used for logos, key buttons, highlights, and product accents.
- Secondary
HyperX Black appears in backgrounds, navigation bars, and packaging.
- Accent
HyperX White is used for text, icons, and contrast elements.
- Backgrounds
Dark Gray is the default background for web, UI, and product displays.
- Text
Text White and Text Gray are used for primary and secondary text on dark surfaces.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status indicators and notifications.
HyperX color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official HyperX primary color is HyperX Red, hex code #E21836. This color is used in the logo and key brand elements.
HyperX Red (#E21836) has an RGB value of (226, 24, 54) and a CMYK value of (0, 89, 76, 11).
HyperX uses several dark and neutral grays, including HyperX Dark Gray (#181818), Surface Gray (#232323), and Border Gray (#363636) for backgrounds and UI separation.
Use HyperX Red (#E21836) for primary actions and highlights, with black and gray backgrounds for contrast. White and gray tones are reserved for text and icons to ensure readability.
The secondary color is HyperX Black, #141414, and the accent is HyperX 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 HyperX's colors consistently when it generates UI.
Make something in the spirit of HyperX
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.