Do use a neutral background to ensure contrast with the product.
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.
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 in Using color. 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.
Don’t use the product’s primary color as a background if there isn’t enough contrast to ensure the product is legible.
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
of new fashion.
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.brand.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.brand.green.700
For the love
of new fashion.
Background i700
Hex
#003C66
RGB
0 • 60 • 102
Pantone
7462 C • 301 U
CMYK C
100 • 56 • 0 • 16
CMYK U
100 • 66 • 0 • 20
Token
color.brand.indigo.700
Foreground i200
Hex
#D3EFFE
RGB
211 • 239 • 254
Pantone
7457 C • 7457 U
CMYK C
25 • 0 • 0 • 0
CMYK U
20 • 0 • 0 • 0
Token
color.brand.indigo.200
For the love
of new fashion.
Background p500
Hex
#DE458E
RGB
222 • 69 • 142
Pantone
3527 C • 226 U
CMYK C
6 • 83 • 0 • 0
CMYK U
8 • 100 • 0 • 1
Token
color.brand.pink.500
Foreground 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.brand.pink.800
For the love
of new fashion.
Background d400
Hex
#F6E016
RGB
246 • 224 • 22
Pantone
604 C • 604 U
CMYK C
5 • 0 • 88 • 0
CMYK U
2 • 0 • 88 • 0
Token
color.brand.dijon.400
Foreground d700
Hex
#524500
RGB
82 • 69 • 0
Pantone
7769 C • 7769 U
CMYK C
28 • 36 • 79 • 48
CMYK U
39 • 37 • 62 • 40
Token
color.brand.dijon.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.brand.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.brand.neutral.800
For the love
of new fashion.
Background y700
Hex
#553B06
RGB
85 • 59 • 6
Pantone
147 C • 147 U
CMYK C
19 • 38 • 87 • 52
CMYK U
27 • 38 • • 92
Token
color.brand.yellow.700
Foreground y200
Hex
#FFF8D5
RGB
255 • 248 • 213
Pantone
7402 C • 7402 U
CMYK C
3 • 8 • 43 • 0
CMYK U
0 • 8 • 45 • 0
Token
color.brand.yellow.200
| Date | Notes |
|---|---|
| Jun, 2024 |
|
| Mar, 2024 |
|
| Oct, 2023 |
|
| Aug, 2022 |
|
| Jun, 2022 |
|
| Dec, 2021 |
|