Steam Blue Color Psychology & Meaning
Steam's dark navy and ice blue is the palette of PC gaming culture — serious, technical, and just a little cold. It signals a library, not a toy store.
#1B2838
#66C0F4
#C7D5E0
#8B929A
Background
Primary Accent
Secondary
Body Text
Steam Blue
darkgamingcool winterautumn gamingappbranding
AA
WCAG Grade
4.7:1
Contrast Ratio
3,900
Saves
10,700
AI Copies
Use #1B2838 as the background. Use #66C0F4 as the primary accent. Use #C7D5E0 as secondary. Use #8B929A as body text/supporting color. Palette mood: Steam Blue — dark, gaming, cool.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Steam Blue color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 2.0% | 27, 40, 56 | 52%, 29%, 0%, 78% | 213°, 35%, 16% | ||
| Primary Accent Luminance: 47.1% | 102, 192, 244 | 58%, 21%, 0%, 4% | 202°, 87%, 68% | ||
| Secondary Luminance: 65.1% | 199, 213, 224 | 11%, 5%, 0%, 12% | 206°, 29%, 83% | ||
| Body Text Luminance: 28.4% | 139, 146, 154 | 10%, 5%, 0%, 40% | 212°, 7%, 57% |
Color Harmony: Analogous Scheme
The Steam Blue palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Steam launched in 2003. The current dark palette replaced an earlier gray system and has become one of the most recognizable interfaces in gaming.
Best Design Use Cases
Dark navy for all surfaces. Ice blue for interactive elements, game titles, and brand accents. Medium blue-gray for secondary text. Dark gray for metadata.
Industries This Palette Suits
PC gaming, digital distribution, game communities, esports, entertainment.
How to Implement the Steam Blue Color Scheme
To use this Steam Blue color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #1B2838 for the main background and #66C0F4 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #8B929A and #1B2838 is 4.74:1 (AA). Ensure your body text remains legible.