为什么专业视频剪辑软件都有四个色轮？从零理解视频调色与关键帧

标题：

为什么专业视频剪辑软件都有四个色轮？从零理解视频调色与关键帧

正文：

先分享一个正在开发的开源项目

最近，我们在开源浏览器视频编辑器 Timeline Studio 中完成了 PC 端色轮功能。

项目地址：

GitHub：https://github.com/MartinDelophy/ai-video-editor 在线体验：https://video-editor.ai-creator.top

这次新增的能力包括：

阴影、中间调、高光、偏移四个色轮 色温、色调和全局饱和度 每个色轮独立的色相、饱和度和明度控制 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。