标题：
为什么专业视频剪辑软件都有四个色轮？从零理解视频调色与关键帧
正文：
先分享一个正在开发的开源项目
最近，我们在开源浏览器视频编辑器 Timeline Studio 中完成了 PC 端色轮功能。
项目地址：
这次新增的能力包括：
- 阴影、中间调、高光、偏移四个色轮
- 色温、色调和全局饱和度
- 每个色轮独立的色相、饱和度和明度控制
- 15个调色属性的独立关键帧
- 色相最短路径插值
- 预览、转场和最终导出统一呈现动态调色结果
- PC端提供完整色轮，H5端保持轻量操作体验
整个项目完全开源。如果你对浏览器视频剪辑、本地AI、关键帧系统或者离线视频导出感兴趣，欢迎访问仓库。觉得项目有价值，也欢迎点一个Star，帮助更多开发者发现它。
接下来进入正文：色轮究竟是什么，为什么专业视频软件几乎都会提供这项能力？
一、第一次看到色轮，为什么会觉得复杂？
很多人第一次接触专业视频调色软件，会看到几个彩色圆盘：
- 阴影
- 中间调
- 高光
- 偏移
圆盘中间有一个可以拖动的控制点，旁边可能还有一条弧形滑杆。
对于圈外用户来说，这套界面并不直观：
- 为什么要同时放四个圆盘？
- 圆点向蓝色移动是什么意思？
- 阴影和中间调有什么区别？
- 色轮与普通滤镜有什么不同？
- 为什么色轮还需要关键帧？
其实，色轮的核心并不复杂。
它只是把“颜色方向”和“调整强度”放在同一个二维控制器中，再按照画面亮度分成不同区域。
二、一个色轮表达了什么？
色轮上的每一个方向都代表一种颜色。
将控制点向某个方向移动，表示让画面偏向对应颜色：
- 向红色移动：加入红色倾向
- 向蓝色移动：加入蓝色倾向
- 向绿色移动：加入绿色倾向
- 向黄色移动：加入黄色倾向
- 向青色或紫色移动：加入对应颜色倾向
控制点离中心越远，效果通常越明显。
因此，一个色轮同时表达了两个信息：
- 调整什么颜色
- 调整多少
控制点位于中心时，通常表示没有额外的颜色偏移。
相比单独设置红、绿、蓝三个参数，色轮更符合人的视觉直觉：想让画面更冷，就向蓝色方向移动；想让画面更暖，就向橙黄色方向移动。
三、为什么不是一个色轮，而是四个？
因为一张画面并不是所有区域都具有相同亮度。
同一帧视频中可能同时存在：
- 接近黑色的暗部
- 正常曝光的人物
- 明亮的天空
- 接近白色的灯光
- 不同亮度下的同一种颜色
如果只使用一个全局颜色控制，调整暗部的同时也会影响人物、高光和背景。
专业调色工具因此会根据亮度范围，把画面拆成多个区域。
最常见的四个色轮分别是：
- 阴影
- 中间调
- 高光
- 偏移
前三个负责不同的亮度区域，偏移负责整体颜色倾向。
四、阴影色轮：主要控制暗部
阴影色轮主要影响画面中较暗的内容，例如：
- 黑色衣服
- 头发暗部
- 夜景背景
- 室内暗角
- 背光区域
- 建筑阴影
把阴影轻微推向蓝色或青色，可以让画面产生更冷、更深沉的感觉。
这也是很多电影画面中常见的处理方式：暗部稍冷，高光稍暖，通过冷暖关系增加层次。
但是，阴影色轮非常容易调整过度。
如果移动距离太大，可能出现：
- 黑色区域明显发蓝
- 头发失去自然颜色
- 暗部出现色块
- 画面显得脏
- 低亮度区域细节丢失
因此，阴影调整通常应该克制。
如果观众第一眼就能发现“黑色被染成了蓝色”，效果往往已经过重。
五、中间调色轮：最容易影响人物肤色
中间调覆盖的是亮度适中的区域。
大多数画面主体通常都集中在这里，例如：
- 人物皮肤
- 衣服
- 墙面
- 商品主体
- 桌面
- 建筑立面
因此，中间调是最容易影响人物观感的区域。
如果人物肤色显得苍白，可以尝试将中间调轻微推向暖色。但如果调整过大，人物可能出现肤色发黄、发红或者不自然的问题。
处理人物素材时，可以优先观察：
- 脸部肤色是否自然
- 白色衣物是否发生色偏
- 眼白是否被染色
- 背景中的中性色是否受到污染
一个比较稳妥的顺序是：
- 先修正曝光。
- 再修正白平衡。
- 确认人物肤色基本自然。
- 最后使用中间调色轮塑造轻微风格。
色轮应该用于精修，而不是掩盖严重的拍摄问题。
六、高光色轮：控制画面的明亮区域
高光色轮主要影响画面中的亮部，例如：
- 天空
- 窗户
- 灯光
- 人脸受光面
- 白色衣物
- 金属反射
- 水面高光
将高光轻微推向黄色或橙色，可以增强阳光、日落或者室内暖光的感觉。
将高光推向蓝色，则可能形成清冷、夜景或者科技风格。
高光经常会和阴影形成冷暖对比。
例如：
- 阴影偏青，高光偏橙
- 阴影偏蓝，高光偏黄
- 阴影偏紫，高光偏暖
但冷暖分离并不是万能公式。
人物采访、食品、商品和自然风景对颜色真实性的要求不同。直接套用强烈的“青橙色”可能让画面看起来像滤镜，而不是自然的调色。
七、偏移色轮：影响整个画面
偏移通常也叫Offset或者全局偏移。
它不会只调整某一个亮度区域，而是整体移动画面的颜色倾向。
偏移色轮适合处理：
- 整段素材整体偏绿
- 画面整体过冷或过暖
- 不同镜头的基础颜色不一致
- 快速建立全局风格
- 为后续分区调整建立基础
例如，室内荧光灯可能让整个画面偏绿。这时可以将偏移轻微推向洋红色方向，对整体色偏进行补偿。
但如果只有暗部偏绿，高光颜色正常，那么使用偏移会影响整个画面。这种情况下，更适合使用阴影色轮。
选择哪个色轮，关键不在于“想加什么颜色”，而在于“需要修改哪个亮度区域”。
八、色轮旁边的弧形控制条是什么？
很多色轮的右侧还会显示一条弧形滑杆。
它通常控制当前区域的明度，也就是Luminance。
一个色轮实际包含三个重要维度：
- Hue：色相，决定向什么颜色偏移
- Saturation：饱和度，决定颜色偏移有多强
- Luminance：明度，决定该区域更亮还是更暗
圆盘通常负责色相和饱和度，右侧弧形滑杆负责明度。
以阴影为例：
- 圆点向蓝色移动：暗部偏蓝
- 明度降低：暗部更深
- 明度提高：暗部被抬起
这三项结合在一起，才能比较完整地控制一个亮度区域。
九、色温、色调和饱和度分别是什么？
色轮上方通常还有一些基础控制。
色温
色温主要负责冷暖变化。
- 降低色温：画面更冷、更偏蓝
- 提高色温：画面更暖、更偏黄
它经常用于修正不同光源带来的整体冷暖偏差。
色调
色调主要在绿色和洋红色之间进行平衡。
有些荧光灯、LED灯或者相机白平衡会让画面偏绿，此时可以向洋红色方向修正。
如果画面偏紫红，则可以向绿色方向调整。
饱和度
饱和度控制颜色的整体浓度。
饱和度越高，颜色越鲜艳；饱和度越低，画面越灰。降低到极端时，画面会接近黑白。
不过，全局饱和度会影响整个画面。
如果人物肤色已经正常，只有背景颜色不够鲜艳，直接提高全局饱和度可能让人物皮肤过红。此时需要使用更有针对性的颜色工具。
十、色轮和滤镜有什么区别？
滤镜更像一套预先配置好的调色方案。
用户选择一个滤镜，就可以快速获得某种风格，例如：
- 清晰
- 复古
- 冷色
- 暖色
- 柔光
- 电影感
色轮则是一套手动控制工具。
两者的主要区别是：
| 滤镜 | 色轮 |
|---|---|
| 上手更快 | 控制更精细 |
| 适合快速建立风格 | 适合校正与个性化调整 |
| 参数通常被封装 | 可以分别调整亮度区域 |
| 不一定适合所有素材 | 可以根据具体画面修改 |
| 容易形成统一模板感 | 更容易保留素材特点 |
实际剪辑中，两者并不冲突。
可以先使用滤镜建立基础风格，再通过色轮修正暗部、肤色和高光。也可以完全不使用滤镜，只通过色轮完成调色。
十一、调色不等于把画面变得更鲜艳
很多人对调色的第一印象是：
- 提高饱和度
- 增加对比度
- 压低暗部
- 套一个电影滤镜
但专业调色通常包含两个不同阶段。
第一阶段：颜色校正
目标是让素材恢复正常：
- 修正曝光
- 修正白平衡
- 统一不同镜头
- 避免高光溢出
- 保留暗部细节
- 保持肤色自然
第二阶段：风格化调色
目标是服务内容表达：
- 营造温暖感
- 制造清冷氛围
- 让暗部偏青
- 让高光偏暖
- 降低整体饱和度
- 突出品牌主色
校正追求准确和一致，风格化追求情绪和表达。
在基础颜色仍然存在问题时，直接进行风格化，很容易把问题进一步放大。
十二、为什么色轮也需要关键帧？
图片只有一个静态画面，一套参数通常就足够了。
视频却会随着时间不断变化。
例如：
- 人物从室内走到室外
- 镜头从阴影移动到阳光下
- 舞台灯光从蓝色切换为红色
- 回忆画面逐渐降低饱和度
- 日落镜头随时间逐渐变暖
- 转场前后需要不同的颜色状态
如果整段视频只使用一套固定参数，往往只能让其中一部分画面正常。
关键帧可以在不同时间点记录不同的调色状态。
例如：
- 0秒：保持自然颜色
- 2秒：中间调逐渐偏暖
- 4秒：高光加入少量黄色
- 6秒：整体饱和度逐渐降低
编辑器会计算两个时间点之间的过渡过程。
这样，调色不再是一个固定滤镜，而是一种可以随着画面内容变化的动画能力。
十三、色相关键帧为什么不能直接按数字插值？
色相不是一条直线，而是一个首尾相连的圆环。
假设一个色相关键帧是350°，下一个关键帧是10°。
在色轮上，这两个颜色其实只相差20°。正确的过渡应该跨过0°，沿最短方向移动。
如果将它当作普通数字处理，就可能出现：
350° → 180° → 10°
画面会经过大量无关颜色，产生非常突兀的变化。
正确方式应该是：
350° → 0° → 10°
这就是色相最短路径插值。
它是一个容易被忽略的实现细节，却直接决定色轮动画是否自然。
十四、初学者可以遵循的调色顺序
如果刚开始学习色轮，可以使用下面的操作顺序。
第一步：观察原始素材
暂时关闭滤镜和风格效果，判断真正的问题在哪里。
第二步：修正色温和色调
先解决整体偏蓝、偏黄、偏绿或者偏洋红。
第三步：检查曝光
确保高光没有大面积丢失，暗部仍然保留必要细节。
第四步：观察中间调
人物视频重点检查肤色，产品视频重点检查产品本身的颜色。
第五步：调整阴影和高光
使用小幅颜色偏移建立层次和氛围。
第六步：必要时调整偏移
处理整体色偏，或者统一不同镜头。
第七步：反复进行前后对比
人眼很容易适应偏色。长时间观看调整后的画面，会逐渐失去准确判断。
第八步：为光线变化添加关键帧
如果画面在不同时间段有明显变化，不要强行用一套参数处理整段视频。
十五、浏览器里实现色轮，需要解决什么？
在浏览器视频编辑器中加入色轮，并不只是画出几个彩色圆盘。
完整实现至少需要考虑：
1. 数据结构
需要保存：
- 全局色温
- 全局色调
- 全局饱和度
- 四个色轮各自的色相
- 四个色轮各自的饱和度
- 四个色轮各自的明度
2. 交互映射
需要把鼠标在圆盘中的位置转换成色相与饱和度，同时限制控制点不能超出圆盘。
3. 关键帧系统
每一个调色属性都需要：
- 添加关键帧
- 删除关键帧
- 判断当前时间是否存在关键帧
- 在关键帧之间进行插值
- 在没有关键帧时回退到基础值
4. 色相环形插值
需要处理0°与360°相连的问题，确保色相沿最短路径变化。
5. 预览与导出一致
如果编辑器预览使用一套参数，而最终导出使用另一套计算方式，就会出现“编辑时正常，导出后变色”的问题。
因此，预览、转场和离线导出应该共享相同的调色解析逻辑。
6. 桌面与移动端差异
桌面端适合展示完整的四个色轮和精细参数。
移动端屏幕空间有限，如果直接照搬桌面布局，会出现圆盘过小、操作困难和面板拥挤等问题。
因此，Timeline Studio当前将完整色轮放在PC端，H5继续保留更适合移动操作的视频变速等能力。
十六、开源实现与在线体验
目前，这套色轮能力已经集成到Timeline Studio中。
Timeline Studio是一个本地优先的浏览器AI视频编辑器，项目包含：
- 多轨视频时间线
- 图片与视频剪辑
- 显式关键帧
- 字幕与贴纸
- 多语言AI配音
- 浏览器本地AI音乐
- AI修复
- 智能画面
- 人声分离
- 滤镜与色轮
- 确定性离线导出
- 可移植的
.timeline项目文件
如果你对实现细节感兴趣，可以直接查看仓库中的色轮数据结构、关键帧解析、编辑器交互以及预览和导出路径。
欢迎提交Issue、交流实现方案或者参与贡献。如果这个项目对你有帮助，也欢迎给仓库点一个Star。
