Counter-Strike color palette
GamingCounter-Strike's color identity is defined by a stark, high-contrast palette built around deep black, steel gray, and tactical yellow. The brand's colors reflect its tactical, competitive atmosphere and utilitarian design ethos.
counter-strike.netCounter-Strike colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Counter-Strike BlackPrimary0, 0, 0
- Tactical CharcoalSecondary27, 27, 27
- Defuse YellowAccent255, 215, 0
Surfaces
Page, cards and dividers.- Map ShadowBackground18, 18, 18
- Bombsite GraySurface35, 35, 35
- Steel BorderBorder68, 68, 68
Text
Three tiers of copy.- Flashbang WhiteText255, 255, 255
- Smoke GraySecondary text176, 176, 176
- Muted CalloutMuted text122, 122, 122
Semantic
Feedback and state colors.- CT GreenSuccess92, 184, 92
- Molotov OrangeWarning255, 165, 0
- Terrorist RedError211, 47, 47
- Radio BlueInfo33, 150, 243
Use Counter-Strike's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
counter-strike-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #D32F2F;
--accent: #FFD700;
--border: #444444;
--primary: #000000;
--success: #5CB85C;
--surface: #232323;
--warning: #FFA500;
--secondary: #1B1B1B;
--text-muted: #7A7A7A;
--background: #121212;
--text-primary: #FFFFFF;
--text-secondary: #B0B0B0;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.7: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.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.2:1
Pass
Muted text on background
Needs 3:1 for large text
4.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.7:1
Pass
Counter-Strike gray, dark and neutral colors
Counter-Strike 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.
- Map ShadowBackground
- HEX
- RGB
- HSL
- Bombsite GraySurface
- HEX
- RGB
- HSL
- Steel BorderBorder
- HEX
- RGB
- HSL
- Flashbang WhiteText
- HEX
- RGB
- HSL
- Smoke GraySecondary text
- HEX
- RGB
- HSL
- Muted CalloutMuted text
- HEX
- RGB
- HSL
About Counter-Strike's colors
Counter-Strike's palette uses high-contrast darks with sharp yellow accents for visibility and tactical clarity. The colors are utilitarian, supporting a focus on gameplay and legibility.
Primary black contrasts with accent yellow for alerts.
Gray tones unify UI surfaces and backgrounds.
Red and orange highlight danger and warnings.
Psychology
The dominant black and gray tones evoke seriousness, focus, and a tactical environment. Yellow accents draw attention to critical UI elements, while red and orange signal urgency.
Evolution
Counter-Strike's color palette has remained largely stable since its early releases, emphasizing dark, neutral tones. Over time, accent colors like yellow and orange have become more prominent in UI highlights and alerts.
Where Counter-Strike uses each color
- Primary
Used in logos, main navigation bars, and backgrounds.
- Secondary
Appears in UI panels, overlays, and modal backgrounds.
- Accent
Utilized for highlights, call-to-action buttons, and bomb timer indicators.
- Backgrounds
Applied to main menu screens and in-game UI overlays.
- Text
White and gray tones are used for primary and secondary text in menus and HUD.
- Semantic
Green, orange, red, and blue are used for status indicators, warnings, errors, and informational messages respectively.
Counter-Strike color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official primary color for Counter-Strike is #000000, known as Counter-Strike Black.
The RGB value for #000000 is (0, 0, 0). In CMYK, it is (0, 0, 0, 100).
Counter-Strike uses #1B1B1B (Tactical Charcoal), #232323 (Bombsite Gray), and #444444 (Steel Border) for its dark and neutral UI elements.
Use #000000 and #1B1B1B for primary backgrounds and navigation, with #FFD700 for accents and highlights. Text should use #FFFFFF for primary and #B0B0B0 or #7A7A7A for secondary and muted content.
The secondary color is Tactical Charcoal, #1B1B1B, and the accent is Defuse Yellow, #FFD700. 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 Counter-Strike's colors consistently when it generates UI.
Make something in the spirit of Counter-Strike
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.