Sonos color palette
TechSonos uses a minimalist, monochromatic color system centered on black and white, reflecting its focus on premium audio and modern design. The palette relies on deep blacks, crisp whites, and a range of neutral grays for clarity and sophistication.
sonos.comSonos colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Sonos BlackPrimary0, 0, 0
- Sonos WhiteSecondary255, 255, 255
- Sonos Light GrayAccent245, 245, 245
Surfaces
Page, cards and dividers.- Sonos CharcoalBackground26, 26, 26
- Sonos Surface GraySurface34, 34, 34
- Sonos Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Sonos Text BlackText0, 0, 0
- Sonos Text GraySecondary text102, 102, 102
- Sonos Muted GrayMuted text160, 160, 160
Semantic
Feedback and state colors.- Sonos Success GreenSuccess0, 128, 96
- Sonos Warning OrangeWarning245, 166, 35
- Sonos Error RedError208, 2, 27
- Sonos Info BlueInfo1, 119, 251
Use Sonos's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
sonos-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0177FB;
--error: #D0021B;
--accent: #F5F5F5;
--border: #E0E0E0;
--primary: #000000;
--success: #008060;
--surface: #222222;
--warning: #F5A623;
--secondary: #FFFFFF;
--text-muted: #A0A0A0;
--background: #1A1A1A;
--text-primary: #000000;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
1.2:1
Fail
Text on surface
Needs 4.5:1 for body text
1.3:1
Fail
Secondary text on background
Needs 4.5:1 for body text
3.0:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
2.8:1
Fail
Muted text on background
Needs 3:1 for large text
6.7:1
Pass
Muted text on surface
Needs 3:1 for large text
6.1:1
Pass
Sonos gray, dark and neutral colors
Sonos 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.
- Sonos CharcoalBackground
- HEX
- RGB
- HSL
- Sonos Surface GraySurface
- HEX
- RGB
- HSL
- Sonos Border GrayBorder
- HEX
- RGB
- HSL
- Sonos Text BlackText
- HEX
- RGB
- HSL
- Sonos Text GraySecondary text
- HEX
- RGB
- HSL
- Sonos Muted GrayMuted text
- HEX
- RGB
- HSL
About Sonos's colors
Sonos employs a monochromatic palette with black and white at its core, complemented by subtle grays for depth and clarity. This approach emphasizes simplicity and timelessness in the user experience.
Primary black contrasts with white for maximum legibility.
Grays provide hierarchy and separation in the UI.
Accent colors are reserved for status and feedback.
Psychology
Black conveys sophistication and authority, aligning with Sonos's premium positioning. The neutral palette supports a focus on product and content rather than branding.
Evolution
Sonos's color palette has remained largely stable, consistently emphasizing black and white. Minor adjustments to gray tones have improved accessibility and modernized the interface.
Where Sonos uses each color
- Primary
Used for logos, navigation bars, and key UI elements.
- Secondary
Applied to backgrounds, product photography, and packaging.
- Accent
Utilized for subtle UI backgrounds and hover states.
- Backgrounds
Charcoal and surface grays are used for app and website backgrounds.
- Text
Black and gray tones are used for primary, secondary, and muted text.
- Semantic
Green, orange, red, and blue are used for success, warning, error, and informational states respectively.
Sonos color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Sonos primary color hex code is #000000. This is used for the logo and key brand elements.
Sonos Black (#000000) is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
Sonos uses a range of grays such as Sonos Light Gray (#F5F5F5), Surface Gray (#222222), and Border Gray (#E0E0E0) for backgrounds and borders.
Primary black and white should dominate, with grays providing structure and semantic colors used only for status or feedback. Always use the exact hex codes for consistency.
The secondary color is Sonos White, #FFFFFF, and the accent is Sonos Light Gray, #F5F5F5. Together with the primary they make up the three brand colors at the top of this page.
2 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 Sonos's colors consistently when it generates UI.
Make something in the spirit of Sonos
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.