Pandora color palette
EntertainmentPandora's brand color system centers on a distinctive deep blue, complemented by light blues and neutral grays for a clean, digital-first identity. The palette is designed for clarity and accessibility across its music streaming platform.
pandora.comPandora colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Pandora BluePrimary34, 64, 153
- Pandora Sky BlueSecondary18, 144, 255
- Pandora AquaAccent0, 227, 227
Surfaces
Page, cards and dividers.- Pandora Light GrayBackground246, 247, 251
- Pandora WhiteSurface255, 255, 255
- Pandora Border GrayBorder220, 225, 235
Text
Three tiers of copy.- Pandora CharcoalText26, 26, 26
- Pandora Medium GraySecondary text90, 90, 90
- Pandora Muted GrayMuted text159, 166, 178
Semantic
Feedback and state colors.- Pandora Success GreenSuccess0, 184, 107
- Pandora Warning YellowWarning255, 180, 0
- Pandora Error RedError255, 59, 48
- Pandora Info BlueInfo18, 144, 255
Use Pandora's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
pandora-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1290FF;
--error: #FF3B30;
--accent: #00E3E3;
--border: #DCE1EB;
--primary: #224099;
--success: #00B86B;
--surface: #FFFFFF;
--warning: #FFB400;
--secondary: #1290FF;
--text-muted: #9FA6B2;
--background: #F6F7FB;
--text-primary: #1A1A1A;
--text-secondary: #5A5A5A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.3:1
Pass
Text on surface
Needs 4.5:1 for body text
17.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.9:1
Pass
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.4:1
Fail
Pandora background, border and text colors
The quiet part of the Pandora palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Pandora Light GrayBackground
- HEX
- RGB
- HSL
- Pandora WhiteSurface
- HEX
- RGB
- HSL
- Pandora Border GrayBorder
- HEX
- RGB
- HSL
- Pandora CharcoalText
- HEX
- RGB
- HSL
- Pandora Medium GraySecondary text
- HEX
- RGB
- HSL
- Pandora Muted GrayMuted text
- HEX
- RGB
- HSL
About Pandora's colors
Pandora's palette is anchored by a strong blue, conveying trust and digital innovation, with supporting light blues and neutrals for clarity. Accent and semantic colors are used sparingly to highlight actions and statuses.
Primary blue is complemented by lighter blue accents.
Neutral grays provide balance and readability.
Accent aqua is used for interactive elements.
Psychology
Blue evokes reliability and calm, aligning with Pandora's role as a trusted music platform. The use of light backgrounds and clear contrasts supports a user-friendly, approachable interface.
Evolution
Pandora's palette has remained stable since its 2016 rebrand, focusing on blue tones and clean neutrals. Minor adjustments have been made to accent and semantic colors for improved accessibility.
Where Pandora uses each color
- Primary
Pandora Blue is used for the logo, navigation bar, and primary buttons.
- Secondary
Pandora Sky Blue appears in active states, links, and highlights.
- Accent
Pandora Aqua is used for interactive elements such as toggles and selected icons.
- Backgrounds
Pandora Light Gray and White are used for app backgrounds and content surfaces.
- Text
Charcoal and Medium Gray are used for primary and secondary text throughout the UI.
- Semantic
Success, warning, and error colors are used for notifications, alerts, and status indicators.
Pandora color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Pandora primary color is #224099, known as Pandora Blue. This color is used for branding and key UI elements.
Pandora Blue (#224099) in RGB is (34, 64, 153). For print, its approximate CMYK is (78, 58, 0, 40).
Pandora uses #F6F7FB (Pandora Light Gray), #DCE1EB (Pandora Border Gray), #1A1A1A (Pandora Charcoal), and #9FA6B2 (Pandora Muted Gray) for backgrounds, borders, and text. These neutrals ensure readability and a clean interface.
Use Pandora Blue (#224099) for primary actions and branding, with Sky Blue (#1290FF) and Aqua (#00E3E3) for highlights and accents. Neutrals and semantic colors should be applied as specified for backgrounds, text, and status indicators.
The secondary color is Pandora Sky Blue, #1290FF, and the accent is Pandora Aqua, #00E3E3. 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 Pandora's colors consistently when it generates UI.
Make something in the spirit of Pandora
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.