Best practices
What—and what not—to do when using color.
Do use color tones from the same color family.
Don’t combine different color families.
Do use solid colors on typography.
Don’t use gradients on typography.
Do use solid colored backgrounds.
Don’t use gradient backgrounds.
Do use color levels 400, 500, and 700 for background colors.
Don’t use color levels 100, 200, 300, 600, or 800 as background colors.
Do make backgrounds a single, solid color.
Don’t use color blocks.
Do use levels 400, 500, and 700 for background colors.
Don’t use black backgrounds outside of campaigns or video end cards.
Do use background colors that are complementary to photography color schemes.
Don’t use background colors that clash with photography and/or aren’t complementary or analogous.
Do use background colors that are analogous to photography color schemes.
Don’t use background colors that clash with photography and/or aren’t complementary or analogous.
Do use the color background that is predefined for each illustration. You can also always use a neutral background.
Don’t apply your own color background colors to illustrations.
Do use the original coloring of each illustration.
Don’t change the colors in illustrations as there are legal implications of certain objects in certain colors.
Do always use white backgrounds for empty states.
Don’t use colored backgrounds in empty states.
Do use roughly the same shade for all background colors when multiple illustrations are paired together in a list or carousel.
Don’t mix extremely dark or light background colors when multiple illustrations are paired in a single view.
Do keep colored illustration backgrounds separate from text-heavy areas.
Don’t layer text on top of colored backgrounds in small, text-heavy areas.
Do use the colors provided in the components to ensure the semantic meaning holds true.
Don’t use colors that are not included in semantic components like alert notices. It reduces their meaning.
Do use the color themes defined for each graph type and the ordering defined based on number of data sets.
Don’t use colors for chart types they are not meant for (i.e. line graph colors in an area chart) and don’t create new color themes for graphs that are not in the system.
Do use colors for signals that are built into the component.
Don’t use bespoke colors for signals.
Do use the 4-color logo on a white background for out of home and offsite marketing ads.
Don’t use any of the extended marketing palette colors for out of home and offsite marketing ads.
Do use the extended marketing palette for more expressive messages on ebay channels like social.
Don’t use colors or color combinations outside of the extended marketing palette in social.
Do use level 200 colors as backgrounds in emails so they maintain adequate contrast ratios when translated in dark mode.
Don’t use colors outside of the Email marketing palette as they may be translated in unexpected ways and lose necessary contrast ratios.
