Amplitude color palette
SaaSAmplitude uses a cool, modern palette centered on a distinctive blue, complemented by neutral grays and subtle accent colors for clarity and data visualization. The color system is designed for digital analytics interfaces, prioritizing accessibility and clear hierarchy.
amplitude.comAmplitude colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Amplitude BluePrimary45, 58, 140
- Amplitude IndigoSecondary92, 106, 196
- Amplitude SkyAccent0, 178, 255
Surfaces
Page, cards and dividers.- Amplitude CloudBackground247, 249, 250
- Amplitude WhiteSurface255, 255, 255
- Amplitude Border GrayBorder230, 232, 236
Text
Three tiers of copy.- Amplitude BlackText26, 26, 26
- Amplitude SlateSecondary text75, 85, 99
- Amplitude Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- Amplitude GreenSuccess0, 196, 140
- Amplitude GoldWarning255, 178, 0
- Amplitude RedError255, 77, 79
- Amplitude BlueInfo45, 58, 140
Use Amplitude's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
amplitude-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2D3A8C;
--error: #FF4D4F;
--accent: #00B2FF;
--border: #E6E8EC;
--primary: #2D3A8C;
--success: #00C48C;
--surface: #FFFFFF;
--warning: #FFB200;
--secondary: #5C6AC4;
--text-muted: #9CA3AF;
--background: #F7F9FA;
--text-primary: #1A1A1A;
--text-secondary: #4B5563;
}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.5: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
7.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.6: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.5:1
Fail
Amplitude background, border and text colors
The quiet part of the Amplitude palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Amplitude CloudBackground
- HEX
- RGB
- HSL
- Amplitude WhiteSurface
- HEX
- RGB
- HSL
- Amplitude Border GrayBorder
- HEX
- RGB
- HSL
- Amplitude BlackText
- HEX
- RGB
- HSL
- Amplitude SlateSecondary text
- HEX
- RGB
- HSL
- Amplitude Muted GrayMuted text
- HEX
- RGB
- HSL
About Amplitude's colors
Amplitude’s palette is built around a deep blue that conveys trust and intelligence, balanced with neutral grays for clarity and data focus. Accent colors are used sparingly to highlight key actions and data points.
Primary blue pairs with neutral backgrounds for contrast.
Accent blue and green highlight interactive elements.
Grays provide structure and hierarchy in UI.
Psychology
Blue is associated with trust, reliability, and professionalism, aligning with Amplitude’s analytics-driven brand. The use of green and gold for status signals supports quick comprehension and positive user experience.
Evolution
Amplitude’s palette has remained stable, with minor adjustments to blue and gray tones for improved accessibility. The brand has consistently prioritized clarity and usability in its color choices.
Where Amplitude uses each color
- Primary
Used for navigation bars, primary buttons, and key highlights throughout the app.
- Secondary
Appears in secondary buttons, tabs, and charts.
- Accent
Used for links, active states, and data visualization highlights.
- Backgrounds
Backgrounds use Amplitude Cloud and White for clean, minimal layouts.
- Text
Text colors are applied for headings, body copy, and muted UI elements.
- Semantic
Green, gold, and red are used for success, warning, and error states in notifications and charts.
Amplitude color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Amplitude brand color is Amplitude Blue, hex code #2D3A8C.
Amplitude Blue (#2D3A8C) in RGB is (45, 58, 140). For CMYK, it is approximately (68, 59, 0, 45).
Amplitude uses Amplitude Cloud (#F7F9FA), Border Gray (#E6E8EC), Slate (#4B5563), and Muted Gray (#9CA3AF) for backgrounds, borders, and text hierarchy.
Use Amplitude Blue for primary actions and navigation, with neutrals for backgrounds and surfaces. Accent and semantic colors are reserved for highlights, notifications, and data visualization.
The secondary color is Amplitude Indigo, #5C6AC4, and the accent is Amplitude Sky, #00B2FF. 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 Amplitude's colors consistently when it generates UI.
Make something in the spirit of Amplitude
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.