Heroku color palette
SaaSHeroku's color identity is defined by a distinctive deep purple, complemented by a cool palette of grays and accent blues. The colors are used consistently across its platform and branding to convey reliability and innovation.
heroku.comHeroku colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Heroku PurplePrimary67, 0, 152
- Heroku LavenderSecondary103, 98, 166
- Heroku Accent PurpleAccent142, 124, 195
Surfaces
Page, cards and dividers.- Heroku Light GrayBackground244, 243, 246
- Heroku WhiteSurface255, 255, 255
- Heroku Border GrayBorder209, 207, 228
Text
Three tiers of copy.- Heroku CharcoalText46, 46, 46
- Heroku LavenderSecondary text103, 98, 166
- Heroku Muted GrayMuted text167, 163, 194
Semantic
Feedback and state colors.- Heroku Success GreenSuccess39, 180, 126
- Heroku Warning OrangeWarning245, 166, 35
- Heroku Error RedError214, 66, 66
- Heroku Info BlueInfo60, 111, 200
Use Heroku's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
heroku-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3C6FC8;
--error: #D64242;
--accent: #8E7CC3;
--border: #D1CFE4;
--primary: #430098;
--success: #27B47E;
--surface: #FFFFFF;
--warning: #F5A623;
--secondary: #6762A6;
--text-muted: #A7A3C2;
--background: #F4F3F6;
--text-primary: #2E2E2E;
--text-secondary: #6762A6;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.3:1
Pass
Text on surface
Needs 4.5:1 for body text
13.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.4:1
Pass
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Heroku background, border and text colors
The quiet part of the Heroku palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Heroku Light GrayBackground
- HEX
- RGB
- HSL
- Heroku WhiteSurface
- HEX
- RGB
- HSL
- Heroku Border GrayBorder
- HEX
- RGB
- HSL
- Heroku CharcoalText
- HEX
- RGB
- HSL
- Heroku LavenderSecondary text
- HEX
- RGB
- HSL
- Heroku Muted GrayMuted text
- HEX
- RGB
- HSL
About Heroku's colors
Heroku's palette is centered on a rich purple, supported by cool grays and subtle accent hues. The combination creates a modern, trustworthy, and technical visual identity.
Primary purple is complemented by lighter lavender and accent purples.
Neutral grays provide balance and structure in UI elements.
Accent blue and green are used for status and feedback.
Psychology
Purple conveys creativity, sophistication, and technical expertise, aligning with Heroku's developer audience. The supporting grays and blues reinforce clarity and dependability.
Evolution
Heroku's palette has remained consistent, with purple as the core since its inception. Minor adjustments have been made to accent and neutral tones for improved accessibility and modernity.
Where Heroku uses each color
- Primary
Heroku Purple is used for the logo, primary navigation, and key call-to-action buttons.
- Secondary
Heroku Lavender appears in secondary navigation elements and highlights.
- Accent
Heroku Accent Purple is used for subtle highlights and interactive states.
- Backgrounds
Heroku Light Gray and White are used for page and card backgrounds.
- Text
Heroku Charcoal is the main text color, with Lavender and Muted Gray for secondary and muted text.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for status badges, alerts, and notifications.
Heroku color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Heroku primary color hex code is #430098. This deep purple is used for the logo and primary branding elements.
Heroku Purple (#430098) in RGB is (67, 0, 152). For CMYK, it is approximately (56, 100, 0, 40).
Heroku uses a range of grays including Heroku Light Gray (#F4F3F6), Border Gray (#D1CFE4), and Muted Gray (#A7A3C2) for backgrounds, borders, and muted text.
Use Heroku Purple (#430098) for primary actions and branding, with supporting colors for backgrounds, text, and semantic feedback. Maintain appropriate contrast and follow accessibility guidelines.
The secondary color is Heroku Lavender, #6762A6, and the accent is Heroku Accent Purple, #8E7CC3. 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 Heroku's colors consistently when it generates UI.
Make something in the spirit of Heroku
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.