Color in Motion Design: Temporal Color and the Moving Image

Static color theory teaches us how colors relate to each other in a fixed moment. Motion design adds a dimension that static theory completely misses: time. Color in motion is not just color with animation applied to it — temporal color creates effects, meanings, and problems that have no equivalent in static design. The most fundamental temporal color effect is contrast over time. Two colors that appear clearly distinct when placed side by side on a static canvas may blur into each other when transitioned quickly. Conversely, a color shift that looks dramatic as a static before/after comparison can feel almost imperceptible in a fast animation because the eye doesn’t have time to compare. The effective contrast of a color transition is a function of both the chromatic difference and the transition duration. Fast animations require higher chromatic contrast to read as deliberate change; slow animations can use subtler color shifts while still registering as meaningful. Easing functions interact with color in non-obvious ways. A linear color transition from red to blue moves through purple at the midpoint. An ease-in-out transition spends more time near the start and end values, which means purple is a brief flash rather than a sustained midpoint. In OKLCH color space (which interpolates along perceptually uniform paths), the same easing creates different intermediate colors than in sRGB. OKLCH interpolation avoids the desaturated gray muddy middle that sRGB transitions often produce when crossing hue regions. For motion design, OKLCH color interpolation is almost always preferable to sRGB for any color-to-color transition. Temporal contrast also creates perceived brightness shifts independent of actual luminance changes. When a dark background transitions to a light background quickly, the eye’s adaptation lag creates a momentary perceptual brightness spike — the interface appears to flash even if the transition is technically smooth. This is particularly relevant for dark/light mode toggle animations. A gradual transition that goes through intermediate gray values is perceptually smoother than a sharp linear transition between the two extremes, even though the linear transition technically has more uniform intermediate steps. Color in video and motion graphics faces the additional challenge of format-specific color spaces. Web video (sRGB, Rec. 709) clips at the edges of sRGB; HDR display formats (HDR10, Dolby Vision) extend into a wider gamut but require mastering decisions about peak luminance and tone mapping. When brand colors are defined in sRGB hex values and then used in video production workflows, the colors should be converted to the production color space (typically Rec. 709 for web video) rather than naively applied as hex values. A color that is correctly specified for a UI component may be out-of-gamut or perceptually shifted in a video context.