视频调色中的四个色轮是什么？从阴影、中间调、高光到关键帧，一篇讲明白

先介绍一下开源项目

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

项目地址：

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

目前支持：

• 阴影、中间调、高光、偏移四个色轮
• 色温、色调和全局饱和度
• 每个色轮独立的色相、饱和度和明度
• 15个调色属性的独立关键帧
• 色相最短路径插值
• 图片和视频动态调色
• 预览、转场与最终导出效果统一
• PC端完整色轮，H5端保留更轻量的视频操作体验

Timeline Studio 是一个本地优先的浏览器 AI 视频编辑器，支持多轨时间线、字幕、关键帧、AI配音、AI音乐、AI修复、滤镜和离线导出。

如果你对浏览器视频编辑、WebCodecs、本地AI或者关键帧系统感兴趣，欢迎访问仓库。如果项目对你有帮助，也欢迎点一个 Star。

下面进入正文。

一、色轮到底是什么？

第一次打开专业视频剪辑软件时，很多人都会看到几个彩色圆盘：

• 阴影
• 中间调
• 高光
• 偏移

这些圆盘就是调色工具中的“色轮”。

简单来说，色轮是一种二维颜色控制器：

• 圆盘方向代表颜色
• 控制点离中心的距离代表调整强度
• 控制点位于中心时，表示没有额外色彩偏移

例如：

• 向蓝色方向拖动，画面会偏蓝
• 向黄色方向拖动，画面会偏黄
• 向绿色方向拖动，画面会偏绿
• 拖动距离越大，颜色倾向越明显

相比红、绿、蓝三个独立滑杆，色轮更符合人的视觉直觉。

想让画面冷一点，可以向蓝色移动；想让画面暖一点，可以向橙色或黄色移动。

二、为什么专业软件通常有四个色轮？

因为一张画面中，不同区域的亮度并不相同。

同一帧视频里可能同时存在：

• 接近黑色的头发和阴影
• 正常曝光的人物皮肤
• 明亮的天空和窗户
• 接近白色的灯光

如果只有一个全局颜色控制，调整暗部时，人物和天空也会受到影响。

因此，专业调色工具会按照亮度范围拆分画面：

这样就可以分别控制不同亮度区域。

三、阴影色轮：控制暗部颜色

阴影色轮主要影响画面中较暗的内容，例如：

• 黑色衣服
• 头发暗部
• 夜景背景
• 房间暗角
• 建筑阴影
• 逆光区域

将阴影轻微推向蓝色或者青色，可以让画面产生清冷、安静或深沉的感觉。

许多影视画面都会让暗部稍微偏冷，再让高光稍微偏暖，从而形成冷暖层次。

但阴影色轮非常容易调整过度。

常见问题包括：

• 黑色区域明显发蓝
• 暗部出现色块
• 头发失去自然颜色
• 画面看起来发脏
• 阴影细节被压没

所以阴影调整通常应该小幅进行。

如果观众第一眼就能看出暗部被染成了蓝色，往往说明效果已经过重。

四、中间调色轮：最容易影响人物肤色

中间调主要覆盖亮度适中的区域。

大多数画面主体都会集中在中间调，例如：

• 人物皮肤
• 衣服
• 商品主体
• 墙面
• 建筑立面
• 桌面和家具

因此，中间调也是最容易影响人物肤色的区域。

如果人物显得苍白，可以将中间调轻微推向暖色。但如果调整过大，可能出现：

• 肤色发黄
• 面部发红
• 眼白被染色
• 白色衣服出现色偏
• 背景中性色受到污染

处理人物素材时，建议按照以下顺序操作：

色轮适合精细修正和风格塑造，不应该被用来掩盖严重的曝光问题。

五、高光色轮：塑造光线氛围

高光色轮主要影响画面中的明亮区域，例如：

• 天空
• 窗户
• 灯光
• 人脸受光面
• 白色衣服
• 金属反光
• 水面高光

将高光轻微推向黄色或橙色，可以增强阳光、日落或室内暖光的感觉。

将高光推向蓝色，则可以形成夜景、清冷或科技氛围。

高光经常与阴影形成冷暖关系，例如：

• 阴影偏青，高光偏橙
• 阴影偏蓝，高光偏黄
• 阴影偏紫，高光偏暖

不过，“青橙色”并不是所有素材都适用的万能公式。

人物采访、食品、商品和自然风景，对颜色真实性的要求都不一样。调色应该服务于内容，而不是机械套用某种模板。

六、偏移色轮：整体改变画面颜色

偏移也叫 Offset 或全局偏移。

它与阴影、中间调、高光最大的不同是：偏移会影响整个画面，而不是只处理某一个亮度区域。

偏移适合处理：

• 整段素材整体偏绿
• 画面整体过冷或过暖
• 不同镜头颜色不统一
• 快速建立全局色彩倾向
• 为后续分区调色打基础

例如，室内灯光让整个画面偏绿时，可以将偏移轻微推向洋红色方向。

但如果只有暗部偏绿，而人物和高光颜色正常，就不应该使用全局偏移，而应该调整阴影色轮。

选择色轮时，不仅要考虑“想加入什么颜色”，还要判断“需要修改哪个亮度区域”。

七、色轮右侧的弧形滑杆是什么？

很多色轮旁边还有一个弧形控制条。

它通常用于控制当前区域的明度，也就是 Luminance。

一个完整的色轮通常包含三个维度：

• Hue：色相，决定偏向什么颜色
• Saturation：饱和度，决定颜色倾向有多强
• Luminance：明度，决定当前区域更亮还是更暗

圆盘主要控制色相和饱和度，右侧弧形滑杆控制明度。

以阴影色轮为例：

• 圆点向蓝色移动：暗部偏蓝
• 明度降低：暗部变深
• 明度提高：暗部被抬起

颜色与亮度组合起来，才能完整地塑造一个区域。

八、色温、色调和饱和度有什么区别？

色轮面板中通常还会提供几个基础参数。

1. 色温

色温主要控制画面的冷暖：

• 降低色温：画面更冷、更偏蓝
• 提高色温：画面更暖、更偏黄

色温常用于修正不同光源带来的整体偏差。

2. 色调

色调通常在绿色与洋红色之间进行平衡。

某些荧光灯、LED灯或者错误的相机白平衡会让画面偏绿，这时可以向洋红色方向修正。

如果画面偏紫红，则可以向绿色方向调整。

3. 饱和度

饱和度控制颜色的整体浓度：

• 提高饱和度：颜色更加鲜艳
• 降低饱和度：画面更加灰
• 降低到极端：画面接近黑白

但全局饱和度会影响所有颜色。

如果人物肤色已经正常，只有背景颜色不够鲜艳，直接提高全局饱和度可能会让人物皮肤过红。

九、色轮和滤镜有什么区别？

滤镜更像一组预设好的参数，色轮则是精细的手动控制工具。

两者并不冲突。

实际剪辑时，可以先通过滤镜建立基础风格，再使用色轮修正人物肤色、暗部和高光。

也可以完全不使用滤镜，只通过色轮完成调色。

十、调色不等于提高饱和度

很多初学者会把调色理解为：

• 增加对比度
• 提高饱和度
• 压低暗部
• 套一个电影滤镜

但完整的调色通常包含两个阶段。

第一阶段：颜色校正

目标是让素材恢复正常：

• 修正曝光
• 修正白平衡
• 统一不同镜头
• 避免高光过曝
• 保留暗部细节
• 保持人物肤色自然

第二阶段：风格化调色

目标是服务内容表达：

• 营造温暖感
• 制造清冷氛围
• 让暗部稍微偏青
• 让高光稍微偏暖
• 降低整体饱和度
• 突出品牌主色

颜色校正追求准确和统一，风格化调色追求情绪和表达。

如果素材本身还存在明显曝光或白平衡问题，直接进行风格化，通常只会把问题进一步放大。

十一、为什么色轮也需要关键帧？

图片是静态的，一组调色参数通常就够了。

视频则会随着时间不断变化，例如：

• 人物从室内走到室外
• 镜头从阴影移动到阳光下
• 舞台灯光从蓝色切换为红色
• 回忆画面逐渐降低饱和度
• 日落镜头随时间逐渐变暖
• 转场前后需要不同的色彩状态

如果整段视频只使用一套固定参数，只能保证其中一部分画面正常。

关键帧可以在不同时间点记录不同的调色状态。

例如：

• 0秒：保持自然颜色
• 2秒：中间调逐渐偏暖
• 4秒：高光加入少量黄色
• 6秒：整体饱和度逐渐降低

编辑器会自动计算两个关键帧之间的过渡。

这样，调色就不再是一套静态滤镜，而是可以随着画面内容变化的动画效果。

十二、色相为什么要使用最短路径插值？

色相不是普通的线性数值，而是一个首尾相连的圆环。

假设前一个色相是350°，后一个色相是10°。

它们在色轮上其实只相差20°。正确的过渡应该跨过0°：

350° → 0° → 10°

如果按照普通数字插值，就可能变成：

350° → 180° → 10°

画面会经过大量无关颜色，产生突兀的彩色变化。

因此，色相关键帧需要使用最短路径插值。

一个常见的计算思路是：

const delta = ((nextHue – currentHue + 540) % 360) – 180;
const hue = (currentHue + delta * progress + 360) % 360;

其中：

• currentHue 是前一个色相
• nextHue 是后一个色相
• progress 是0到1之间的插值进度

通过这种方式，色相会沿色轮中的较短方向变化。

十三、浏览器中实现色轮，需要解决哪些问题？

在浏览器视频编辑器中加入色轮，并不只是绘制几个彩色圆盘。

完整实现通常需要处理以下问题。

1. 调色数据结构

需要保存：

• 色温
• 色调
• 全局饱和度
• 四个色轮各自的色相
• 四个色轮各自的饱和度
• 四个色轮各自的明度

一共包含15个可以独立变化的属性。

2. 圆盘交互映射

需要将鼠标或触控位置转换为：

• 色相角度
• 饱和度距离
• 控制点坐标

同时还需要限制控制点不能超出圆形边界。

3. 关键帧操作

每个属性都要支持：

• 添加关键帧
• 删除关键帧
• 检查当前时间是否已有关键帧
• 修改当前关键帧
• 在相邻关键帧之间插值
• 没有关键帧时回退到基础值

4. 预览和导出一致性

如果编辑器预览和最终导出采用不同的调色计算方式，就会出现：

• 预览正常，导出偏色
• 转场期间颜色跳变
• 关键帧动画在导出后失效
• 视频与图片表现不一致

因此，预览、转场和离线导出应该共享同一套调色解析逻辑。

5. 桌面端与移动端差异

桌面端有足够空间展示四个色轮和精细参数。

移动端如果直接照搬桌面布局，可能出现：

• 色轮过小
• 控制点难以拖动
• 面板过长
• 操作密度过高
• 与时间线争夺屏幕空间

因此，Timeline Studio 当前将完整色轮放在PC端，H5端继续保留更适合移动操作的视频变速等能力。

十四、Timeline Studio目前实现了什么？

目前，Timeline Studio中的色轮功能包括：

• 独立的PC端“色轮”标签
• 阴影色轮
• 中间调色轮
• 高光色轮
• 偏移色轮
• 色温、色调、全局饱和度
• 各色轮独立的色相、饱和度和明度
• 15项调色属性独立关键帧
• 一键添加全部调色关键帧
• 色相最短路径插值
• 图片与视频统一调色
• 动态预览、转场和导出结果统一
• H5端不显示色轮，保留视频变速入口

项目完全开源，可以直接查看具体实现：

• 调色数据与插值逻辑
• 色轮交互组件
• 关键帧读写
• 预览滤镜合成
• 离线导出渲染
• PC与H5功能分流

GitHub仓库：

https://github.com/MartinDelophy/ai-video-editor

在线体验：

https://video-editor.ai-creator.top

十五、一个适合初学者的调色顺序

如果刚开始接触色轮，可以按照以下顺序操作。

第一步：关闭风格滤镜

先观察原始素材，判断真正的问题在哪里。

第二步：修正色温和色调

优先解决整体偏蓝、偏黄、偏绿或者偏洋红。

第三步：检查曝光

确保高光没有大面积过曝，暗部仍然保留必要细节。

第四步：观察中间调

人物视频重点观察肤色，商品视频重点观察产品本身的颜色。

第五步：调整阴影和高光

小幅建立冷暖层次，不要追求强烈效果。

第六步：必要时调整偏移

处理全局色偏，或者统一不同镜头的基础颜色。

第七步：频繁进行前后对比

人眼很容易适应偏色。长时间观看调整后的画面，会逐渐失去准确判断。

第八步：为光线变化添加关键帧

如果视频不同时间段的光线明显不同，不要强行使用一套固定参数。

总结

理解色轮，可以先记住四句话：

• 阴影控制暗部
• 中间调主要影响主体和肤色
• 高光控制亮部和光线氛围
• 偏移改变整个画面的颜色倾向

色轮并不是为了让画面变得更艳，而是让不同亮度区域得到更准确、更有目的的颜色控制。

好的调色往往来自一系列幅度很小、方向明确的调整。

观众可能无法说出阴影增加了多少青色、高光提高了多少暖色，但会感觉画面更加统一、舒服，并且更符合内容想表达的情绪。

如果你对浏览器视频编辑、关键帧系统、WebCodecs、本地AI模型或者离线视频导出感兴趣，欢迎体验并关注Timeline Studio。

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

项目完全开源，欢迎提交Issue、参与讨论或贡献代码。如果它对你有帮助，也欢迎给仓库点一个Star。