Logitech G color palette
GamingLogitech G's color identity is defined by its vibrant cyan blue, paired with dark backgrounds and cool, modern neutrals. The palette is designed for high contrast and a sleek, gaming-focused aesthetic.
logitechg.comLogitech G colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Logitech G CyanPrimary0, 184, 252
- Logitech G CharcoalSecondary35, 39, 42
- Logitech G BlackAccent26, 26, 26
Surfaces
Page, cards and dividers.- Logitech G Deep BlackBackground24, 26, 27
- Logitech G Surface GraySurface34, 36, 38
- Logitech G Border GrayBorder53, 57, 60
Text
Three tiers of copy.- Logitech G WhiteText255, 255, 255
- Logitech G Light GraySecondary text185, 189, 193
- Logitech G Muted GrayMuted text107, 110, 113
Semantic
Feedback and state colors.- Logitech G Success GreenSuccess0, 230, 118
- Logitech G Warning YellowWarning255, 179, 0
- Logitech G Error RedError255, 23, 68
- Logitech G Info BlueInfo41, 121, 255
Use Logitech G's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
logitech-g-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2979FF;
--error: #FF1744;
--accent: #1A1A1A;
--border: #35393C;
--primary: #00B8FC;
--success: #00E676;
--surface: #222426;
--warning: #FFB300;
--secondary: #23272A;
--text-muted: #6B6E71;
--background: #181A1B;
--text-primary: #FFFFFF;
--text-secondary: #B9BDC1;
}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.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.2: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.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Pass
Logitech G gray, dark and neutral colors
Logitech G 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.
- Logitech G Deep BlackBackground
- HEX
- RGB
- HSL
- Logitech G Surface GraySurface
- HEX
- RGB
- HSL
- Logitech G Border GrayBorder
- HEX
- RGB
- HSL
- Logitech G WhiteText
- HEX
- RGB
- HSL
- Logitech G Light GraySecondary text
- HEX
- RGB
- HSL
- Logitech G Muted GrayMuted text
- HEX
- RGB
- HSL
About Logitech G's colors
Logitech G's palette uses a signature cyan blue contrasted with deep neutrals for a high-tech, energetic feel. The color system emphasizes clarity and focus, suitable for gaming environments.
Primary cyan is complemented by dark backgrounds.
Accent and border grays provide structure and depth.
Bright semantic colors highlight status and actions.
Psychology
The cyan blue conveys energy, innovation, and a sense of digital modernity. Dark backgrounds enhance immersion and reduce visual strain during extended use.
Evolution
The Logitech G palette has remained consistent since its rebrand, maintaining the cyan and dark neutral pairing. Minor adjustments have been made to gray tones for improved accessibility and contrast.
Where Logitech G uses each color
- Primary
Used for key brand elements, CTAs, highlights, and product accents.
- Secondary
Appears in navigation bars, footers, and major UI backgrounds.
- Accent
Used for overlays, cards, and hover states.
- Backgrounds
Dominates app screens, product pages, and packaging backgrounds.
- Text
Primary text is white for contrast; secondary and muted grays are used for less prominent information.
- Semantic
Success, warning, error, and info colors are used for notifications, status indicators, and alerts.
Logitech G color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Logitech G primary color is #00B8FC. This vibrant cyan is used across all major brand touchpoints.
The RGB value of #00B8FC is (0, 184, 252). In CMYK, it is approximately (100, 27, 0, 1).
Logitech G uses #23272A (Logitech G Charcoal), #181A1B (Logitech G Deep Black), and #222426 (Logitech G Surface Gray) for backgrounds and UI elements. These provide a sleek, modern look and ensure high contrast with the primary cyan.
Use #00B8FC for primary actions and highlights, with dark grays for backgrounds and white for text. Semantic colors like #00E676 (success) and #FF1744 (error) are reserved for status and alerts.
The secondary color is Logitech G Charcoal, #23272A, and the accent is Logitech G Black, #1A1A1A. 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 Logitech G's colors consistently when it generates UI.
Make something in the spirit of Logitech G
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.