Color in motion design and video content of a brand
Logo vs screen vs camera: why one HEX code doesn't work everywhere
There are two different approaches to transferring the palette into video, and most brands confuse them with each other.
| Approach | What they do | Problem |
|---|---|---|
| Literal transfer of HEX | They take values from the brandbook and insert them into graphics, subtitles, LUT | The color looks flat against live filming, does not harmonize with skin tones |
| Adapting the palette to the medium | They keep the brand color for accents (CTA, logo, banners), while for background and gridding they select a derivative hue of the same temperature | Requires a separate guideline for video, not just for static elements |
The working solution is not to carry the brand color into the frame entirely, but to anchor it to specific UI elements: logo, buttons, subtitles, bottom banner. Everything else in the frame — light, background, skin — lives by the laws of gridding, not the brandbook.
Three moments where the fate of color is decided: filming, correction, graphics
The difference between color correction and color grading is almost always confused, although the boundary is simple. Correction is a technical operation: white balance, exposure, eliminating camera color shifts. Grading is a creative solution: creating mood, temperature, contrast between scenes. The key mistake is postponing the palette choice until editing.
| Stage | What is decided | Who is responsible |
|---|---|---|
| Shooting | Lighting, props, costumes, location — the basis of the future palette | Director, cinematographer, art director |
| Post-production: correction | Neutralizing technical camera distortions | Colorist |
| Post-production: grading | Creative tone, temperature, brand LUT preset | Colorist + brand manager |
| Graphics | Titles, cards, CTA, logo animation | Motion designer |
If a palette is not established at the shooting stage — for example, if props and clothing are not selected to match a warm or cool palette — then the colorist in the edit will be 'pulling' the brand color from the material where it physically does not exist. This is an expensive and often unsuccessful job.
Text contrast in video: rules that cannot be ignored
Subtitles and overlaid text in video operate by the same laws of accessibility as web interfaces, only the conditions are stricter: a small smartphone screen, moving background, autoplay without sound.
- Text contrast on video — minimum contrast 4.5:1 to background per WCAG AA
- Large headers and titles — from 3:1
- Non-text UI elements (icons, CTA buttons, progress bars) — from 3:1
- When checking contrast under a moving video background, one must verify it in the darkest and lightest frames of the scene, not the average value
In practice, this means that white text without a background on a light sky or pastel background will almost always fail the check. The solution is a fixed tile under the text (semi-transparent overlay 40–60% black) as part of the system, not a one-time editor's fix.
60-30-10 in the video frame: the same principle as in the interface
The color distribution rule works in video the same way as in UI: 60% of the frame — dominant background (neutral, often outside the brand palette), 30% — supporting color (clothing, interior, secondary graphics), 10% — accent, which the brand fully responsible for: button, CTA, logo, key banner. A common mistake in videos is trying to fill 60% of the frame with the brand color. The result looks intrusive and quickly annoys the viewer in the 15-second format.
The temperature of the palette—warm or cold—is chosen not at the editing stage, but at the storyboard phase, together with the props and lighting. Warm tones (red, orange, yellow) create a sense of urgency and proximity—they are the language of sales and stories. Cool tones (blue, green, purple) work on calmness and technicity—they are the language of SaaS products and corporate videos. The mixing of temperature within a single video without a conscious transition is perceived by the viewer as an error, not as a style.
Motion design system: how to anchor a color, not just name it
A static brand book documents color as an object — HEX, RGB, CMYK equivalent. A motion design system must document color as a process: how it appears, changes, and disappears over time. Without this layer of documentation, each new brand video will be assembled 'by eye'.
- LUT presets — ready files for color correction for each type of content (product video, interview, advertisement), so colorists do not have to reselect the grading from scratch
- Color sequence logic — rules for palette changes between scenes: for example, a cold introductory block → a warm block with CTA
- Rules for adaptive logo — how the logo and its color behave on dark/light background, during motion, when scaling to vertical format
- A library of overlays and plates with a fixed level of transparency, ensuring contrast 4.5:1
- A guide to transitions — which color transitions between scenes are acceptable, and which visually 'argue' with the brand
Such a document lives not in PDF, but in conjunction with the project file of the editing software — templates, LUTs, and title styles are connected with one click. It is exactly this that distinguishes a brand whose videos are recognizable at the first frame from one where each video is made by a new studio in its own way.
Logo vs screen vs camera: why one HEX code doesn't work everywhere
There are two different approaches to transferring the palette into video, and most brands confuse them with each other.
| Approach | What they do | Problem |
|---|---|---|
| Literal transfer of HEX | They take values from the brandbook and insert them into graphics, subtitles, LUT | The color looks flat against live filming, does not harmonize with skin tones |
| Adapting the palette to the medium | They keep the brand color for accents (CTA, logo, banners), while for background and gridding they select a derivative hue of the same temperature | Requires a separate guideline for video, not just for static elements |
The working solution is not to carry the brand color into the frame entirely, but to anchor it to specific UI elements: logo, buttons, subtitles, bottom banner. Everything else in the frame — light, background, skin — lives by the laws of gridding, not the brandbook.
Three moments where the fate of color is decided: filming, correction, graphics
The difference between color correction and color grading is almost always confused, although the boundary is simple. Correction is a technical operation: white balance, exposure, eliminating camera color shifts. Grading is a creative solution: creating mood, temperature, contrast between scenes. The key mistake is postponing the palette choice until editing.
| Stage | What is decided | Who is responsible |
|---|---|---|
| Shooting | Lighting, props, costumes, location — the basis of the future palette | Director, cinematographer, art director |
| Post-production: correction | Neutralizing technical camera distortions | Colorist |
| Post-production: grading | Creative tone, temperature, brand LUT preset | Colorist + brand manager |
| Graphics | Titles, cards, CTA, logo animation | Motion designer |
If a palette is not established at the shooting stage — for example, if props and clothing are not selected to match a warm or cool palette — then the colorist in the edit will be 'pulling' the brand color from the material where it physically does not exist. This is an expensive and often unsuccessful job.
Text contrast in video: rules that cannot be ignored
Subtitles and overlaid text in video operate by the same laws of accessibility as web interfaces, only the conditions are stricter: a small smartphone screen, moving background, autoplay without sound.
- Text contrast on video — minimum contrast 4.5:1 to background per WCAG AA
- Large headers and titles — from 3:1
- Non-text UI elements (icons, CTA buttons, progress bars) — from 3:1
- When checking contrast under a moving video background, one must verify it in the darkest and lightest frames of the scene, not the average value
In practice, this means that white text without a background on a light sky or pastel background will almost always fail the check. The solution is a fixed tile under the text (semi-transparent overlay 40–60% black) as part of the system, not a one-time editor's fix.
60-30-10 in the video frame: the same principle as in the interface
The color distribution rule works in video the same way as in UI: 60% of the frame — dominant background (neutral, often outside the brand palette), 30% — supporting color (clothing, interior, secondary graphics), 10% — accent, which the brand fully responsible for: button, CTA, logo, key banner. A common mistake in videos is trying to fill 60% of the frame with the brand color. The result looks intrusive and quickly annoys the viewer in the 15-second format.
The temperature of the palette—warm or cold—is chosen not at the editing stage, but at the storyboard phase, together with the props and lighting. Warm tones (red, orange, yellow) create a sense of urgency and proximity—they are the language of sales and stories. Cool tones (blue, green, purple) work on calmness and technicity—they are the language of SaaS products and corporate videos. The mixing of temperature within a single video without a conscious transition is perceived by the viewer as an error, not as a style.
Motion design system: how to anchor a color, not just name it
A static brand book documents color as an object — HEX, RGB, CMYK equivalent. A motion design system must document color as a process: how it appears, changes, and disappears over time. Without this layer of documentation, each new brand video will be assembled 'by eye'.
- LUT presets — ready files for color correction for each type of content (product video, interview, advertisement), so colorists do not have to reselect the grading from scratch
- Color sequence logic — rules for palette changes between scenes: for example, a cold introductory block → a warm block with CTA
- Rules for adaptive logo — how the logo and its color behave on dark/light background, during motion, when scaling to vertical format
- A library of overlays and plates with a fixed level of transparency, ensuring contrast 4.5:1
- A guide to transitions — which color transitions between scenes are acceptable, and which visually 'argue' with the brand
Such a document lives not in PDF, but in conjunction with the project file of the editing software — templates, LUTs, and title styles are connected with one click. It is exactly this that distinguishes a brand whose videos are recognizable at the first frame from one where each video is made by a new studio in its own way.
Recent articles
MegaFon, BMW, VTB and more 240+ companies. See how it looks in the showcase reel:
Our branding agency is approached to order:
Branding agency services
