Mixpanel color palette
SaaSMixpanel's color system centers on a distinctive purple primary, supported by a modern palette of deep neutrals and vibrant accents for clarity and usability in digital analytics interfaces.
mixpanel.comMixpanel colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Mixpanel PurplePrimary120, 86, 255
- Mixpanel TealSecondary0, 230, 208
- Mixpanel GoldAccent255, 185, 90
Surfaces
Page, cards and dividers.- Mixpanel Light GrayBackground247, 248, 250
- Mixpanel WhiteSurface255, 255, 255
- Mixpanel Border GrayBorder227, 230, 235
Text
Three tiers of copy.- Mixpanel BlackText26, 26, 26
- Mixpanel SlateSecondary text91, 95, 107
- Mixpanel Muted GrayMuted text158, 162, 171
Semantic
Feedback and state colors.- Mixpanel GreenSuccess0, 210, 122
- Mixpanel GoldWarning255, 185, 90
- Mixpanel RedError255, 92, 92
- Mixpanel BlueInfo59, 130, 246
Use Mixpanel's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mixpanel-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #FF5C5C;
--accent: #FFB95A;
--border: #E3E6EB;
--primary: #7856FF;
--success: #00D27A;
--surface: #FFFFFF;
--warning: #FFB95A;
--secondary: #00E6D0;
--text-muted: #9EA2AB;
--background: #F7F8FA;
--text-primary: #1A1A1A;
--text-secondary: #5B5F6B;
}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.4: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.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.4:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Mixpanel background, border and text colors
The quiet part of the Mixpanel palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Mixpanel Light GrayBackground
- HEX
- RGB
- HSL
- Mixpanel WhiteSurface
- HEX
- RGB
- HSL
- Mixpanel Border GrayBorder
- HEX
- RGB
- HSL
- Mixpanel BlackText
- HEX
- RGB
- HSL
- Mixpanel SlateSecondary text
- HEX
- RGB
- HSL
- Mixpanel Muted GrayMuted text
- HEX
- RGB
- HSL
About Mixpanel's colors
Mixpanel's palette is built around a bold purple, contrasted with bright accents and a foundation of clean neutrals. The system is designed for high usability and visual clarity in analytics dashboards.
Primary purple paired with teal and gold for emphasis
Deep neutrals for backgrounds and surfaces
Accent colors highlight key metrics and actions
Psychology
Purple conveys creativity and innovation, aligning with Mixpanel's focus on data insights. Teal and gold add energy and approachability to the interface.
Evolution
Mixpanel's palette has remained consistent since its 2020 rebrand, with minor adjustments to accent and neutral tones for improved accessibility. The core purple has been a constant brand anchor.
Where Mixpanel uses each color
- Primary
Used for main navigation, primary buttons, and key highlights across the Mixpanel app.
- Secondary
Appears in charts, secondary buttons, and UI highlights.
- Accent
Used for notifications, badges, and to draw attention to important metrics.
- Backgrounds
Light gray and white backgrounds provide a neutral base for data visualization.
- Text
Black and slate tones are used for primary and secondary text throughout the interface.
- Semantic
Green, gold, red, and blue are used for status indicators, alerts, and contextual feedback.
Mixpanel color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Mixpanel primary color is #7856FF, known as Mixpanel Purple. This is used for main branding and interface highlights.
Mixpanel Purple (#7856FF) has an RGB value of (120, 86, 255). For CMYK, it is approximately (53, 66, 0, 0).
Mixpanel uses #F7F8FA (Light Gray), #E3E6EB (Border Gray), #5B5F6B (Slate), and #9EA2AB (Muted Gray) for backgrounds and text. These neutrals support clarity and readability in the UI.
Use Mixpanel Purple (#7856FF) for primary actions and branding, with teal and gold as accents. Neutrals are reserved for backgrounds, surfaces, and text to ensure data stands out.
The secondary color is Mixpanel Teal, #00E6D0, and the accent is Mixpanel Gold, #FFB95A. 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 Mixpanel's colors consistently when it generates UI.
Make something in the spirit of Mixpanel
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.