color-motion

动态色彩

为动态设计选择、搭配并制作动画色彩：构建克制的调色板，创建显得高级的渐变，在感知均匀的色彩空间中插值颜色，并为作品调色以营造氛围、保持一致性。生成包含精确 OKLCH/hex 值的调色板、渐变 CSS/代码和过渡参数。

适用场景

• 为动态或视频作品挑选或搭配调色板。
• 构建渐变背景（网格、噪点、动态漂移）。
• 制作颜色过渡动画（按钮状态、主题切换、加载动画）。
• 为视频调色以营造氛围，或修复暗淡、发灰的渐变插值效果。
• 修复 After Effects 渲染中褪色、伽马偏移或平台间不一致的问题，并选择正确的平台导出/色彩标签。

核心技巧

1. 构建克制的调色板

限制色相。优秀的动态调色板应包含 1 种主色 + 1 种强调色 + 2-3 种中性色。通过明度和色度，而不是增加更多色相，来塑造对比和层次。额外的色相会争夺注意力，显得不够专业。

在暗色场景中，使用低至中等色度和较高明度，而非最高饱和度，让强调色脱颖而出——过饱和的强调色会刺眼，在暗色背景上显得廉价。

使用 OKLCH 来理解颜色：oklch(L C H)，其中 L 是感知明度（0-1），C 是色度（0 ≈ 0.37 最大值），H 是色相角（0-360）。保持 L 和 C 不变并旋转 H，可得到视觉分量真正相等的色相——这在 HSL 中无法可靠实现。

Primary:   oklch(0.62 0.19 264)   /* confident blue */
Accent:    oklch(0.78 0.17 50)    /* warm amber, lighter so it pops */
Neutral-0: oklch(0.97 0.005 264)  /* near-white, faint hue tint */
Neutral-1: oklch(0.55 0.01 264)
Neutral-2: oklch(0.18 0.015 264)  /* near-black, same hue family */

将中性色略微调向主色的色相（使用极低色度），能让画面更统一；纯灰色中性色与彩色元素相邻时，会显得格格不入。

2. 使用 OKLCH 或 Lab 插值——切勿直接在 sRGB 中插值

在 sRGB 中对两种颜色进行线性插值，会经过一个去饱和、通常发灰或浑浊的中点（蓝色→黄色会经过灰色；蓝色→红色会经过浑浊的紫色）。感知色彩空间（OKLCH、OKLab、CIE Lab）能让中点保持鲜明，明度也更均匀。

CSS 渐变原生支持此功能：

/* Vivid, even midpoint */
background: linear-gradient(in oklch, #2b6cff, #ffb02e);

/* Control hue path around the wheel for two-stop gradients */
background: linear-gradient(in oklch longer hue, #2b6cff, #ffb02e);
background: conic-gradient(in oklch, red, blue, red);

制作动画过渡时，可使用库进行插值（参见参考资料）并输出逐帧颜色；对于双色 CSS 过渡，可注册带类型的自定义属性，让浏览器在选定的色彩空间中进行插值。

3. 营造高级质感的渐变

• 网格 / 多重径向渐变：在底色上以不同位置叠加多个 radial-gradient。效果柔和、自然，富有质感。
• 添加颗粒：覆盖一层淡淡的噪点（SVG feTurbulence 或不透明度约为 3-5% 的平铺 PNG），可消除色带并增加纹理。
• 缓慢动画：在 8-20s 内使用 ease-in-out alternate 缓慢移动渐变位置。缓慢更显高级；快速移动的渐变看起来像屏幕保护程序。

.mesh {
  background-color: #0b0f1a;
  background-image:
    radial-gradient(at 20% 25%, oklch(0.62 0.19 264 / 0.7), transparent 50%),
    radial-gradient(at 80% 30%, oklch(0.70 0.16 320 / 0.6), transparent 55%),
    radial-gradient(at 50% 85%, oklch(0.78 0.17 50  / 0.5), transparent 50%);
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift {
  to { background-position: 8% -6%, -8% 6%, 4% 8%; }
}

4. 颜色过渡动画

在此补充基本计时参数，让这项技能可独立使用：进入/高亮时使用缓出（cubic-bezier(0.16, 1, 0.3, 1)），状态变化持续 150-300ms，主题/全屏色彩过渡持续 400-800ms。仅在连续循环中使用 linear。

@property --c { syntax: "<color>"; initial-value: #2b6cff; inherits: false; }
.btn { background: var(--c); transition: --c 200ms cubic-bezier(0.16,1,0.3,1); }
.btn:hover { --c: #ffb02e; }

注册 @property 才能让颜色真正进行插值（未注册的自定义属性会瞬间跳变）。

5. 按正确顺序调色以营造氛围

按以下顺序进行调色；调整顺序会改变结果：

1. 曝光 / 白平衡——先修正整体亮度，并中和色偏或有意设置色偏。
2. 对比度——设置黑场和白场；扩展或压缩色调范围。
3. 中间调 / 饱和度——调整整体饱和度和中间调色彩。
4. 分离色调——分别为阴影和高光着色。经典电影质感是青色阴影 + 橙色高光（互补色，能衬托肤色）。效果要微妙。
5. 统一色调——最后整体添加色调/LUT，并加上轻微暗角，让画面更统一。

在代码中，可通过串联 CSS 滤镜或片段着色器进行调色；处理视频时，则使用实际的 LUT 或调色面板。始终让整部作品的调色保持一致，以确保各镜头衔接自然。

6. 视频 / 渲染色彩管理

如果渲染在 After Effects 合成查看器中看起来正常，但在 QuickTime、浏览器中，或在 macOS/Windows 系统间显得褪色、过亮、发灰或伽马偏移，原因是 4 个阶段之间的伽马 / 传递函数不匹配——AE 工作空间、渲染文件内嵌的标签、播放器的解读方式，以及显示器 / 操作系统伽马——而不是画面本身。

核心规则：

• 设置明确的工作空间。 File > Project Settings > Color 选项卡：SDR 视频的 Working Space = Rec.709 Gamma 2.4（或 UI / 静态图像使用 sRGB）；“None”会关闭色彩管理，导致查看器显示的效果与最终效果不符。将 Depth 设为 16 bpc，以避免调色 / 渐变出现色带。
• Rec.709 与 sRGB。 两者使用相同的原色，但传递函数不同（sRGB 为分段式，约 2.2；Rec.709 显示为 2.4 / BT.1886）。使用错误的标准会改变中间调亮度——视频使用 Rec.709，屏幕截图 / PNG / UI 使用 sRGB。
• 导出时嵌入色彩标签。 macOS / Windows / 播放器之间出现偏移，是因为文件未带标签；各播放器会自行猜测默认值。在 Render Queue > Output Module > Color Management 中明确标记 Rec.709（或 sRGB）（出现偏移时不要保留“Preserve RGB”）。
• QuickTime 伽马错误。 QuickTime / AVFoundation 会额外应用约 1.96 的伽马，因此文件可能在 QuickTime 中看起来正常，却在 Chrome 中显得更暗、对比度更高。切勿以 QuickTime 作为调色或审核的依据——对于网页交付，应以 Chrome、Premiere 或 Resolve 为准。
• 让预览与最终效果一致。 审看时，在合成查看器中切换“Use Display Color Management”，并通过数值验证导出结果：放置一块 50% 灰色（RGB 128）的色块，渲染后重新采样——数值升高（128 → 150+）即可确认发生了褪色的伽马偏移。使用 ffprobe 确认内嵌标签（color_primaries/color_transfer/color_space = bt709）。

各平台导出一览：用于剪辑母版的 ProRes 422 HQ/4444，标记为 Rec.709；用于网页 / <video> / 社交平台的 H.264 (MP4)，标记为 Rec.709（在 Chrome 中验证）；透明内容使用 ProRes 4444 + alpha → PNG (sRGB)；HDR 使用 ProRes 4444 / HEVC 10-bit Rec.2020 PQ/HLG（需要 32 bpc float）。

完整的诊断决策树、准确的菜单路径、各平台导出表、QuickTime 变通方案、各操作系统 / 播放器的伽马值、数值测试色块方法、ffprobe/ffmpeg 标签命令、有限范围与全范围的常见问题，以及导出前检查清单，请参阅 references/color-management.md。

交付与验证（独立 HTML）

打包的辅助脚本（scripts/）：scripts/seek-shot.sh anim.html 0 1.5 3 会冻结 ?t=N 测试工具，并为每个时刻截图；scripts/contact-sheet.sh sheet.png frame-*.png 会将图片拼成一张图，方便一眼查看。请参阅 scripts/README.md。

交付 Web 调色板、渐变或颜色过渡时，请提供一个可直接在浏览器中打开的 .html 文件——无需构建步骤。颜色处理由 CSS 完成；文件自包含。

输出要求：

• 一个 .html 文件：包含你的标记，以及内嵌在 <style> 中的渐变/过渡（仅在需要 JS 插值库时使用 CDN）。
• 一个动画驱动器——CSS @keyframes 漂移或单个 @property 过渡；不得有相互竞争的驱动器。
• 加入下方的冻结测试工具，以便对任意时刻进行确定性截图。

冻结测试工具——固定 CSS 动画帧以供截图。 ?t=N 会设置负的 animation-delay 并暂停动画，使渐变/过渡精确停在第 N 秒的画面。

<script>
  const t = new URLSearchParams(location.search).get("t");
  if (t !== null) {
    document.querySelectorAll(".bg, .btn").forEach(el => {       // animated elements
      el.style.animationDelay = (-parseFloat(t)) + "s";
      el.style.animationPlayState = "paused";
    });
  }
  window.__ready = true;                                          // ready signal for headless wait
</script>

验证流程——渲染 → 冻结 → 截图 → 检查：

1. 将文件分别冻结在开始/中间/结束位置：…/color.html?t=0、?t=<period/2>、?t=<period>。
2. 对每个冻结帧截图。
3. 检查保真度（是否符合调色板/需求）和颜色瑕疵——在每个冻结帧确认渐变/过渡没有色带，也没有浑浊或灰暗的中间色（OKLCH/Lab 路径应保持鲜艳）。如果出现色带，请添加颗粒效果。
4. 迭代：如果出现色带或浑浊/灰暗的中间色，请调整 OKLCH/Lab 色度和明度（或添加颗粒效果），重新渲染相同的 ?t=N，并重新截图以确认修复有效——持续循环，直到每个冻结帧都无瑕疵。

npx playwright screenshot --wait-for-timeout=500 "file://$PWD/color.html?t=8" frame-mid.png

完成前请确认：

1. 可在浏览器中独立打开——没有控制台错误，也没有缺失的 CDN。
2. 只有一个颜色驱动器；?t=N 能正确冻结精确帧。
3. 已对开始/中间/结束位置截图——没有色带、浑浊/灰暗的中间色，明度均匀。
4. 遵循 prefers-reduced-motion 设置（暂停漂移，显示静态且易读的画面）。
5. 插值使用 OKLCH/Lab（渐变/@property），绝不使用原始 sRGB。

快速参考

需求	做法
调色板大小	1 种主色 + 1 种强调色 + 2-3 种中性色
等权重色相	在 OKLCH 中保持 L、C 不变，改变 H
鲜艳渐变	linear-gradient(in oklch, ...)
平滑的颜色动画	在 OKLCH/Lab 中进行插值，通过 @property 注册
高级感背景	叠加多个径向渐变 + 颗粒效果 + 8-20 秒缓慢漂移
电影感调色	青绿色阴影/橙色高光，效果微妙
修复 AE 渲染褪色问题	在 Output Module > Color Management 中标记 Rec.709；在 Chrome 中验证
避免	原始 sRGB 插值（会产生浑浊的中间色）；对 QuickTime 调色

参考文件

• references/palettes-and-interpolation.md — 调色板构建规则（含 OKLCH 数值和命名方案）、渐变指南（网格、圆锥、颗粒效果）、用于感知插值和色阶的 culori 与 d3-interpolate 代码，以及完整的调色顺序检查清单（含滤镜/着色器示例）。
• references/color-management.md — 完整的视频/渲染色彩管理指南：诊断决策树、AE 项目/输出色彩设置（含精确菜单路径）、各平台导出表、QuickTime 伽马错误的解决方法、各操作系统/播放器的伽马值、数值测试色块方法、ffprobe/ffmpeg 标签验证、有限范围与全范围的常见问题，以及导出前检查清单。