Gusto color palette
SaaSGusto's color identity is defined by its signature coral red, complemented by soft neutrals and subtle accent colors for a friendly, accessible SaaS experience. The palette is consistent across its website and product UI, emphasizing clarity and warmth.
gusto.comGusto colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Gusto CoralPrimary244, 93, 72
- Gusto Light CoralSecondary249, 187, 174
- Gusto PurpleAccent138, 75, 175
Surfaces
Page, cards and dividers.- Gusto WhiteBackground255, 255, 255
- Gusto SurfaceSurface247, 246, 243
- Gusto Border GrayBorder229, 227, 223
Text
Three tiers of copy.- Gusto CharcoalText45, 41, 38
- Gusto Medium GraySecondary text110, 107, 104
- Gusto Light GrayMuted text167, 163, 160
Semantic
Feedback and state colors.- Gusto GreenSuccess43, 196, 138
- Gusto YellowWarning249, 200, 70
- Gusto RedError224, 60, 49
- Gusto BlueInfo60, 109, 240
Use Gusto's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
gusto-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3C6DF0;
--error: #E03C31;
--accent: #8A4BAF;
--border: #E5E3DF;
--primary: #F45D48;
--success: #2BC48A;
--surface: #F7F6F3;
--warning: #F9C846;
--secondary: #F9BBAE;
--text-muted: #A7A3A0;
--background: #FFFFFF;
--text-primary: #2D2926;
--text-secondary: #6E6B68;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.4:1
Pass
Text on surface
Needs 4.5:1 for body text
13.3: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
4.9: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.3:1
Fail
Gusto background, border and text colors
The quiet part of the Gusto palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Gusto WhiteBackground
- HEX
- RGB
- HSL
- Gusto SurfaceSurface
- HEX
- RGB
- HSL
- Gusto Border GrayBorder
- HEX
- RGB
- HSL
- Gusto CharcoalText
- HEX
- RGB
- HSL
- Gusto Medium GraySecondary text
- HEX
- RGB
- HSL
- Gusto Light GrayMuted text
- HEX
- RGB
- HSL
About Gusto's colors
Gusto’s palette centers on a warm coral for approachability, balanced with soft neutrals and purposeful accent colors. The system is designed for clarity, accessibility, and a friendly digital experience.
Primary coral is paired with soft backgrounds for contrast.
Accent purple and blue are used sparingly for highlights.
Neutrals unify UI elements and reinforce readability.
Psychology
The coral red conveys warmth, friendliness, and approachability, aligning with Gusto’s people-first brand. Subtle neutrals and accents support a sense of trust and professionalism.
Evolution
Gusto’s palette has remained stable, with coral as the anchor since its early brand refreshes. Minor adjustments have refined the neutrals and accent colors for improved accessibility and consistency.
Where Gusto uses each color
- Primary
Used for main call-to-action buttons, highlights, and key navigation elements.
- Secondary
Applied to secondary buttons, backgrounds, and subtle UI highlights.
- Accent
Used for links, badges, and small interactive elements to draw attention.
- Backgrounds
The white and surface colors are used for page backgrounds and card surfaces throughout the product.
- Text
Charcoal and gray tones are used for primary and secondary text, ensuring readability.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and informational states in UI feedback.
Gusto color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Gusto primary color is #F45D48, known as Gusto Coral. It is used for main actions and brand highlights.
Gusto Coral (#F45D48) is RGB(244, 93, 72) and CMYK(0, 62, 70, 4). Use these values for print and digital consistency.
Gusto uses several neutrals: Gusto Charcoal (#2D2926) for primary text, Gusto Medium Gray (#6E6B68) for secondary text, and Gusto Border Gray (#E5E3DF) for UI borders. These ensure a clean, readable interface.
Use Gusto Coral (#F45D48) for primary actions, neutrals for backgrounds and text, and accents for highlights or semantic states. Maintain contrast and accessibility by following the official guidelines for each color role.
The secondary color is Gusto Light Coral, #F9BBAE, and the accent is Gusto Purple, #8A4BAF. 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 Gusto's colors consistently when it generates UI.
Make something in the spirit of Gusto
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.