HubSpot color palette
SaaSHubSpot's color system features a distinctive orange as its primary brand color, complemented by a warm, approachable palette of blues, grays, and accent tones. The palette is designed for clarity, accessibility, and a friendly SaaS interface.
hubspot.comHubSpot colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- HubSpot OrangePrimary255, 122, 89
- HubSpot NavySecondary51, 71, 91
- HubSpot TealAccent0, 164, 189
Surfaces
Page, cards and dividers.- HubSpot WhiteBackground255, 255, 255
- HubSpot Light GraySurface245, 248, 250
- HubSpot Border GrayBorder209, 224, 229
Text
Three tiers of copy.- HubSpot NavyText51, 71, 91
- HubSpot Medium GraySecondary text122, 134, 154
- HubSpot Muted GrayMuted text176, 184, 193
Semantic
Feedback and state colors.- HubSpot Success GreenSuccess0, 189, 165
- HubSpot Warning YellowWarning255, 199, 89
- HubSpot Error RedError255, 92, 92
- HubSpot Info BlueInfo90, 200, 250
Use HubSpot's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hubspot-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #5AC8FA;
--error: #FF5C5C;
--accent: #00A4BD;
--border: #D1E0E5;
--primary: #FF7A59;
--success: #00BDA5;
--surface: #F5F8FA;
--warning: #FFC759;
--secondary: #33475B;
--text-muted: #B0B8C1;
--background: #FFFFFF;
--text-primary: #33475B;
--text-secondary: #7A869A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
9.6:1
Pass
Text on surface
Needs 4.5:1 for body text
9.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
3.7:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
3.5:1
Fail
Muted text on background
Needs 3:1 for large text
2.0:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
HubSpot background, border and text colors
The quiet part of the HubSpot palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- HubSpot WhiteBackground
- HEX
- RGB
- HSL
- HubSpot Light GraySurface
- HEX
- RGB
- HSL
- HubSpot Border GrayBorder
- HEX
- RGB
- HSL
- HubSpot NavyText
- HEX
- RGB
- HSL
- HubSpot Medium GraySecondary text
- HEX
- RGB
- HSL
- HubSpot Muted GrayMuted text
- HEX
- RGB
- HSL
About HubSpot's colors
HubSpot's palette is built around a vibrant orange, contrasted with deep navy and balanced by cool teals and neutral grays. The system is designed for high legibility and a welcoming, professional appearance.
Primary orange contrasts with navy for visual hierarchy.
Teal and blue accents provide balance and highlight actions.
Neutral grays support readability and accessibility.
Psychology
The orange conveys energy, friendliness, and approachability, while navy and teal add trust and stability. The palette is intended to foster a sense of innovation and reliability.
Evolution
HubSpot's core orange and navy have remained consistent since its early brand guidelines. Over time, the supporting palette has expanded to include more nuanced grays and accent colors for digital interfaces.
Where HubSpot uses each color
- Primary
Used for main CTAs, highlights, and brand marks across the website and product UI.
- Secondary
Appears in navigation bars, headings, and key interface elements.
- Accent
Used for links, secondary buttons, and interactive highlights.
- Backgrounds
White and light gray backgrounds are used for app screens and web pages.
- Text
Navy is the primary text color, with medium and muted grays for secondary and disabled text.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and informational states respectively.
HubSpot color questions
Hex codes, RGB values, neutrals and how to use the palette.
The HubSpot primary color hex code is #FF7A59. This orange is used for key branding and interface highlights.
HubSpot Orange (#FF7A59) is RGB(255, 122, 89) and CMYK(0, 52, 65, 0). Use these values for print and digital consistency.
HubSpot uses a range of grays such as #F5F8FA (Light Gray), #D1E0E5 (Border Gray), #7A869A (Medium Gray), and #B0B8C1 (Muted Gray) for backgrounds, borders, and text. These support readability and accessibility across the platform.
Use HubSpot Orange (#FF7A59) for primary actions and highlights, navy (#33475B) for text and navigation, and teal (#00A4BD) for accents. Grays and semantic colors provide structure and feedback within the UI.
The secondary color is HubSpot Navy, #33475B, and the accent is HubSpot Teal, #00A4BD. Together with the primary they make up the three brand colors at the top of this page.
2 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 HubSpot's colors consistently when it generates UI.
Make something in the spirit of HubSpot
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.