JBL color palette
TechJBL's color identity centers on a vibrant orange-red, paired with deep black and clean white, reflecting its bold and energetic brand presence in audio technology. The palette is minimal, with strong contrasts and subtle grays for UI clarity.
jbl.comJBL colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- JBL OrangePrimary255, 51, 0
- JBL BlackSecondary0, 0, 0
- JBL WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- JBL Light GrayBackground245, 245, 245
- JBL Surface GraySurface224, 224, 224
- JBL Border GrayBorder204, 204, 204
Text
Three tiers of copy.- JBL CharcoalText34, 34, 34
- JBL Medium GraySecondary text102, 102, 102
- JBL Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- JBL Success GreenSuccess67, 160, 71
- JBL Warning AmberWarning255, 160, 0
- JBL Error RedError211, 47, 47
- JBL Info BlueInfo25, 118, 210
Use JBL's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
jbl-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #FF3300;
--success: #43A047;
--surface: #E0E0E0;
--warning: #FFA000;
--secondary: #000000;
--text-muted: #999999;
--background: #F5F5F5;
--text-primary: #222222;
--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
14.6:1
Pass
Text on surface
Needs 4.5:1 for body text
12.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.3:1
Fail
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
JBL gray and neutral colors
The quiet part of the JBL palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- JBL Light GrayBackground
- HEX
- RGB
- HSL
- JBL Surface GraySurface
- HEX
- RGB
- HSL
- JBL Border GrayBorder
- HEX
- RGB
- HSL
- JBL CharcoalText
- HEX
- RGB
- HSL
- JBL Medium GraySecondary text
- HEX
- RGB
- HSL
- JBL Muted GrayMuted text
- HEX
- RGB
- HSL
About JBL's colors
JBL's palette uses a high-contrast scheme with a signature orange-red as the focal point, balanced by black, white, and neutral grays. The minimal color set ensures brand recognition and UI legibility.
Primary orange-red contrasts with black and white.
Neutrals provide structure and clarity in interfaces.
Accent colors are used sparingly for status and feedback.
Psychology
The bold orange-red conveys energy, excitement, and modernity, aligning with JBL's audio innovation. Black and white add professionalism and clarity.
Evolution
JBL's palette has remained stable for years, with the orange-red consistently at its core. Minor adjustments to gray tones have improved digital accessibility.
Where JBL uses each color
- Primary
JBL Orange is used for logos, key buttons, and promotional highlights.
- Secondary
JBL Black appears in navigation bars, product backgrounds, and text.
- Accent
JBL White is used for text on dark backgrounds and as a background for product images.
- Backgrounds
JBL Light Gray is the main website and app background.
- Text
JBL Charcoal and Medium Gray are used for primary and secondary text respectively.
- Semantic
Green, amber, red, and blue are reserved for status indicators, alerts, and notifications.
JBL color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official JBL primary color is #FF3300, known as JBL Orange. This color is used across all major brand touchpoints.
JBL Orange (#FF3300) is RGB(255, 51, 0) and CMYK(0, 80, 100, 0). Use these values for print and digital consistency.
JBL uses a range of grays including JBL Light Gray (#F5F5F5), Surface Gray (#E0E0E0), and Border Gray (#CCCCCC) for backgrounds and UI elements. These ensure clarity and accessibility.
Use JBL Orange (#FF3300) for primary actions and highlights, with black and white for structure and contrast. Reserve semantic colors for alerts and status only.
The secondary color is JBL Black, #000000, and the accent is JBL White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
3 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 JBL's colors consistently when it generates UI.
Make something in the spirit of JBL
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.