Primary colors

Green is the primary color for QuickBooks. It is used strategically to call attention to elements on a page, and not used in large fields.

Light gray complements the green and occupies larger areas in a design. It plays an important role as a background in our photography system and has an essential role in information hierarchies in marketing and product UI.

Dark gray is our primary accent color.
Its unique mix creates a warmth that helps humanize our primary colors.

It’s a callout color and helps to establish information hierarchies. Use it wisely so that it doesn’t overpower the lighter gray. It also used as the primary color in our typography and makes it more ledigble on screen.

Secondary colors

A secondary color palette is mainly used for functions within the QuickBooks products. It is also used sparingly within marketing.

Great examples are flags, which announce important discounts. These colors can’t be more dominant than the primary QuickBooks primary colors (green, light gray, dark gray).

Color framework

The QuickBooks Design System applies color to set a visual tone, afford interaction and communicate meaning. This system is derived from the color proportion of our brand and industry best practices in data visualization.

Meaning

Money in / Income / Nav / Confirm   GREEN 03
Money out / Expense   TEAL 02
Liabilities / Tax / Loan   PINK 01
Blocker / Decline / Error   TURBOTAX RED
Mileage   PURPLE 03
Tooltips / Secondary nav   QB DK GRAY
Historical data   GRAY 04
Neutral   GRAY 03
Overdue   ORANGE 03
Warning / Critical   YELLOW 01
Info / Help / In-progress / Links   INTUIT BLUE
   
Accessibility pro tip

Don’t use color alone to indicate status. Include icons with text to make things clear. See accessibility guidelines

Color values and hex numbers

GREEN 01
CMYK:85/25/100/13
RGB:16/128/0
HEX:#108000
PMS:348
SASS:$green-01
QUICKBOOKS GREEN
CMYK:80/10/100/0
RGB:44/160/28
HEX:#2CA01C
PMS:362
SASS:$green-02
GREEN 03
CMYK:70/0/100/0
RGB:83/183/0
HEX:#53B700
PMS:361
SASS:$green-03
GREEN 04
CMYK:54/0/100/0
RGB:127/208/0
HEX:#7FD000
PMS:375
SASS:$green-04
GREEN 05
CMYK:37/0/97/0
RGB:169/232/56
HEX:#A9E838
PMS:374
SASS:$green-05
BLACK
CMYK:75/70/70/100
RGB:0/0/0
HEX:#000000
PMS:BLACK 6
SASS:$black
QUICKBOOKS DK GRAY
CMYK:70/63/58/50
RGB:57/58/61
HEX:#393A3D
PMS:432
SASS:$gray-01
GRAY 02
CMYK:60/50/45/15
RGB:107/108/114
HEX:#6B6C72
PMS:431
SASS:$gray-02
GRAY 03
CMYK:48/38/35/2
RGB:141/144/150
HEX:#8D9096
PMS:430
SASS:$gray-03
GRAY 04
CMYK:27/20/16/0
RGB:186/190/197
HEX:#BABEC5
PMS:429
SASS:$gray-04
GRAY 05
CMYK:15/10/9/0
RGB:212/215/220
HEX:#D4D7DC
PMS:427
SASS:$gray-05
GRAY 06
CMYK:0/0/0/0
RGB:227/229/232
HEX:#E3E5E8
PMS:N/A
SASS:$gray-06
QUICKBOOKS LT GRAY
CMYK:6/4/3/0
RGB:236/238/241
HEX:#ECEEF1
PMS:N/A
SASS:$gray-07
GRAY 08
CMYK:3/1/1/0
RGB:246/247/249
HEX:#F4F5F8
PMS:N/A
SASS:$gray-08
WHITE
CMYK:0/0/0/0
RGB:255/255/255
HEX:#FFFFFF
PMS:N/A
SASS:$white
BLUE
CMYK:100/74/15/0
RGB:5/83/147
HEX:#055393
PMS:7462
SASS:$blue-01
INTUIT BLUE
CMYK:85/49/0/0
RGB:0/119/197
HEX:#0077C5
PMS:285
SASS:$blue-02
BLUE 03
CMYK:74/30/0/0
RGB:0/151/230
HEX:#0097E6
PMS:2925
SASS:$blue-03
BLUE 04
CMYK:66/19/0/0
RGB:33/171/246
HEX:#21ABF6
PMS:2995
SASS:$blue-04
BLUE 05
CMYK:52/10/0/0
RGB:52/191/255
HEX:#34BFFF
PMS:2985
SASS:$blue-05
TEAL 01
CMYK:100/32/42/7
RGB:0/132/129
HEX:#008481
PMS:7713
SASS:$teal-01
TEAL 02
CMYK:100/11/38/0
RGB:0/166/164
HEX:#00A6A4
PMS:320
SASS:$teal-02
TEAL 03
CMYK:86/0/28/0
RGB:0/193/191
HEX:#00C1BF
PMS:7466
SASS:$teal-03
TEAL 04
CMYK:65/0/22/0
RGB:0/215/215
HEX:#00D7D7
PMS:319
SASS:$teal-04
TEAL 05
CMYK:50/0/15/0
RGB:21/239/233
HEX:#15EFE9
PMS:318
SASS:$teal-05
PURPLE 01
CMYK:87/100/0/0
RGB:78/43/143
HEX:#4E2B8F
PMS:2685
SASS:$purple-01
PURPLE 02
CMYK:74/87/0/0
RGB:100/54/175
HEX:#6436AF
PMS:267
SASS:$purple-02
PURPLE 03
CMYK:67/78/0/0
RGB:122/61/216
HEX:#7A3DD8
PMS:266
SASS:$purple-03
PURPLE 04
CMYK:60/70/0/0
RGB:148/87/250
HEX:#9457FA
PMS:2665
SASS:$purple-04
PURPLE 05
CMYK:38/40/0/0
RGB:168/152/255
HEX:#A898FF
PMS:2705
SASS:$purple-05
PINK 01
CMYK:36/100/36/10
RGB:156/0/94
HEX:#9C005E
PMS:676
SASS:$pink-01
PINK 02
CMYK:20/100/17/0
RGB:201/0/122
HEX:#C9007A
PMS:233
SASS:$pink-02
PINK 03
CMYK:7/93/0/0
RGB:227/28/158
HEX:#E31C9E
PMS:225
SASS:$pink-03
PINK 04
CMYK:8/75/0/0
RGB:255/89/204
HEX:#FF59CC
PMS:238
SASS:$pink-04
PINK 05
CMYK:10/52/0/0
RGB:255/136/236
HEX:#FF88EC
PMS:223
SASS:$pink-05
RED 01
CMYK:0/100/90/30
RGB:184/0/0
HEX:#B80000
PMS:7621
SASS:$red-01
TURBOTAX RED
CMYK:0/97/100/0
RGB:213/43/30
HEX:#D52B1E
PMS:485
SASS:$red-02
RED 03
CMYK:5/93/88/0
RGB:228/56/52
HEX:#E43834
PMS:179
SASS:$red-03
RED 04
CMYK:0/80/65/0
RGB:242/90/82
HEX:#F25A52
PMS:7416
SASS:$red-04
RED 05
CMYK:0/58/45/0
RGB:255/137/120
HEX:#FF8979
PMS:170
SASS:$red-05
ORANGE 01
CMYK:0/80/100/0
RGB:249/87/0
HEX:#F95700
PMS:1655
SASS:$orange-01
CTA ORANGE
CMYK:0/72/100/0
RGB:255/106/0
HEX:#FF6A00
PMS:1505
SASS:$orange-02
ORANGE 03
CMYK:0/60/100/0
RGB:255/128/0
HEX:#FF8000
PMS:151
SASS:$orange-03
ORANGE 04
CMYK:0/50/88/0
RGB:255/147/49
HEX:#FF9331
PMS:1495
SASS:$orange-04
ORANGE 05
CMYK:0/38/70/0
RGB:255/172/97
HEX:#FFAC61
PMS:1485
SASS:$orange-05
YELLOW 01
CMYK:0/36/100/0
RGB:255/173/0
HEX:#FFAD00
PMS:137
SASS:$yellow-01
YELLOW 02
CMYK:0/30/100/0
RGB:255/187/0
HEX:#FFBB00
PMS:1235
SASS:$yellow-02
YELLOW 03
CMYK:0/20/100/0
RGB:255/202/0
HEX:#FFCA00
PMS:7548
SASS:$yellow-03
YELLOW 04
CMYK:0/10/100/0
RGB:255/220/0
HEX:#FFDC00
PMS:108
SASS:$yellow-04
YELLOW 05
CMYK:0/0/100/0
RGB:255/238/0
HEX:#FFEE00
PMS:803
SASS:$yellow-05

 

  • Was this Helpful?
  •