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.
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.
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.
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.
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
Back to top
Black & White
Black
R 0G 0B 0
H 0S 0B 0
C 0M 0Y 0K 100
HEX #000000PMS BLACK 6C
White
R 255G 255B 255
H 0S 0B 100
C 0M 0Y 0K 0
HEX #FFFFFFPMS OPAQUE WHITE
Warm
Pink
R 255G 117B 230
H 311S 54B 100
C 11M 61Y 0K 0
HEX #FF75E6PMS 237C
Scarlet
R 161G 0B 46
H 343S 100B 63
C 24M 100Y 81K 20
HEX #A1002EPMS 207C
Red
R 241G 32B 39
H 358S 87B 95
C 0M 98Y 95K 0
HEX #F12027PMS 3556C
Orange
R 255G 75B 0
H 18S 100B 100
C 1M 85Y 100K 0
HEX #FF4B00PMS 1655C
Yellow
R 255G 211B 0
H 50S 100B 100
C 1M 15Y 100K 0
HEX #FFD300PMS 109C
Lime
R 186G 209B 49
H 69S 77B 82
C 32M 2Y 100K 0
HEX #BAD131PMS 2297C
Cool
Blue
R 255G 117B 230
H 311S 54B 100
C 11M 61Y 0K 0
HEX #174BEBPMS 2132C
Neon
R 136G 148B 255
H 234S 47B 100
C 49M 41Y 0K 0
HEX #8894FFPMS 7452C
Purple
R 149G 7B 255
H 274S 97B 100
C 63M 80Y 0K 0
HEX #9507FFPMS 266C
Moss
R 79G 79B 46
H 60S 42B 31
C 60M 50Y 86K 42
HEX #4F4F2EPMS 7764C
Dark Green
R 14G 102B 75
H 162S 86B 40
C 88M 36Y 77K 42
HEX #0E664BPMS 336C
Green
R 0G 170B 31
H 131S 100B 67
C 82M 4Y 100K 0
HEX #00AA1FPMS 2423C
Neutral
Cool Gray
R 162G 171B 197
H 225S 18B 77
C 37M 27Y 11K 0
HEX #A2ABC5PMS 2132C
Gray
R 137G 142B 131
H 87S 8B 56
C 48M 36Y 47K 5
HEX #898E83PMS 7539C
Wash
R 186G 175B 221
H 254S 21B 87
C 26M 30Y 0K 0
HEX #BAAFDDPMS 2092C
Dust
R 168G 144B 141
H 7S 16B 66
C 36M 42Y 39K 2
HEX #A8908DPMS 4113C
Sand
R 198G 188B 155
H 46S 22B 78
C 24M 21Y 41K 0
HEX #CEC7AEPMS 4246C
Charcoal
R 112G 115B 129
H 229S 13B 51
C 59M 50Y 38K 9
HEX #707381PMS 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.