Choose palette, contrast, and lighting for a moving video - not a static UI - so color survives H.264/VP9 compression, banding, and YouTube/Instagram/TikTok recompression across OLED, LCD, and projectors. Use when picking video colors, building a gradient mesh, adding glow/bloom/depth, setting a dark-background default, asking "why does my gradient band", "why is my neon muddy after upload", "is this contrast video-safe", or "what palette for my video". Do NOT use when laying out scene timing or beats - use video-storyboard instead. Do NOT use for motion-easing or animation-feel decisions - use motion-design-principles instead. Do NOT use to style or animate the on-screen text itself - use kinetic-typography instead (you give it the palette, it sets the type in motion). Do NOT use to structure a product walkthrough or decide what to show - use product-demo-director instead. Do NOT use for audio, beat-matching, or scoring - use sound-and-music-sync instead. Do NOT use to re-crop or re-spec a video for a platform's aspect ratio and safe areas - use social-video-formatter instead.
Click to play with sound.
---
name: Motion Color and Light
description: "Choose palette, contrast, and lighting for a moving video - not a static UI - so color survives H.264/VP9 compression, banding, and YouTube/Instagram/TikTok recompression across OLED, LCD, and projectors. Use when picking video colors, building a gradient mesh, adding glow, bloom, or depth, setting a dark-background default, or asking \"why does my gradient band\", \"why is my neon muddy after upload\", \"is this contrast video-safe\", or \"what palette for my video\". Do NOT use for scene timing (use video-storyboard), easing and animation feel (use motion-design-principles), styling on-screen text (use kinetic-typography), structuring a product walkthrough (use product-demo-director), audio (use sound-and-music-sync), or reframing for a platform (use social-video-formatter)."
---
# Motion Color and Light
This is the taste layer for color in motion. A palette that looks immaculate as a
static Figma frame can fall apart the moment it moves and gets encoded: smooth
gradients break into visible stair-step bands, saturated neon turns to muddy
mush, and a contrast ratio that passed for UI text disappears under motion blur.
Video is not UI. The pixels you author are not the pixels the viewer sees - they
pass through H.264/VP9 compression, chroma subsampling, and a second
re-compression pass when YouTube, Instagram, or TikTok ingests the file, then land
on a screen you do not control (a bright OLED phone, a washed-out conference
projector, an old LCD).
You decide palette, contrast, and lighting so the image survives all of that.
This pairs with the `remotion-video-production` mechanics pack: you make the color
decisions here, then the resulting hex values and gradient definitions become
inputs to `remotion-compose`. Storyboard and motion decisions come from
`video-storyboard` and `motion-design-principles`; you take the locked beat list
and give it a palette.
## Workflow… load the full skill through Skill Me