Color

Coupled with the layout system, the Vevo color palette supports and complements a diverse range of artist content. A considered system of secondary tones adds depth and hierarchy. Together with the core palette, it forms a key part of the Vevo identity.

Core Palette

Our core palette is inspired by the multitude of tones found across the videos on Vevo’s platforms. Warm, cool and 
neutral colors combine to create a flexible palette that is 
able to react to the full range of artist content.

Below are the approved color values for each color in 
the palette. Always use the correct color mode and ink 
formulation for the appropriate application type, to 
ensure color consistency across all mediums.

Core Palette
Type

Below are the different color combinations when combining our core palette with typography. Adhering to these combinations will ensure consistency across all formats.

1. White On Color
3. Color On Black
5. White On Image
2. Black On Color
4. Color On 10% Tint
6. Black On Image

Core Palette
Logo

Below are the different color combinations when combining our core palette with the Vevo logo. Adhering to these combinations will ensure consistency across all formats.

1. White On Color
3. White On Image
2. Black On Color
4. Black On Image

Core Palette
Black and White

When color is not needed, or for more specific use cases such as printed documents, both the logo and typography also combine with black and white.

1. White On Black
2. Black on White

Core Palette
Application Examples

Core Palette
Don’ts

In order to enstablish a sense of consistency and recognizability across the visual identity, there are certain things that should be avoided when using the core palette.

1. Do not use any opacity below 100% for background color.
2. Do not combine colors.
3. Do not use color typography over imagery.
4. Do not place typography or logo on images that don’t create enough contrast for legibility.

Secondary Tones

Secondary tones are an intrinsic part of the Vevo identity. They speak to the ideas of depth and amplification, but also act as an important tool for creating hierarchy within compositions. There are two methods for creating secondary tones: opacity reduction and tint reduction.

Secondary Tones
Guidance

When using our secondary tones, it is important to create consistent visual contrast between each element as they increase in tint or opacity. The Vevo brand uses increments of 25 as a starting point to achieve this.

Examples

Clear contrast between all four lines.
The two middle lines are too close in opacity.
Clear contrast between all three blocks.
The lightest block is too similar to the background.

Secondary Tones
Number of Elements

In order to ensure the right level of contrast between colors, the intensity of the secondary tones will vary based on how many elements are in the composition. This section outlines some general rules for selecting tone intensity.

Secondary Tones
Color Menu

Below is a menu that sets out exactly which tones to use based on the color and the number of elements at play. This will help to ensure there is enough contrast and legibility against the background for any composition using the tones. Use this as a guide when creating compositions.

Secondary Tones
Color Contrast

It is important that information using the secondary tones can be clearly read and understood. As a rule, try to avoid using lower opacities or tints for product design or any other format where a type size of less than 22px is needed.

Secondary Tones
Application Examples

Secondary Tones
Don’ts

Below are some examples of things to avoid when using the secondary tones.

1. Do not use 25, 50 or 75% as background. 3. Do not change the order of hierarchy in still compositions. N.B. Instances like this can be seen in motion transitions.
2. Do not combine colors. 4. Do not overlay color typography on imagery.

Logo In Color

In certain situations, the Vevo logo can also be applied in color. Below are some combinations and usage examples for those situations.

1. Color On Black
Usage
When color typography sits on 10% tint backgrounds, we use the logo in color. When the graphic blocks sit on 10% tint backgrounds, we use the logo in black.
2. Color On 10% Tint
 
When color typography sits on black backgrounds, we use the logo in color. When the graphic blocks sit on black backgrounds, we use the logo in color.

Genre Specific

Below are Vevo’s main genres and the colors that should be used when creating a genre-specific piece of communication.

Genre Specific
Subgenres

To keep things consistent and avoid creating a potentially endless set of colors, any subgenre or genre that has similarities to the main genres outlined above should use the same color. This helps to create cohesion across the visual identity.

Genre Specific
Application Examples

Content Specific
Analogous

There are two methods when choosing color for content specific applications: analogous and complementary. Below is a step-by-step guide for choosing an appropriate color.

Step 1: Pick out key color.
Step 2: Choose appropriate tone from core palette.
Examples

Content Specific
Contrasting

When choosing a contrasting tone, the same process applies, but the final color would be a tone that exists on the opposite side of the Vevo palette.

Step 1: Pick out key color.
Step 2: Choose appropriate tone from core palette.
Examples

Content Specific
Application Examples

Black & White
Black
R 0 G 0 B 0
H 0 S 0 B 0
C 0 M 0 Y 0 K 100
HEX #000000 PMS BLACK 6C
White
R 255 G 255 B 255
H 0 S 0 B 100
C 0 M 0 Y 0 K 0
HEX #FFFFFF PMS OPAQUE WHITE
Warm
Pink
R 255 G 117 B 230
H 311 S 54 B 100
C 11 M 61 Y 0 K 0
HEX #FF75E6 PMS 237C
Scarlet
R 161 G 0 B 46
H 343 S 100 B 63
C 24 M 100 Y 81 K 20
HEX #A1002E PMS 207C
Red
R 241 G 32 B 39
H 358 S 87 B 95
C 0 M 98 Y 95 K 0
HEX #F12027 PMS 3556C
Orange
R 255 G 75 B 0
H 18 S 100 B 100
C 1 M 85 Y 100 K 0
HEX #FF4B00 PMS 1655C
Yellow
R 255 G 211 B 0
H 50 S 100 B 100
C 1 M 15 Y 100 K 0
HEX #FFD300 PMS 109C
Lime
R 186 G 209 B 49
H 69 S 77 B 82
C 32 M 2 Y 100 K 0
HEX #BAD131 PMS 2297C
Cool
Blue
R 255 G 117 B 230
H 311 S 54 B 100
C 11 M 61 Y 0 K 0
HEX #174BEB PMS 2132C
Neon
R 136 G 148 B 255
H 234 S 47 B 100
C 49 M 41 Y 0 K 0
HEX #8894FF PMS 7452C
Purple
R 149 G 7 B 255
H 274 S 97 B 100
C 63 M 80 Y 0 K 0
HEX #9507FF PMS 266C
Moss
R 79 G 79 B 46
H 60 S 42 B 31
C 60 M 50 Y 86 K 42
HEX #4F4F2E PMS 7764C
Dark Green
R 14 G 102 B 75
H 162 S 86 B 40
C 88 M 36 Y 77 K 42
HEX #0E664B PMS 336C
Green
R 0 G 170 B 31
H 131 S 100 B 67
C 82 M 4 Y 100 K 0
HEX #00AA1F PMS 2423C
Neutral
Cool Gray
R 162 G 171 B 197
H 225 S 18 B 77
C 37 M 27 Y 11 K 0
HEX #A2ABC5 PMS 2132C
Gray
R 137 G 142 B 131
H 87 S 8 B 56
C 48 M 36 Y 47 K 5
HEX #898E83 PMS 7539C
Wash
R 186 G 175 B 221
H 254 S 21 B 87
C 26 M 30 Y 0 K 0
HEX #BAAFDD PMS 2092C
Dust
R 168 G 144 B 141
H 7 S 16 B 66
C 36 M 42 Y 39 K 2
HEX #A8908D PMS 4113C
Sand
R 198 G 188 B 155
H 46 S 22 B 78
C 24 M 21 Y 41 K 0
HEX #CEC7AE PMS 4246C
Charcoal
R 112 G 115 B 129
H 229 S 13 B 51
C 59 M 50 Y 38 K 9
HEX #707381 PMS 4128C
Opacity Reduction
25%
50%
75%
Core Color
Tint Reduction
75%
50%
25%
Warm
Pink
Scarlet
Red
Orange
Yellow
Lime
Cool
Blue
Purple
Neon
Moss
Dark Green
Green
Neutral
Cool Gray
Gray
Wash
Dust
Sand
Charcoal
Two Elements
When using two elements in the composition, 100% and 50% tint or opacity should be used.
100%
50%
Three Elements
When using three elements in the composition, 100%, 50% and 25% should be used to provide maximum gradation of tones.
100%
50%
25%
Four Elements
When using four elements in the composition, 100%, 75%, 50% and 25% should be used.
100%
75%
50%
25%
Five Elements
When using five elements in the composition, a 10% tint provides an additional level of tonal gradation.
100%
75%
50%
25%
10%
Two Elements Three Elements Four Elements
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3, Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Type
1. White On Color Opacity
2. Black On Color Opacity
3. Color On Black Opacity
4. Color On Black Tint
5. Color On 10% Tint Opacity
6. White On Image Opacity
Graphic Block
1. Color On Black Tint
2. Color On 10% Tint Opacity
3. Color On Color Tint
4. Color On Image Tint
Pop
R 255 G 117 B 230
H 311 S 54 B 100
C 11 M 61 Y 0 K 0
HEX #FF75E6 PMS 237C
Latin
R 255 G 75 B 0
H 18 S 100 B 100
C 1 M 85 Y 100 K 0
HEX #FF4B00 PMS 1655C
Rock
R 241 G 32 B 39
H 358 S 87 B 95
C 0 M 98 Y 95 K 0
HEX #F12027 PMS 3556C
Alternative
R 186 G 175 B 221
H 254 S 21 B 87
C 26 M 30 Y 0 K 0
HEX #BAAFDD PMS 2092C
Hip-Hop
R 79 G 79 B 46
H 60 S 42 B 31
C 60 M 50 Y 86 K 42
HEX #4F4F2E PMS 7764C
R&B
R 149 G 7 B 255
H 274 S 97 B 100
C 63 M 80 Y 0 K 0
HEX #9507FF PMS 266C
Country
R 168 G 144 B 141
H 7 S 16 B 66
C 36 M 42 Y 39 K 2
HEX #A8908D PMS 4113C
EDM
R 186 G 209 B 49
H 69 S 77 B 82
C 32 M 2 Y 100 K 0
HEX #BAD131 PMS 2297C
Indie
R 255 G 117 B 230
H 311 S 54 B 100
C 11 M 61 Y 0 K 0
HEX #174BEB PMS 2132C
Latin Orange
Reggaeton
Sabor Tropical
Urbano
Hip-Hop Moss
Grime
Trap
Drill
EDM Lime
Electronic
Techno
House
Country Dust
Reggaeton
Sabor Tropical
Urbano
Rock Red
Grime
Trap
Drill
R&B Purple
Electronic
Techno
House