Bandcamp color palette
EntertainmentBandcamp's color identity is defined by its distinctive teal blue, complemented by a minimalist grayscale UI and subtle accent tones. The palette emphasizes clarity, accessibility, and a focus on music content.
bandcamp.comBandcamp colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Bandcamp TealPrimary64, 130, 148
- Bandcamp CharcoalSecondary34, 34, 34
- Bandcamp Light TealAccent116, 179, 196
Surfaces
Page, cards and dividers.- Bandcamp WhiteBackground255, 255, 255
- Bandcamp Light GraySurface244, 244, 244
- Bandcamp Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Bandcamp Charcoal TextText34, 34, 34
- Bandcamp Medium Gray TextSecondary text102, 102, 102
- Bandcamp Muted Gray TextMuted text160, 160, 160
Semantic
Feedback and state colors.- Bandcamp Success GreenSuccess76, 183, 130
- Bandcamp Warning YellowWarning246, 183, 60
- Bandcamp Error RedError217, 83, 79
- Bandcamp Info TealInfo64, 130, 148
Use Bandcamp's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bandcamp-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #408294;
--error: #D9534F;
--accent: #74B3C4;
--border: #E5E5E5;
--primary: #408294;
--success: #4CB782;
--surface: #F4F4F4;
--warning: #F6B73C;
--secondary: #222222;
--text-muted: #A0A0A0;
--background: #FFFFFF;
--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
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.2:1
Pass
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.4:1
Fail
Bandcamp gray and neutral colors
The quiet part of the Bandcamp palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Bandcamp WhiteBackground
- HEX
- RGB
- HSL
- Bandcamp Light GraySurface
- HEX
- RGB
- HSL
- Bandcamp Border GrayBorder
- HEX
- RGB
- HSL
- Bandcamp Charcoal TextText
- HEX
- RGB
- HSL
- Bandcamp Medium Gray TextSecondary text
- HEX
- RGB
- HSL
- Bandcamp Muted Gray TextMuted text
- HEX
- RGB
- HSL
About Bandcamp's colors
Bandcamp's palette is built around a signature teal blue, supported by neutral grays and whites for a clean, content-focused interface. The use of color is restrained, with accent and semantic colors used sparingly for clarity.
Primary teal contrasts with white and charcoal for strong readability.
Accent light teal provides visual interest for links and highlights.
Grayscale tones unify the interface and keep music artwork central.
Psychology
The teal blue conveys creativity, trust, and calm, aligning with Bandcamp's artist-friendly ethos. Neutral grays and whites keep the focus on album art and content.
Evolution
Bandcamp's color palette has remained largely stable since its launch, maintaining its recognizable teal and minimalist UI. Minor adjustments to gray tones have improved accessibility and modernized the interface.
Where Bandcamp uses each color
- Primary
Used for the logo, navigation bar, and primary buttons.
- Secondary
Applied to headers, footers, and dark UI backgrounds.
- Accent
Highlights links, active states, and subtle UI elements.
- Backgrounds
White and light gray are used for page backgrounds and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the site.
- Semantic
Green, yellow, and red are used for success, warning, and error messages respectively.
Bandcamp color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Bandcamp primary color hex code is #408294. This teal is used for branding and key UI elements.
The RGB value of Bandcamp Teal (#408294) is 64, 130, 148. For CMYK, it is approximately 57, 12, 0, 42.
Bandcamp uses #222222 (Charcoal), #F4F4F4 (Light Gray), and #E5E5E5 (Border Gray) for its neutral UI backgrounds and text. These ensure readability and a minimalist aesthetic.
Use #408294 for primary actions and branding, with grays and white for backgrounds and text. Accent and semantic colors should be applied sparingly for highlights and status messages.
The secondary color is Bandcamp Charcoal, #222222, and the accent is Bandcamp Light Teal, #74B3C4. 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 Bandcamp's colors consistently when it generates UI.
Make something in the spirit of Bandcamp
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.