Bose color palette
TechBose's color identity is defined by a minimalist palette centered on deep black and cool grays, reflecting its focus on premium audio technology. The palette is designed for clarity, sophistication, and strong contrast in digital and physical applications.
bose.comBose colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Bose BlackPrimary0, 0, 0
- Bose GraphiteSecondary34, 34, 34
- Bose WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Bose Light GrayBackground245, 245, 245
- Bose Silver GraySurface224, 224, 224
- Bose Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Bose Text BlackText0, 0, 0
- Bose Text GraySecondary text85, 85, 85
- Bose Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Bose Success GreenSuccess60, 179, 113
- Bose Warning OrangeWarning255, 165, 0
- Bose Error RedError211, 47, 47
- Bose Info BlueInfo25, 118, 210
Use Bose's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bose-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #000000;
--success: #3CB371;
--surface: #E0E0E0;
--warning: #FFA500;
--secondary: #222222;
--text-muted: #888888;
--background: #F5F5F5;
--text-primary: #000000;
--text-secondary: #555555;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.6: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
2.7:1
Fail
Bose gray and neutral colors
The quiet part of the Bose palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Bose Light GrayBackground
- HEX
- RGB
- HSL
- Bose Silver GraySurface
- HEX
- RGB
- HSL
- Bose Border GrayBorder
- HEX
- RGB
- HSL
- Bose Text BlackText
- HEX
- RGB
- HSL
- Bose Text GraySecondary text
- HEX
- RGB
- HSL
- Bose Muted GrayMuted text
- HEX
- RGB
- HSL
About Bose's colors
Bose's palette uses a monochromatic scheme with black, white, and a range of grays to create a modern, high-contrast look. Accent and semantic colors are reserved for functional UI feedback.
Primary black contrasts with white for maximum legibility.
Grays provide hierarchy and depth in UI elements.
Accent and semantic colors are used sparingly for clarity.
Psychology
Black and gray tones communicate sophistication, reliability, and technical precision. The restrained use of color emphasizes Bose's focus on quality and clarity.
Evolution
Bose's palette has remained largely stable, maintaining its black-and-gray core for decades. Minor adjustments have modernized the gray tones for digital clarity.
Where Bose uses each color
- Primary
Used for the logo, navigation bar backgrounds, and key CTAs.
- Secondary
Applied to secondary navigation, overlays, and product details.
- Accent
Used for text on dark backgrounds and high-contrast elements.
- Backgrounds
Light gray backgrounds are used for website and app screens.
- Text
Primary black and gray tones are used for all body and headline text.
- Semantic
Green, orange, red, and blue are used for success, warning, error, and info states in UI feedback.
Bose color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Bose primary color hex code is #000000. This black is used for the logo and major brand elements.
Bose Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100). These values ensure consistent reproduction across media.
Bose uses #F5F5F5 (Bose Light Gray) for backgrounds, #E0E0E0 (Bose Silver Gray) for surfaces, and #CCCCCC (Bose Border Gray) for borders. These neutrals provide structure and contrast in the interface.
Use Bose Black (#000000) for primary elements and text, with grays for backgrounds and secondary content. Accent and semantic colors should be used sparingly for UI states and highlights.
The secondary color is Bose Graphite, #222222, and the accent is Bose White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
5 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 Bose's colors consistently when it generates UI.
Make something in the spirit of Bose
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.