Shazam color palette
EntertainmentShazam's color identity centers on a vibrant blue, complemented by clean white and deep gray tones for a modern, digital feel. The palette is designed for clarity, recognition, and energy across its app and web interfaces.
shazam.comShazam colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Shazam BluePrimary0, 136, 255
- Shazam Deep BlueSecondary0, 95, 204
- Shazam CyanAccent0, 226, 255
Surfaces
Page, cards and dividers.- Shazam WhiteBackground255, 255, 255
- Shazam Light GraySurface244, 246, 248
- Shazam Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Shazam BlackText34, 34, 34
- Shazam Medium GraySecondary text107, 114, 128
- Shazam Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- Shazam GreenSuccess0, 200, 83
- Shazam YellowWarning255, 179, 0
- Shazam RedError255, 59, 48
- Shazam Info BlueInfo23, 162, 184
Use Shazam's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
shazam-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #17A2B8;
--error: #FF3B30;
--accent: #00E2FF;
--border: #D1D5DB;
--primary: #0088FF;
--success: #00C853;
--surface: #F4F6F8;
--warning: #FFB300;
--secondary: #005FCC;
--text-muted: #A0AEC0;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #6B7280;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.5:1
Fail
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Shazam background, border and text colors
The quiet part of the Shazam palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Shazam WhiteBackground
- HEX
- RGB
- HSL
- Shazam Light GraySurface
- HEX
- RGB
- HSL
- Shazam Border GrayBorder
- HEX
- RGB
- HSL
- Shazam BlackText
- HEX
- RGB
- HSL
- Shazam Medium GraySecondary text
- HEX
- RGB
- HSL
- Shazam Muted GrayMuted text
- HEX
- RGB
- HSL
About Shazam's colors
Shazam's palette is anchored by a vivid blue, evoking trust and digital innovation, with supporting neutrals for clarity. Accent colors are used sparingly to highlight interactive elements and status messages.
Primary blue is complemented by deep blue and cyan for depth and vibrancy.
Neutrals provide contrast and readability.
Accent and semantic colors signal status and interactivity.
Psychology
Blue conveys reliability and technological prowess, aligning with Shazam's identity as a music discovery tool. The clean neutrals support a modern, accessible user experience.
Evolution
Shazam's palette has remained consistent since its major rebrand, with blue always at the center. Minor adjustments have been made to accent and neutral tones for improved accessibility.
Where Shazam uses each color
- Primary
Used for the app icon, main navigation bar, and primary call-to-action buttons.
- Secondary
Appears in gradients, hover states, and secondary buttons.
- Accent
Used for highlights, interactive elements, and loading animations.
- Backgrounds
White and light gray are used for app screens and web backgrounds.
- Text
Black and gray tones are used for primary, secondary, and muted text throughout the UI.
- Semantic
Green, yellow, and red are used for success, warning, and error states in notifications and status indicators.
Shazam color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Shazam primary color is #0088FF, known as Shazam Blue. This color is used prominently in the app and branding.
Shazam Blue (#0088FF) has an RGB value of (0, 136, 255) and a CMYK value of (100, 47, 0, 0). Use these values for print or digital consistency.
Shazam uses #F4F6F8 (Shazam Light Gray), #D1D5DB (Shazam Border Gray), #6B7280 (Shazam Medium Gray), and #A0AEC0 (Shazam Muted Gray) for backgrounds, borders, and text. These ensure legibility and a clean interface.
Use Shazam Blue (#0088FF) for primary actions and branding, with supporting blues and neutrals for structure and clarity. Accent and semantic colors should be reserved for interactive or status-specific elements.
The secondary color is Shazam Deep Blue, #005FCC, and the accent is Shazam Cyan, #00E2FF. 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 Shazam's colors consistently when it generates UI.
Make something in the spirit of Shazam
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.