Logitech color palette
TechLogitech's color identity centers on a vibrant cyan blue, complemented by dark neutrals and crisp white for a modern, tech-forward look. The palette is used consistently across digital and physical touchpoints to reinforce brand recognition.
logitech.comLogitech colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Logitech CyanPrimary0, 184, 252
- Logitech CharcoalSecondary35, 38, 41
- Logitech YellowAccent255, 185, 0
Surfaces
Page, cards and dividers.- Logitech WhiteBackground255, 255, 255
- Logitech Light GraySurface245, 246, 247
- Logitech Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Logitech CharcoalText35, 38, 41
- Logitech Medium GraySecondary text109, 110, 113
- Logitech Muted GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- Logitech GreenSuccess0, 196, 140
- Logitech YellowWarning255, 185, 0
- Logitech RedError255, 59, 48
- Logitech CyanInfo0, 184, 252
Use Logitech's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
logitech-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B8FC;
--error: #FF3B30;
--accent: #FFB900;
--border: #E0E0E0;
--primary: #00B8FC;
--success: #00C48C;
--surface: #F5F6F7;
--warning: #FFB900;
--secondary: #232629;
--text-muted: #A7A8AA;
--background: #FFFFFF;
--text-primary: #232629;
--text-secondary: #6D6E71;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.2:1
Pass
Text on surface
Needs 4.5:1 for body text
14.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Logitech gray and neutral colors
The quiet part of the Logitech palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Logitech WhiteBackground
- HEX
- RGB
- HSL
- Logitech Light GraySurface
- HEX
- RGB
- HSL
- Logitech Border GrayBorder
- HEX
- RGB
- HSL
- Logitech CharcoalText
- HEX
- RGB
- HSL
- Logitech Medium GraySecondary text
- HEX
- RGB
- HSL
- Logitech Muted GrayMuted text
- HEX
- RGB
- HSL
About Logitech's colors
Logitech's palette uses a high-contrast cyan as the anchor, balanced by dark neutrals and minimal accent hues. The approach supports clarity, accessibility, and a distinct tech identity.
Primary cyan pairs with deep charcoal for strong contrast.
Accents like yellow and green are reserved for highlights and status.
Grays provide structure and hierarchy in UI elements.
Psychology
The cyan conveys innovation, energy, and approachability, while the dark neutrals add professionalism and stability. Accents like yellow and green signal positivity and action.
Evolution
Logitech's palette has evolved from a more muted blue and gray scheme to a brighter, more saturated cyan and sharper contrasts. The core colors have remained stable since the 2015 rebrand, with minor adjustments for digital clarity.
Where Logitech uses each color
- Primary
Used for main CTAs, highlights, and brand marks across web and packaging.
- Secondary
Appears in navigation bars, footers, and backgrounds for contrast.
- Accent
Applied to notification badges, highlights, and select product details.
- Backgrounds
White and light gray are used for page and card backgrounds throughout digital interfaces.
- Text
Charcoal and medium gray are used for primary and secondary text, ensuring readability.
- Semantic
Green, yellow, and red are used for status indicators, alerts, and feedback messaging.
Logitech color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Logitech primary color is #00B8FC, known as Logitech Cyan. This is used for key brand and UI elements.
Logitech Cyan (#00B8FC) is RGB(0, 184, 252) and CMYK(75, 0, 0, 0). Use these for digital and print consistency.
Logitech uses #232629 (Charcoal), #6D6E71 (Medium Gray), and #A7A8AA (Muted Gray) for UI backgrounds and text. These neutrals provide structure and accessibility.
Use #00B8FC for primary actions and highlights, with neutrals for backgrounds and text. Reserve accent colors for notifications, status, and emphasis only.
The secondary color is Logitech Charcoal, #232629, and the accent is Logitech Yellow, #FFB900. Together with the primary they make up the three brand colors at the top of this page.
4 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's colors consistently when it generates UI.
Make something in the spirit of Logitech
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.