skills.rest
iart-ai
iart-aiOFFICIAL
Explore all skills by this author →
GitHub

color-motion

Standardize color palettes, perceptual interpolation, and video render color management for motion design.

12|5|Updated Jun 22, 2026
Search Tags:#rendering#color#motion#grading#oklch#gradients
One-click install
npx skills add https://github.com/iart-ai/motion-design-skills --skill color-motion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-motion
Source: https://github.com/iart-ai/motion-design-skills/tree/main/skills/color-motion
Command: npx skills add https://github.com/iart-ai/motion-design-skills --skill color-motion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill resolves common motion design frustrations like muddy gradient midpoints, inconsistent color transitions, and washed-out video renders by providing professional-grade color management and interpolation techniques.

Core Features & Use Cases

  • Perceptual Color Interpolation: Uses OKLCH and Lab color spaces to ensure smooth, vivid transitions that avoid the gray midpoints typical of sRGB.
  • Premium Gradient Construction: Provides recipes for mesh gradients, noise-textured backgrounds, and slow-drift animations that look high-end.
  • Color Management: Offers a decision tree and verification workflow to fix gamma shifts, Rec.709 vs sRGB mismatches, and QuickTime playback issues.

Quick Start

Use the color-motion skill to generate a premium mesh gradient background with a slow drift animation for my hero section.

Frequently Asked Questions about color-motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why do my CSS gradients have muddy gray midpoints and how do I fix them?▼

Muddy gradient midpoints occur when interpolating in sRGB. Using OKLCH color space for perceptual color interpolation ensures smooth, vivid gradient transitions that avoid the washed-out gray midpoints typical of standard RGB blending.

How do I fix gamma shifts and washed-out color in video renders?▼

Fix washed-out video renders by applying a color management decision tree to resolve gamma shifts and Rec.709 vs sRGB mismatches, ensuring explicit color tagging and consistent cross-platform display across programmatic video and After Effects workflows.

Can I use this color grading workflow for After Effects and web CSS animations?▼

Yes, this standardizes color palette construction for both After Effects color grading workflows and web-based CSS animations, requiring adherence to OKLCH color space principles and explicit color tagging for consistent cross-platform display.

What is the best way to generate a premium mesh gradient background with drift animation?▼

Generate premium mesh gradients, noise-textured backgrounds, and slow-drift animations by applying perceptual color interpolation recipes, ensuring high-end motion design outputs that maintain consistent color across web and video rendering platforms.

How do I resolve Rec.709 vs sRGB color mismatches in QuickTime playback?▼

Resolve Rec.709 vs sRGB mismatches and QuickTime playback issues by applying an explicit color verification workflow and decision tree, standardizing your video render color management to prevent gamma shifts and inconsistent color transitions.

Related Skills

Explore More Design & Creative Skills→
tenzirtenzir
2

styling-tenzir-ui

Provide Tenzir design system tokens and CSS component specifications for UI styling.

Official
Basic
Emz1998Emz1998

ux-prototyping

Generate interactive single-file HTML prototypes from UX specifications.

Community
Advanced
Emily2040Emily2040
6.3k

seedance-pipeline

Integrates Seedance 2.0 video generation with ComfyUI nodes and post-processing chains.

Community
Advanced
shipiitshipiit

color-engineering

Generate OKLCH color ramps and dark-mode tokens with WCAG and APCA contrast checks.

Official
Advanced