Steam color palette
GamingSteam's color system is built around a deep black primary, complemented by cool blue accents and a range of dark and neutral grays for its interface. The palette is designed for a modern, immersive digital storefront experience.
store.steampowered.comSteam colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Steam BlackPrimary0, 0, 0
- Steam CharcoalSecondary23, 26, 33
- Steam BlueAccent27, 40, 56
Surfaces
Page, cards and dividers.- Steam Dark GrayBackground32, 35, 42
- Steam Surface BlueSurface42, 71, 94
- Steam Border GrayBorder60, 63, 71
Text
Three tiers of copy.- Steam WhiteText255, 255, 255
- Steam Light BlueSecondary text199, 213, 224
- Steam Muted GrayMuted text130, 130, 130
Semantic
Feedback and state colors.- Steam Success GreenSuccess92, 187, 95
- Steam Warning YellowWarning249, 166, 2
- Steam Error RedError231, 76, 60
- Steam Info BlueInfo102, 192, 244
Use Steam's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
steam-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #66C0F4;
--error: #E74C3C;
--accent: #1B2838;
--border: #3C3F47;
--primary: #000000;
--success: #5CBB5F;
--surface: #2A475E;
--warning: #F9A602;
--secondary: #171A21;
--text-muted: #828282;
--background: #20232A;
--text-primary: #FFFFFF;
--text-secondary: #C7D5E0;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.7:1
Pass
Text on surface
Needs 4.5:1 for body text
9.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
10.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.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
2.5:1
Fail
Steam background, border and text colors
Steam 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.
- Steam Dark GrayBackground
- HEX
- RGB
- HSL
- Steam Surface BlueSurface
- HEX
- RGB
- HSL
- Steam Border GrayBorder
- HEX
- RGB
- HSL
- Steam WhiteText
- HEX
- RGB
- HSL
- Steam Light BlueSecondary text
- HEX
- RGB
- HSL
- Steam Muted GrayMuted text
- HEX
- RGB
- HSL
About Steam's colors
Steam's palette is dominated by deep blacks and cool blues, creating a sleek and immersive environment. The use of subtle gradients and neutral grays supports readability and focus on content.
Primary black contrasts with white and light blue text.
Accent blue highlights interactive elements.
Neutral grays unify backgrounds and surfaces.
Psychology
The dark tones evoke a sense of sophistication and focus, reducing eye strain during extended browsing. Blue accents convey trust and reliability, aligning with Steam's role as a leading digital distribution platform.
Evolution
Steam's color palette has remained largely consistent, emphasizing dark themes since its early years. Minor adjustments have been made to blue and gray tones to improve accessibility and modernize the interface.
Where Steam uses each color
- Primary
Used for navigation bars, overlays, and main backgrounds throughout the Steam client and website.
- Secondary
Appears in sidebar backgrounds and dropdown menus.
- Accent
Highlights buttons, links, and active states in the UI.
- Backgrounds
Applied to app screens, library views, and storefront panels.
- Text
White and light blue are used for primary and secondary text for optimal contrast on dark backgrounds.
- Semantic
Green, yellow, and red are used for status indicators like download progress, warnings, and errors.
Steam color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Steam primary color hex code is #000000, known as Steam Black. This is used extensively in the interface background.
The RGB value for Steam Black (#000000) is (0, 0, 0). In CMYK, it is (0, 0, 0, 100).
Steam uses #171A21 (Steam Charcoal), #20232A (Steam Dark Gray), and #3C3F47 (Steam Border Gray) as its main dark and neutral tones. These colors provide depth and separation in the UI.
Use Steam Black (#000000) for main backgrounds, Steam Blue (#1B2838) for accents, and Steam White (#FFFFFF) for primary text. Maintain high contrast and adhere to these official hex codes for consistency.
The secondary color is Steam Charcoal, #171A21, and the accent is Steam Blue, #1B2838. Together with the primary they make up the three brand colors at the top of this page.
5 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 Steam's colors consistently when it generates UI.
Make something in the spirit of Steam
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.