Valve color palette
GamingValve's color identity is defined by a bold red primary, complemented by dark neutrals and subtle gray tones for interface clarity. The palette supports a modern, minimalistic UI that emphasizes content and usability.
valvesoftware.comValve colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Valve RedPrimary247, 72, 67
- Valve CharcoalSecondary34, 34, 34
- Valve GoldAccent246, 195, 67
Surfaces
Page, cards and dividers.- Valve Dark BackgroundBackground24, 26, 27
- Valve Surface GraySurface35, 37, 39
- Valve Border GrayBorder58, 61, 63
Text
Three tiers of copy.- Valve WhiteText255, 255, 255
- Valve Light GraySecondary text176, 179, 184
- Valve Muted GrayMuted text118, 121, 123
Semantic
Feedback and state colors.- Valve Success GreenSuccess109, 200, 73
- Valve Warning GoldWarning246, 195, 67
- Valve Error RedError247, 72, 67
- Valve Info BlueInfo77, 179, 247
Use Valve's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
valve-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4DB3F7;
--error: #F74843;
--accent: #F6C343;
--border: #3A3D3F;
--primary: #F74843;
--success: #6DC849;
--surface: #232527;
--warning: #F6C343;
--secondary: #222222;
--text-muted: #76797B;
--background: #181A1B;
--text-primary: #FFFFFF;
--text-secondary: #B0B3B8;
}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.5:1
Pass
Text on surface
Needs 4.5:1 for body text
15.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.3:1
Pass
Muted text on background
Needs 3:1 for large text
4.0:1
Pass
Muted text on surface
Needs 3:1 for large text
3.5:1
Pass
Valve gray, dark and neutral colors
Valve 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.
- Valve Dark BackgroundBackground
- HEX
- RGB
- HSL
- Valve Surface GraySurface
- HEX
- RGB
- HSL
- Valve Border GrayBorder
- HEX
- RGB
- HSL
- Valve WhiteText
- HEX
- RGB
- HSL
- Valve Light GraySecondary text
- HEX
- RGB
- HSL
- Valve Muted GrayMuted text
- HEX
- RGB
- HSL
About Valve's colors
Valve's palette is anchored by a vivid red, contrasted with deep grays and accented by gold for highlights. This combination creates a strong, recognizable identity while supporting usability in digital interfaces.
Primary red is balanced by neutral dark backgrounds.
Accent gold is used for highlights and notifications.
White and gray tones provide text clarity and hierarchy.
Psychology
The red primary conveys energy, urgency, and a sense of action, fitting for a gaming brand. Dark neutrals create a professional, immersive environment that keeps the focus on content.
Evolution
Valve's palette has remained largely stable, consistently using red and dark neutrals since its early branding. Minor adjustments have refined the gray tones for better accessibility and modern UI needs.
Where Valve uses each color
- Primary
Used for key brand marks, call-to-action buttons, and highlights on the Valve website.
- Secondary
Forms the main navigation bar and header backgrounds.
- Accent
Applied to notification badges, icons, and important UI highlights.
- Backgrounds
Dark background is used across app screens and web pages for a cohesive look.
- Text
White and light gray are used for primary and secondary text to ensure readability on dark surfaces.
- Semantic
Success green, warning gold, and error red are used for status indicators and alerts in UI elements.
Valve color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Valve primary color is #F74843. This bold red is used for key branding and highlights.
Valve Red is RGB(247, 72, 67) and CMYK(0, 71, 73, 3). Always use the hex #F74843 for digital applications.
Valve uses #222222 (Valve Charcoal), #181A1B (Valve Dark Background), and #232527 (Valve Surface Gray) for its UI. These colors provide a modern, minimalistic backdrop for content.
Use Valve Red (#F74843) for primary actions and branding, with dark neutrals for backgrounds and surfaces. Accent and semantic colors should be reserved for notifications, alerts, and status indicators.
The secondary color is Valve Charcoal, #222222, and the accent is Valve Gold, #F6C343. 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 Valve's colors consistently when it generates UI.
Make something in the spirit of Valve
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.