There are standard color combinations for many common situations. Use these when possible:
white
#ffffffblack text
#000000Page body content, titles, sub-titles, tables, data, vertical navigation items, drop-down menu items
white
#ffffffgray-70 text (was gray)
#797675Drop-down menu section titles
blue-60 (was blue)
#3a81c2white text
#ffffffInformational messages, keyboard focus indications, inline text links
green-60 (was green)
#49a471white text
#ffffffSuccess messages, positive numbers
red-60 (was red-dark)
#e23333white text
#ffffffError alerts, destructive action buttons, negative numbers
orange-60 (was orange-dark)
#ea711awhite text
#ffffffWarning about potential errors, cautionary states, call to action
yellow-60 (was yellow-dark)
#f8d648black text
#000000Generating export, waiting state, in-progress but not actionable
orange-60 (was orange-dark)
#ea711awhite text
#ffffffStaff-only tools or information
Do
Use standard color combinations when applicable.
Don't
Do not force users to figure out unexplained differences in color. The primary button here is a different color from other primary buttons in the product, which is likely to cause confusion.
Do
Use standard color combinations when applicable.
Don't
Do not force users to figure out unexplained differences in color. The primary button here is a different color from other primary buttons in the product, which is likely to cause confusion.
Do
Do use standard color combinations to distinguish between types of information.
Don't
Here, the required field marker and an error message use similar colors. Many users will assume that both items are related to the error, which is untrue.
Do
Do use standard color combinations to distinguish between types of information.
Don't
Here, the required field marker and an error message use similar colors. Many users will assume that both items are related to the error, which is untrue.
white background
#ffffffblack text
#000000Enabled
gray-30 background (was gray-lightest-3)
#ecebebblack text
#000000Enabled with hover
white background
#ffffffblack text
#000000Enabled
gray-20 background (was gray-lightest-2)
#f7f7f7blue-70 text (was blue-dark)
#1668afEnabled with hover
Utility action buttons, secondary context menu trigger buttons
white background
#ffffffblack text
#000000Enabled
white
#ffffffblue-70 (was blue-dark)
#1668afEnabled with hover
white
#ffffffgray-40 (was gray-light-1)
#d6d5d5Disabled
Primary buttons, primary action in Block and Modal
gray-90 background (was gray-dark-2)
#3d3b3bwhite text
#ffffffEnabled
blue-70 (was blue-dark)
#1668afwhite
#ffffffEnabled with hover
gray-30 (was gray-lightest-3)
#ecebebgray-50 (was gray-light-2)
#bbb9b9Disabled
Error alerts, destructive action buttons
red-70 background (was red-darkest)
#c52220white text
#ffffffEnabled
red-60 (was red-dark)
#e23333white
#ffffffEnabled with hover
red-20
#ffeaeared-40 (was red-light)
#eea2a2Disabled
blue-10
#edf4f7blue-20
#e3eef3blue-30 (was blue-lightest)
#cce0eablue-40 (was blue-light)
#9ec6deblue-50
#68a2d3blue-60 (was blue)
#3a81c2blue-70 (was blue-dark)
#1668afblue-80 (was blue-darkest)
#00528eblue-90
#003c6bblue-100
#00294bturquoise-10
#f8fefeturquoise-20
#e8fbfbturquoise-30
#c9f5f6turquoise-40
#9ce9eaturquoise-50
#68d7d9turquoise-60
#38c2c4turquoise-70
#15a1a6turquoise-80
#037e87turquoise-90
#005f6bturquoise-100
#004453green-10
#f6faf8green-20
#eaf5efgreen-30 (was green-lightest)
#d1e9dbgreen-40
#a8d8bcgreen-50 (was green-light)
#79c298green-60 (was green)
#49a471green-70 (was green-dark)
#2a8652green-80 (was green-darkest)
#156d3bgreen-90
#045624green-100
#004316lime-10
#fafdeelime-20
#f5fcd5lime-30
#ebfcaclime-40
#ddfb74lime-50
#c9ec56lime-60
#b1d636lime-70
#94b524lime-80
#738c12lime-90
#536507lime-100
#384202yellow-10
#fffef7yellow-20
#fffcedyellow-30 (was yellow-lightest)
#fef8dayellow-40 (was yellow-light)
#fcefb6yellow-50 (was yellow)
#fbe284yellow-60 (was yellow-dark)
#f8d648yellow-70 (was yellow-darkest)
#ddb31fyellow-80
#b48804yellow-90
#825a00yellow-100
#4d2f00orange-10
#fffaf8orange-20
#fff3ecorange-30 (was orange-lightest)
#fbdbcaorange-40 (was orange-light)
#f7bea0orange-50 (was orange)
#f79864orange-60 (was orange-dark)
#ea711aorange-70
#c65400orange-80 (was orange-darkest)
#a03b00orange-90
#772900orange-100
#4f1a00red-10
#fff9f9red-20
#ffeaeared-30 (was red-lightest)
#f6c6c6red-40 (was red-light)
#eea2a2red-50 (was red)
#ec6a6ared-60 (was red-dark)
#e23333red-70 (was red-darkest)
#c52220red-80
#aa0e16red-90
#890112red-100
#610011brown-10
#FAF8F6brown-20
#F9F4F0brown-30
#F5E7D9brown-40
#EEDBCAbrown-50
#E4C4A6brown-60
#BA8D63brown-70
#966E4Abrown-80
#6D4B33brown-90
#4D3222brown-100
#321E13gray-10 (was gray-lightest-1)
#fcfcfcgray-20 (was gray-lightest-2)
#f7f7f7gray-30 (was gray-lightest-3)
#ecebebgray-40 (was gray-light-1)
#d6d5d5gray-50 (was gray-light-2)
#bbb9b9gray-60 (was gray-light-3)
#9d9a99gray-70 (was gray)
#797675gray-80 (was gray-dark-1)
#5b5958gray-90 (was gray-dark-2)
#3d3b3bgray-100 (was gray-dark-3)
#222120black
#000000white
#ffffffblue-10
#edf4f7blue-20
#e3eef3blue-30 (was blue-lightest)
#cce0eablue-40 (was blue-light)
#9ec6deblue-50
#68a2d3blue-60 (was blue)
#3a81c2blue-70 (was blue-dark)
#1668afblue-80 (was blue-darkest)
#00528eblue-90
#003c6bblue-100
#00294bturquoise-10
#f8fefeturquoise-20
#e8fbfbturquoise-30
#c9f5f6turquoise-40
#9ce9eaturquoise-50
#68d7d9turquoise-60
#38c2c4turquoise-70
#15a1a6turquoise-80
#037e87turquoise-90
#005f6bturquoise-100
#004453green-10
#f6faf8green-20
#eaf5efgreen-30 (was green-lightest)
#d1e9dbgreen-40
#a8d8bcgreen-50 (was green-light)
#79c298green-60 (was green)
#49a471green-70 (was green-dark)
#2a8652green-80 (was green-darkest)
#156d3bgreen-90
#045624green-100
#004316lime-10
#fafdeelime-20
#f5fcd5lime-30
#ebfcaclime-40
#ddfb74lime-50
#c9ec56lime-60
#b1d636lime-70
#94b524lime-80
#738c12lime-90
#536507lime-100
#384202yellow-10
#fffef7yellow-20
#fffcedyellow-30 (was yellow-lightest)
#fef8dayellow-40 (was yellow-light)
#fcefb6yellow-50 (was yellow)
#fbe284yellow-60 (was yellow-dark)
#f8d648yellow-70 (was yellow-darkest)
#ddb31fyellow-80
#b48804yellow-90
#825a00yellow-100
#4d2f00orange-10
#fffaf8orange-20
#fff3ecorange-30 (was orange-lightest)
#fbdbcaorange-40 (was orange-light)
#f7bea0orange-50 (was orange)
#f79864orange-60 (was orange-dark)
#ea711aorange-70
#c65400orange-80 (was orange-darkest)
#a03b00orange-90
#772900orange-100
#4f1a00red-10
#fff9f9red-20
#ffeaeared-30 (was red-lightest)
#f6c6c6red-40 (was red-light)
#eea2a2red-50 (was red)
#ec6a6ared-60 (was red-dark)
#e23333red-70 (was red-darkest)
#c52220red-80
#aa0e16red-90
#890112red-100
#610011brown-10
#FAF8F6brown-20
#F9F4F0brown-30
#F5E7D9brown-40
#EEDBCAbrown-50
#E4C4A6brown-60
#BA8D63brown-70
#966E4Abrown-80
#6D4B33brown-90
#4D3222brown-100
#321E13gray-10 (was gray-lightest-1)
#fcfcfcgray-20 (was gray-lightest-2)
#f7f7f7gray-30 (was gray-lightest-3)
#ecebebgray-40 (was gray-light-1)
#d6d5d5gray-50 (was gray-light-2)
#bbb9b9gray-60 (was gray-light-3)
#9d9a99gray-70 (was gray)
#797675gray-80 (was gray-dark-1)
#5b5958gray-90 (was gray-dark-2)
#3d3b3bgray-100 (was gray-dark-3)
#222120black
#000000white
#ffffffIs this page helpful?