Tools
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-dark-1)
#656B6BDrop-down menu section titles
blue-60 (was blue)
#2C67B5white text
#FFFFFFInformational messages, keyboard focus indications, inline text links
green-60 (was green)
#32B0A0white text
#FFFFFFSuccess messages, positive numbers
red-60 (was red-dark)
#DA1C3Cwhite text
#FFFFFFError alerts, destructive action buttons, negative numbers
orange-60 (was orange-dark)
#E57B5Awhite 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)
#E57B5Awhite 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-light-1)
#DEDFDFblack text
#000000Enabled with hover
white background
#FFFFFFblack text
#000000Enabled
gray-20 background (was gray-lightest-3)
#EBECECblue-70 text (was blue-dark)
#285DA3Enabled with hover
Utility action buttons, secondary context menu trigger buttons
white background
#FFFFFFblack text
#000000Enabled
white
#FFFFFFblue-70 (was blue-dark)
#285DA3Enabled with hover
white
#FFFFFFgray-40 (was gray-light-2)
#C4C4C4Disabled
Primary buttons, primary action in Block and Modal
gray-90 background (was gray-dark-3)
#232B2Bwhite text
#FFFFFFEnabled
blue-70 (was blue-dark)
#285DA3white
#FFFFFFEnabled with hover
gray-30 (was gray-light-1)
#DEDFDFgray-50 (was gray-light-3)
#A7AAAADisabled
Error alerts, destructive action buttons
red-70 background (was red-darkest)
#C41936white text
#FFFFFFEnabled
red-60 (was red-dark)
#DA1C3Cwhite
#FFFFFFEnabled with hover
red-20
#F8D2D8red-40 (was red-light)
#E9778ADisabled
blue-10
#EAF0F8blue-20
#DFE8F4blue-30 (was blue-lightest)
#C0D1E9blue-40 (was blue-light)
#8BABD6blue-50
#4176BCblue-60 (was blue)
#2C67B5blue-70 (was blue-dark)
#285DA3blue-80 (was blue-darkest)
#235291blue-90
#1A3E6Dblue-100
#122948green-10
#EBF7F6green-20
#D6EFECgreen-30 (was green-lightest)
#ADDFD9green-40
#84D0C6green-50 (was green-light)
#5BC0B3green-60 (was green)
#32B0A0green-70 (was green-dark)
#2D9E90green-80 (was green-darkest)
#237C70green-90
#1E6A60green-100
#144640lime-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
#FCF0EEorange-20
#FAE5DEorange-30 (was orange-lightest)
#F5CABDorange-40 (was orange-light)
#EFB09Corange-50 (was orange)
#EA957Borange-60 (was orange-dark)
#E57B5Aorange-70
#CE6F51orange-80 (was orange-darkest)
#B76248orange-90
#A0563Forange-100
#733E2Dred-10
#FBE8ECred-20
#F8D2D8red-30 (was red-lightest)
#F0A4B1red-40 (was red-light)
#E9778Ared-50 (was red)
#E14963red-60 (was red-dark)
#DA1C3Cred-70 (was red-darkest)
#C41936red-80
#AE1630red-90
#831124red-100
#570B18brown-10 (was key-pair)
#FBF8F7brown-20
#F0EAE1brown-30
#E2D5C2brown-40
#CCB695brown-50
#C5AB85brown-60
#B69667brown-70
#A4875Dbrown-80
#7F6948brown-90
#5B4B34brown-100
#493C29gray-10 (was gray-lightest-1)
#F4F4F4gray-20 (was gray-lightest-3)
#EBECECgray-30 (was gray-light-1)
#DEDFDFgray-40 (was gray-light-2)
#C4C4C4gray-50 (was gray-light-3)
#A7AAAAgray-60 (was gray)
#7B8080gray-70 (was gray-dark-1)
#656B6Bgray-80 (was gray-dark-2)
#394040gray-90 (was gray-dark-3)
#232B2Bgray-100
#1C2222black
#000000white
#FFFFFFblue-10
#EAF0F8blue-20
#DFE8F4blue-30 (was blue-lightest)
#C0D1E9blue-40 (was blue-light)
#8BABD6blue-50
#4176BCblue-60 (was blue)
#2C67B5blue-70 (was blue-dark)
#285DA3blue-80 (was blue-darkest)
#235291blue-90
#1A3E6Dblue-100
#122948green-10
#EBF7F6green-20
#D6EFECgreen-30 (was green-lightest)
#ADDFD9green-40
#84D0C6green-50 (was green-light)
#5BC0B3green-60 (was green)
#32B0A0green-70 (was green-dark)
#2D9E90green-80 (was green-darkest)
#237C70green-90
#1E6A60green-100
#144640lime-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
#FCF0EEorange-20
#FAE5DEorange-30 (was orange-lightest)
#F5CABDorange-40 (was orange-light)
#EFB09Corange-50 (was orange)
#EA957Borange-60 (was orange-dark)
#E57B5Aorange-70
#CE6F51orange-80 (was orange-darkest)
#B76248orange-90
#A0563Forange-100
#733E2Dred-10
#FBE8ECred-20
#F8D2D8red-30 (was red-lightest)
#F0A4B1red-40 (was red-light)
#E9778Ared-50 (was red)
#E14963red-60 (was red-dark)
#DA1C3Cred-70 (was red-darkest)
#C41936red-80
#AE1630red-90
#831124red-100
#570B18brown-10 (was key-pair)
#FBF8F7brown-20
#F0EAE1brown-30
#E2D5C2brown-40
#CCB695brown-50
#C5AB85brown-60
#B69667brown-70
#A4875Dbrown-80
#7F6948brown-90
#5B4B34brown-100
#493C29gray-10 (was gray-lightest-1)
#F4F4F4gray-20 (was gray-lightest-3)
#EBECECgray-30 (was gray-light-1)
#DEDFDFgray-40 (was gray-light-2)
#C4C4C4gray-50 (was gray-light-3)
#A7AAAAgray-60 (was gray)
#7B8080gray-70 (was gray-dark-1)
#656B6Bgray-80 (was gray-dark-2)
#394040gray-90 (was gray-dark-3)
#232B2Bgray-100
#1C2222black
#000000white
#FFFFFFIs this page helpful?