QuickBooks color palette
SaaSQuickBooks uses a vibrant green as its signature color, paired with a clean palette of neutrals and subtle blues for clarity and professionalism. The color system supports a trustworthy, approachable SaaS experience for financial management.
quickbooks.intuit.comQuickBooks colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- QuickBooks GreenPrimary44, 160, 28
- QuickBooks BlueSecondary0, 119, 197
- QuickBooks TealAccent0, 191, 165
Surfaces
Page, cards and dividers.- QuickBooks WhiteBackground255, 255, 255
- QuickBooks Light GraySurface245, 246, 248
- QuickBooks Border GrayBorder212, 215, 220
Text
Three tiers of copy.- QuickBooks CharcoalText45, 45, 45
- QuickBooks Medium GraySecondary text107, 108, 114
- QuickBooks Muted GrayMuted text166, 166, 166
Semantic
Feedback and state colors.- QuickBooks Success GreenSuccess44, 160, 28
- QuickBooks Warning YellowWarning255, 181, 0
- QuickBooks Error RedError217, 57, 0
- QuickBooks Info BlueInfo0, 119, 197
Use QuickBooks's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
quickbooks-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0077C5;
--error: #D93900;
--accent: #00BFA5;
--border: #D4D7DC;
--primary: #2CA01C;
--success: #2CA01C;
--surface: #F5F6F8;
--warning: #FFB500;
--secondary: #0077C5;
--text-muted: #A6A6A6;
--background: #FFFFFF;
--text-primary: #2D2D2D;
--text-secondary: #6B6C72;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.8:1
Pass
Text on surface
Needs 4.5:1 for body text
12.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.8:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
QuickBooks background, border and text colors
The quiet part of the QuickBooks palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- QuickBooks WhiteBackground
- HEX
- RGB
- HSL
- QuickBooks Light GraySurface
- HEX
- RGB
- HSL
- QuickBooks Border GrayBorder
- HEX
- RGB
- HSL
- QuickBooks CharcoalText
- HEX
- RGB
- HSL
- QuickBooks Medium GraySecondary text
- HEX
- RGB
- HSL
- QuickBooks Muted GrayMuted text
- HEX
- RGB
- HSL
About QuickBooks's colors
QuickBooks' palette is centered around a distinctive green, complemented by blues and a range of neutral grays. The system is designed for clarity, accessibility, and trust in financial contexts.
Primary green is paired with blue for calls to action.
Neutral grays provide structure and readability.
Accent teal adds vibrancy to highlights and links.
Psychology
Green is associated with growth, stability, and prosperity, reinforcing QuickBooks' financial focus. Blues and grays convey reliability and professionalism.
Evolution
The core green has remained consistent since QuickBooks' early branding, with minor adjustments for digital accessibility. The neutral and blue tones have been refined for modern UI clarity.
Where QuickBooks uses each color
- Primary
Used for main navigation, primary buttons, and highlights throughout the app.
- Secondary
Appears in secondary buttons, links, and informational banners.
- Accent
Used for icons, active states, and subtle highlights in the UI.
- Backgrounds
White and light gray backgrounds are used for content areas and cards.
- Text
Charcoal and gray tones are used for headings, body text, and muted labels.
- Semantic
Success, warning, and error colors are used for alerts, notifications, and status indicators.
QuickBooks color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official QuickBooks primary color is #2CA01C. This green is used for branding and key UI elements.
QuickBooks Green (#2CA01C) in RGB is (44, 160, 28). For CMYK, it is approximately (72, 0, 83, 37).
QuickBooks uses a range of grays such as #F5F6F8 (Light Gray), #D4D7DC (Border Gray), #2D2D2D (Charcoal), and #6B6C72 (Medium Gray) for backgrounds, borders, and text. These ensure readability and a clean interface.
Use #2CA01C for primary actions and branding, with blues and teals for secondary actions and highlights. Neutral grays structure the UI, while semantic colors (#2CA01C, #FFB500, #D93900) are reserved for status and alerts.
The secondary color is QuickBooks Blue, #0077C5, and the accent is QuickBooks Teal, #00BFA5. 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 QuickBooks's colors consistently when it generates UI.
Make something in the spirit of QuickBooks
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.