Hotjar color palette
SaaSHotjar's color identity is defined by its vibrant red-orange primary color, complemented by a minimal, neutral UI palette. The brand uses bold accents and clear, accessible grays to maintain clarity and focus in its SaaS product interface.
hotjar.comHotjar colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hotjar Red-OrangePrimary255, 60, 0
- Hotjar CharcoalSecondary26, 26, 26
- Hotjar YellowAccent255, 193, 0
Surfaces
Page, cards and dividers.- Hotjar WhiteBackground255, 255, 255
- Hotjar Light GraySurface247, 248, 250
- Hotjar Border GrayBorder230, 232, 235
Text
Three tiers of copy.- Hotjar CharcoalText26, 26, 26
- Hotjar Medium GraySecondary text107, 107, 107
- Hotjar Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Hotjar Success GreenSuccess0, 196, 140
- Hotjar Warning YellowWarning255, 184, 0
- Hotjar Red-OrangeError255, 60, 0
- Hotjar Info BlueInfo0, 153, 248
Use Hotjar's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hotjar-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099F8;
--error: #FF3C00;
--accent: #FFC100;
--border: #E6E8EB;
--primary: #FF3C00;
--success: #00C48C;
--surface: #F7F8FA;
--warning: #FFB800;
--secondary: #1A1A1A;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #6B6B6B;
}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.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.0: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
Hotjar background, border and text colors
The quiet part of the Hotjar palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hotjar WhiteBackground
- HEX
- RGB
- HSL
- Hotjar Light GraySurface
- HEX
- RGB
- HSL
- Hotjar Border GrayBorder
- HEX
- RGB
- HSL
- Hotjar CharcoalText
- HEX
- RGB
- HSL
- Hotjar Medium GraySecondary text
- HEX
- RGB
- HSL
- Hotjar Muted GrayMuted text
- HEX
- RGB
- HSL
About Hotjar's colors
Hotjar's palette is built around a high-contrast, energetic red-orange, balanced by neutral grays and white for clarity. The accent yellow and green provide visual cues for status and interactivity.
Primary red-orange is complemented by neutral backgrounds.
Accent yellow and green are used for highlights and status.
Dark gray provides contrast for text and navigation.
Psychology
The red-orange primary conveys energy, urgency, and approachability, encouraging user engagement. Neutral grays and whites ensure the interface remains clean and focused.
Evolution
Hotjar's palette has remained consistent, with the primary color unchanged since early brand iterations. The supporting neutrals and accents have been refined for accessibility and modern UI standards.
Where Hotjar uses each color
- Primary
Used for main action buttons, highlights, and the Hotjar logo.
- Secondary
Appears in navigation bars, footers, and key UI backgrounds.
- Accent
Used for notification badges, highlights, and status indicators.
- Backgrounds
White and light gray are used for app backgrounds and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, and blue indicate success, warnings, and informational messages respectively.
Hotjar color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hotjar primary color hex code is #FF3C00. This vibrant red-orange is used for key branding and UI actions.
The RGB value for #FF3C00 is (255, 60, 0). For print, the closest CMYK is (0, 76, 100, 0).
Hotjar uses #1A1A1A (Charcoal), #6B6B6B (Medium Gray), #A3A3A3 (Muted Gray), and #F7F8FA (Light Gray) for its neutral UI elements. These ensure accessibility and clarity across the interface.
Use #FF3C00 for primary actions and highlights, with neutral grays and whites for backgrounds and text. Accent colors like #FFC100 and #00C48C are reserved for notifications and status indicators.
The secondary color is Hotjar Charcoal, #1A1A1A, and the accent is Hotjar Yellow, #FFC100. 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 Hotjar's colors consistently when it generates UI.
Make something in the spirit of Hotjar
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.