SteelSeries color palette
GamingSteelSeries uses a bold orange as its signature color, complemented by a dark, high-contrast UI with neutral grays and white for clarity. The palette is designed for strong visual impact and legibility in gaming environments.
steelseries.comSteelSeries colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- SteelSeries OrangePrimary255, 82, 0
- SteelSeries BlackSecondary0, 0, 0
- SteelSeries WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- SteelSeries CharcoalBackground24, 24, 24
- SteelSeries GraphiteSurface35, 35, 35
- SteelSeries Border GrayBorder44, 44, 44
Text
Three tiers of copy.- SteelSeries Text WhiteText255, 255, 255
- SteelSeries Text GraySecondary text179, 179, 179
- SteelSeries Muted GrayMuted text122, 122, 122
Semantic
Feedback and state colors.- SteelSeries Success GreenSuccess46, 204, 64
- SteelSeries Warning YellowWarning255, 195, 0
- SteelSeries Error RedError255, 45, 45
- SteelSeries Info BlueInfo0, 156, 255
Use SteelSeries's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
steelseries-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009CFF;
--error: #FF2D2D;
--accent: #FFFFFF;
--border: #2C2C2C;
--primary: #FF5200;
--success: #2ECC40;
--surface: #232323;
--warning: #FFC300;
--secondary: #000000;
--text-muted: #7A7A7A;
--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.1:1
Pass
Muted text on surface
Needs 3:1 for large text
3.7:1
Pass
SteelSeries gray, dark and neutral colors
SteelSeries 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.
- SteelSeries CharcoalBackground
- HEX
- RGB
- HSL
- SteelSeries GraphiteSurface
- HEX
- RGB
- HSL
- SteelSeries Border GrayBorder
- HEX
- RGB
- HSL
- SteelSeries Text WhiteText
- HEX
- RGB
- HSL
- SteelSeries Text GraySecondary text
- HEX
- RGB
- HSL
- SteelSeries Muted GrayMuted text
- HEX
- RGB
- HSL
About SteelSeries's colors
SteelSeries' palette centers on a vibrant orange for brand recognition, set against deep blacks and grays for a modern, high-contrast look. White and muted grays ensure readability and clean UI presentation.
Orange contrasts with black for high visibility.
Neutral grays balance the palette and support UI clarity.
Accent white is used for text and highlights.
Psychology
The orange conveys energy, excitement, and a sense of action, fitting for a gaming brand. Black and gray tones evoke sophistication and focus, while white provides clarity.
Evolution
SteelSeries has consistently used orange as its primary color since its early branding, with only minor adjustments to supporting neutrals. The palette has remained stable, reinforcing strong brand recognition.
Where SteelSeries uses each color
- Primary
SteelSeries Orange is used for call-to-action buttons, highlights, and key brand elements across the website and packaging.
- Secondary
SteelSeries Black is the dominant background for navigation bars, footers, and product showcases.
- Accent
SteelSeries White appears in text, icons, and logo applications for maximum contrast.
- Backgrounds
SteelSeries Charcoal is used as the main background on app screens and web pages.
- Text
Text White and Text Gray are used for primary and secondary text throughout the UI for readability.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for alerts, notifications, and status indicators in software and support pages.
SteelSeries color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official SteelSeries primary color hex code is #FF5200. This vibrant orange is used for key brand elements and call-to-action buttons.
SteelSeries Orange (#FF5200) has an RGB value of (255, 82, 0). For print, the approximate CMYK is (0, 68, 100, 0).
SteelSeries uses a range of dark and neutral tones including SteelSeries Black (#000000), Charcoal (#181818), Graphite (#232323), and Border Gray (#2C2C2C) for backgrounds and UI elements.
Use SteelSeries Orange (#FF5200) for primary actions and highlights, with black and charcoal backgrounds for contrast. Text and icons should use white or gray tones for optimal legibility.
The secondary color is SteelSeries Black, #000000, and the accent is SteelSeries 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 SteelSeries's colors consistently when it generates UI.
Make something in the spirit of SteelSeries
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.