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
   

Color values and hex numbers

GREEN 01
CMYK:85/25/100/13
RGB:16/128/0
HEX:#108000
PMS:348
SASS:$green01
QUICKBOOKS GREEN
CMYK:80/10/100/0
RGB:44/160/28
HEX:#2CA01C
PMS:362
SASS:$green02
GREEN 03
CMYK:70/0/100/0
RGB:83/183/0
HEX:#53B700
PMS:361
SASS:$green03
GREEN 04
CMYK:54/0/100/0
RGB:127/208/0
HEX:#7FD000
PMS:375
SASS:$green04
GREEN 05
CMYK:37/0/97/0
RGB:169/232/56
HEX:#A9E838
PMS:374
SASS:$green05
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:$gray01
GRAY 02
CMYK:60/50/45/15
RGB:107/108/114
HEX:#6B6C72
PMS:431
SASS:$gray02
GRAY 03
CMYK:48/38/35/2
RGB:141/144/150
HEX:#8D9096
PMS:430
SASS:$gray03
GRAY 04
CMYK:27/20/16/0
RGB:186/190/197
HEX:#BABEC5
PMS:429
SASS:$gray04
GRAY 05
CMYK:15/10/9/0
RGB:212/215/220
HEX:#D4D7DC
PMS:427
SASS:$gray05
GRAY 06
CMYK:0/0/0/0
RGB:227/229/232
HEX:#E3E5E8
PMS:N/A
SASS:$gray06
QUICKBOOKS LT GRAY
CMYK:6/4/3/0
RGB:236/238/241
HEX:#ECEEF1
PMS:N/A
SASS:$gray07
GRAY 08
CMYK:3/1/1/0
RGB:246/247/249
HEX:#F4F5F8
PMS:N/A
SASS:$gray08
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:$blue01
INTUIT BLUE
CMYK:85/49/0/0
RGB:0/119/197
HEX:#0077C5
PMS:285
SASS:$blue02
BLUE 03
CMYK:74/30/0/0
RGB:0/151/230
HEX:#0097E6
PMS:2925
SASS:$blue03
BLUE 04
CMYK:66/19/0/0
RGB:33/171/246
HEX:#21ABF6
PMS:2995
SASS:$blue04
BLUE 05
CMYK:52/10/0/0
RGB:52/191/255
HEX:#34BFFF
PMS:2985
SASS:$blue05
TEAL 01
CMYK:100/32/42/7
RGB:0/132/129
HEX:#008481
PMS:7713
SASS:$teal01
TEAL 02
CMYK:100/11/38/0
RGB:0/166/164
HEX:#00A6A4
PMS:320
SASS:$teal02
TEAL 03
CMYK:86/0/28/0
RGB:0/193/191
HEX:#00C1BF
PMS:7466
SASS:$teal03
TEAL 04
CMYK:65/0/22/0
RGB:0/215/215
HEX:#00D7D7
PMS:319
SASS:$teal04
TEAL 05
CMYK:50/0/15/0
RGB:21/239/233
HEX:#15EFE9
PMS:318
SASS:$teal05
PURPLE 01
CMYK:87/100/0/0
RGB:78/43/143
HEX:#4E2B8F
PMS:2685
SASS:$purple01
PURPLE 02
CMYK:74/87/0/0
RGB:100/54/175
HEX:#6436AF
PMS:267
SASS:$purple02
PURPLE 03
CMYK:67/78/0/0
RGB:122/61/216
HEX:#7A3DD8
PMS:266
SASS:$purple03
PURPLE 04
CMYK:60/70/0/0
RGB:148/87/250
HEX:#9457FA
PMS:2665
SASS:$purple04
PURPLE 05
CMYK:38/40/0/0
RGB:168/152/255
HEX:#A898FF
PMS:2705
SASS:$purple05
PINK 01
CMYK:36/100/36/10
RGB:156/0/94
HEX:#9C005E
PMS:676
SASS:$pink01
PINK 02
CMYK:20/100/17/0
RGB:201/0/122
HEX:#C9007A
PMS:233
SASS:$pink02
PINK 03
CMYK:7/93/0/0
RGB:227/28/158
HEX:#E31C9E
PMS:225
SASS:$pink03
PINK 04
CMYK:8/75/0/0
RGB:255/89/204
HEX:#FF59CC
PMS:238
SASS:$pink04
PINK 05
CMYK:10/52/0/0
RGB:255/136/236
HEX:#FF88EC
PMS:223
SASS:$pink05
RED 01
CMYK:0/100/90/30
RGB:184/0/0
HEX:#B80000
PMS:7621
SASS:$red01
TURBOTAX RED
CMYK:0/97/100/0
RGB:213/43/30
HEX:#D52B1E
PMS:485
SASS:$red02
RED 03
CMYK:5/93/88/0
RGB:228/56/52
HEX:#E43834
PMS:179
SASS:$red03
RED 04
CMYK:0/80/65/0
RGB:242/90/82
HEX:#F25A52
PMS:7416
SASS:$red04
RED 05
CMYK:0/58/45/0
RGB:255/137/120
HEX:#FF8979
PMS:170
SASS:$red05
ORANGE 01
CMYK:0/80/100/0
RGB:249/87/0
HEX:#F95700
PMS:1655
SASS:$orange01
CTA ORANGE
CMYK:0/72/100/0
RGB:255/106/0
HEX:#FF6A00
PMS:1505
SASS:$orange02
ORANGE 03
CMYK:0/60/100/0
RGB:255/128/0
HEX:#FF8000
PMS:151
SASS:$orange03
ORANGE 04
CMYK:0/50/88/0
RGB:255/147/49
HEX:#FF9331
PMS:1495
SASS:$orange04
ORANGE 05
CMYK:0/38/70/0
RGB:255/172/97
HEX:#FFAC61
PMS:1485
SASS:$orange05
YELLOW 01
CMYK:0/36/100/0
RGB:255/173/0
HEX:#FFAD00
PMS:137
SASS:$yellow01
YELLOW 02
CMYK:0/30/100/0
RGB:255/187/0
HEX:#FFBB00
PMS:1235
SASS:$yellow02
YELLOW 03
CMYK:0/20/100/0
RGB:255/202/0
HEX:#FFCA00
PMS:7548
SASS:$yellow03
YELLOW 04
CMYK:0/10/100/0
RGB:255/220/0
HEX:#FFDC00
PMS:108
SASS:$yellow04
YELLOW 05
CMYK:0/0/100/0
RGB:255/238/0
HEX:#FFEE00
PMS:803
SASS:$yellow05

 

  • Was this Helpful?
  •