For the love
of new fashion.
Using color
Consistently pairing color with typography, iconography, photography, and illustration can greatly improve brand recognition and perception. These guidelines outline how we use color across all touchpoints.
We use a few subsets of our full color palette depending on the audience and platform. When the audience is off platform or further from the product, we use a more limited palette to establish brand recognition. When customers are on platform or closer to the product, we use an extended palette to express more boldly. For example, we stick closely to our core colors in off-platform ads and use a more extended palette in social and on-platform marketing. Illustrations are the only application that use our full palette. Visit the tabs above to see guidance for each area.
Any time we place text or buttons over color, we must ensure we’re meeting minimum accessibility contrast requirements. By using these predefined color pairs, we can make sure that eBay is accessible and meets brand standards for all. For more info, see Accessibility.
Green
Blue
Red
Yellow
Neutral
For the love
Background g500
Hex
#92C821
RGB
146 • 200 • 33
Pantone
376 C • 2292 U
CMYK C
48 • 0 • 100 • 1
CMYK U
55 • 0 • 100 • 3
Token
color.core.green.500
Foreground g700
Hex
#345110
RGB
52 • 81 • 16
Pantone
2266 C • 2266 U
CMYK C
64 • 1 • 98 • 66
CMYK U
64 • 21 • 71 • 41
Token
color.core.green.700
For the love
of new fashion.
Background v400
Hex
#836BFF
RGB
131 • 107 • 255
Pantone
2366 C • 2725 U
CMYK C
67 • 58 • 0 • 0
CMYK U
58 • 54 • 0 • 0
Token
color.core.violet.400
Foreground v800
Hex
#20092B
RGB
32 • 9 • 43
Pantone
2119 C • 2372 U
CMYK C
100 • 96 • 0 • 32
CMYK U
100 • 100 • 0 • 11
Token
color.core.violet.800
For the love
of new fashion.
Background p800
Hex
#360606
RGB
54 • 6 • 6
Pantone
7652 C • 7449 U
CMYK C
48 • 99 • 3 • 46
CMYK U
53 • 77 • 28 • 55
Token
color.core.pink.800
Foreground p300
Hex
#F79CC8
RGB
247 • 156 • 200
Pantone
2064 C • 2064 U
CMYK C
8 • 41 • 0 • 0
CMYK U
10 • 51 • 0 • 0
Token
color.core.pink.300
For the love
of new fashion.
Background a500
Hex
#C1D737
RGB
193 • 215 • 55
Pantone
390 C • 6194 U
CMYK C
20 • 0 • 100 • 8
CMYK U
30 • 0 • 97 • 0
Token
color.core.avocado.500
Foreground a700
Hex
#4E4E0C
RGB
78 • 78 • 12
Pantone
2308 C • 2308 U
CMYK C
22 • 20 • 99 • 65
CMYK U
35 • 27 • 100 • 51
Token
color.core.avocado.700
For the love
of new fashion.
Background n200
Hex
#F7F7F7
RGB
247 • 247 • 247
Pantone
Cool Gray 1 C • Cool Gray 1 U
CMYK C
10 • 7 • 5 • 0
CMYK U
10 • 8 • 7 • 0
Token
color.core.neutral.200
Foreground n800
Hex
#191919
RGB
25 • 25 • 25
Pantone
Black 3 C • Black 3 U
CMYK C
74 • 52 • 71 • 90
CMYK U
59 • 41 • 51 • 60
Token
color.core.neutral.800
For the love
of new fashion.
Background c400
Hex
#FF6A38
RGB
255 • 106 • 56
Pantone
2026 C • 2026 U
CMYK C
0 • 68 • 96 • 0
CMYK U
0 • 74 • 91 • 0
Token
color.core.coral.400
Foreground c800
Hex
#2F0E04
RGB
47 • 14 • 4
Pantone
476 C • 7631 U
CMYK C
19 • 69 • 78 • 60
CMYK U
33 • 71 • 56 • 54
Token
color.core.coral.800
We use color boldly but sparingly by applying our tone-on-tone strategy wherever possible. This means that we derive color backgrounds from the photo(s) being featured, and the foreground color is always a lighter or darker tone of the background color, which are pre-defined in the Color pairing tool. This focuses each placement on a single color family that harmonizes with the product and everything else layered on top.
We use color backgrounds with masked images, lifestyle images and studio photography. We always choose colors from our color palette and generally use tone-on-tone pairings. Learn more about using photos in the Photography section.
Tone-on-tone
We use color backgrounds with masked images, lifestyle images, and studio photography. We always choose colors from our color palette and generally apply our tone-on-tone strategy. For more information on using photos, see Photography.
Lifestyle
Studio
Masked
Analogous & complementary colors
There are moments when our tone-on-tone strategy doesn’t work. When more contrast is needed with a photo or more color variety is needed when featuring a specific brand or highlighting a specific season, you may use colors that are either next to or across from each other on the color wheel as background colors to photography. This does not apply to masked photography laying directly on a background color. Those layouts should use a tone-on-tone color.
Analogous
Analogous colors are next to each other on the color wheel, like green and yellow. This social post uses mainly green photography on a yellow background to match the featured photo.
Complementary
Complementary colors are across from each other on the color wheel, like blue and orange. This social post uses photography that’s primarily orange and is with blue background and typography for added contrast.
Colors used with badges depend on the background the badges are being used on. For more information on using badges, see Program badges.
On photography
Badges are always white when used over photography.
On color
When used on color backgrounds, badges should be the tone-on-tone foreground color as predefined in the Color pairing tool.
On neutrals
When used on neutral backgrounds, badges should be their default color.
On photography
When used directly over photography, the logo is always white.
On color
When used on color backgrounds, the logo should be the tone-on-tone foreground color as predefined in the Color pairing tool.
On neutrals
Our 4-color logo can be used on white, black, and neutral 200 backgrounds. For more info, see Our logo.
Typography can be used on photography, color, and neutral backgrounds. The color of the type depends on the background it’s being used on. For more information on sizing and formatting guidelines for type, see Using type.
On photography
When used directly over photography, typography is always white.
On color
When used on color backgrounds, type should be the tone-on-tone foreground color as predefined in the Color pairing tool.
On neutrals
On neutral backgrounds, typography is also neutral. Find specific color combinations we recommend for neutrals in the Color pairing tool.
Each illustration can be used on white (Neutral 100), light gray (Neutral 200), or any of the other predefined colored backgrounds. To download each illustration with color backgrounds baked in, see the Illustration library. Do not put illustrations on any other background colors that have not been pre-approved.
On white
All illustrations can be used on white backgrounds.
On neutral
All illustrations can be used on neutral 200 backgrounds.
On color
Illustrations can only use background colors that have been predefined in our Illustration guidelines.
Off-platform ads
We use white backgrounds in off-platform and out-of-home ads to establish brand recognition with audiences that may not be as familiar with eBay and are not currently in context (like on our Instagram or website). Using white or light gray backgrounds in these applications allows the imagery and the logo to shine. We use Neutral 100 (white) backgrounds for social and out-of-home backgrounds and Neutral 200 (light gray) backgrounds for digital ads because they need to stand out against a white background.
No clear primary color
When there's no clear primary color or the primary color isn't an option, we use neutral backgrounds.
To improve contrast
We also use neutral backgrounds if the available shades of the product’s primary color do not allow enough contrast for the image to shine.
Do use a neutral background to ensure contrast with the product.
Don’t use the product’s primary color as a background if there isn’t enough contrast to ensure the product is legible.
