Razer color palette
GamingRazer's color identity is defined by its signature neon green paired with deep blacks and dark grays, creating a high-contrast, futuristic look. The palette reflects its focus on gaming hardware and immersive experiences.
razer.comRazer colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Razer GreenPrimary0, 255, 0
- Razer CharcoalSecondary34, 34, 34
- Razer WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Razer BlackBackground17, 17, 17
- Razer Surface GraySurface24, 24, 24
- Razer Border GrayBorder51, 51, 51
Text
Three tiers of copy.- Razer Text LightText237, 237, 237
- Razer Text GraySecondary text176, 176, 176
- Razer Muted GrayMuted text102, 102, 102
Semantic
Feedback and state colors.- Razer Success GreenSuccess0, 255, 0
- Razer Warning YellowWarning255, 214, 0
- Razer Error RedError255, 51, 51
- Razer Info BlueInfo0, 184, 255
Use Razer's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
razer-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B8FF;
--error: #FF3333;
--accent: #FFFFFF;
--border: #333333;
--primary: #00FF00;
--success: #00FF00;
--surface: #181818;
--warning: #FFD600;
--secondary: #222222;
--text-muted: #666666;
--background: #111111;
--text-primary: #EDEDED;
--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
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
15.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.2:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Razer gray, dark and neutral colors
Razer 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.
- Razer BlackBackground
- HEX
- RGB
- HSL
- Razer Surface GraySurface
- HEX
- RGB
- HSL
- Razer Border GrayBorder
- HEX
- RGB
- HSL
- Razer Text LightText
- HEX
- RGB
- HSL
- Razer Text GraySecondary text
- HEX
- RGB
- HSL
- Razer Muted GrayMuted text
- HEX
- RGB
- HSL
About Razer's colors
Razer’s palette is built around high-contrast neon green and deep, dark neutrals, emphasizing a futuristic and tech-focused aesthetic. The green is used sparingly for maximum impact against predominantly black and gray backgrounds.
Neon green stands out against black and gray.
White is used for high-contrast highlights and text.
Accent colors (yellow, red, blue) are reserved for semantic UI states.
Psychology
The neon green evokes energy, innovation, and a sense of cutting-edge technology. The dark palette reinforces a premium, immersive gaming experience.
Evolution
Razer’s color palette has remained largely consistent since its inception, with the neon green and black combination becoming iconic. Minor adjustments have been made to gray tones and accent colors for improved UI clarity.
Where Razer uses each color
- Primary
Razer Green is used for logo, key highlights, and call-to-action buttons.
- Secondary
Razer Charcoal appears in navigation bars, footers, and card backgrounds.
- Accent
Razer White is used for text, icons, and UI highlights.
- Backgrounds
Razer Black is the dominant background color across websites, apps, and packaging.
- Text
Razer Text Light and Gray are used for primary and secondary text throughout digital interfaces.
- Semantic
Success, warning, error, and info colors are used for notifications, status indicators, and alerts.
Razer color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Razer primary color hex code is #00FF00. This neon green is central to the brand's identity.
Razer Green (#00FF00) in RGB is (0, 255, 0) and in CMYK is (100, 0, 100, 0).
Razer uses #111111 (Razer Black), #181818 (Razer Surface Gray), and #222222 (Razer Charcoal) as its primary dark and neutral UI tones.
Use Razer Green (#00FF00) sparingly for emphasis, with black and dark grays as dominant backgrounds. Accent and semantic colors are reserved for UI states and highlights.
The secondary color is Razer Charcoal, #222222, and the accent is Razer 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 Razer's colors consistently when it generates UI.
Make something in the spirit of Razer
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.