PostHog color palette
SaaSPostHog's color system is built around a stark black primary, complemented by bold red and a range of neutral grays for UI clarity. The palette emphasizes contrast and functional clarity across its analytics platform.
posthog.comPostHog colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- PostHog BlackPrimary0, 0, 0
- PostHog PinkSecondary255, 71, 126
- PostHog GoldAccent255, 179, 0
Surfaces
Page, cards and dividers.- PostHog WhiteBackground255, 255, 255
- PostHog Light GraySurface247, 248, 250
- PostHog Border GrayBorder229, 231, 235
Text
Three tiers of copy.- PostHog CharcoalText28, 28, 28
- PostHog Medium GraySecondary text107, 114, 128
- PostHog Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- PostHog GreenSuccess74, 222, 128
- PostHog YellowWarning250, 204, 21
- PostHog RedError244, 63, 94
- PostHog BlueInfo56, 189, 248
Use PostHog's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
posthog-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #38BDF8;
--error: #F43F5E;
--accent: #FFB300;
--border: #E5E7EB;
--primary: #000000;
--success: #4ADE80;
--surface: #F7F8FA;
--warning: #FACC15;
--secondary: #FF477E;
--text-muted: #9CA3AF;
--background: #FFFFFF;
--text-primary: #1C1C1C;
--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
17.0:1
Pass
Text on surface
Needs 4.5:1 for body text
16.0: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
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
PostHog background, border and text colors
The quiet part of the PostHog palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- PostHog WhiteBackground
- HEX
- RGB
- HSL
- PostHog Light GraySurface
- HEX
- RGB
- HSL
- PostHog Border GrayBorder
- HEX
- RGB
- HSL
- PostHog CharcoalText
- HEX
- RGB
- HSL
- PostHog Medium GraySecondary text
- HEX
- RGB
- HSL
- PostHog Muted GrayMuted text
- HEX
- RGB
- HSL
About PostHog's colors
PostHog's palette is high-contrast, using black and white as anchors with vivid accent tones for clarity and emphasis. The system supports both functional UI and brand recognition.
Primary black contrasts with white backgrounds for maximum legibility.
Accent pink and gold are used for highlights and calls to action.
A spectrum of grays structures surfaces and text hierarchy.
Psychology
The use of black conveys authority and seriousness, while pink and gold accents add energy and approachability. The neutral grays ensure readability and a modern, professional feel.
Evolution
PostHog's palette has remained stable, maintaining its black-centered identity since launch. Accent and semantic colors have been refined for improved accessibility and clarity.
Where PostHog uses each color
- Primary
Used for the logo, navigation bar, and primary buttons.
- Secondary
Appears in highlights, active states, and key UI elements.
- Accent
Used for notifications, badges, and call-to-action buttons.
- Backgrounds
White and light gray backgrounds are used throughout dashboards and app screens.
- Text
Charcoal and gray tones are used for headings, body text, and muted UI labels.
- Semantic
Green, yellow, red, and blue are used for status indicators, alerts, and informational banners.
PostHog color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official PostHog primary color hex code is #000000. This black is used for the logo and key brand elements.
The RGB value for PostHog Black (#000000) is 0, 0, 0. In CMYK, it is 0, 0, 0, 100.
PostHog uses a range of grays including #F7F8FA for surfaces, #E5E7EB for borders, #6B7280 for secondary text, and #9CA3AF for muted text. These neutrals provide structure and readability throughout the interface.
Use #000000 for primary navigation and branding, with #FF477E and #FFB300 as accents for interactive elements. Grays and semantic colors should be applied for backgrounds, text, and status indicators to maintain clarity and accessibility.
The secondary color is PostHog Pink, #FF477E, and the accent is PostHog Gold, #FFB300. 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 PostHog's colors consistently when it generates UI.
Make something in the spirit of PostHog
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.