3.2色彩基础
用色相、饱和度、亮度三个数描述颜色,看懂色相环、互补色和冷暖,再用取色器和「色彩调和」从角色设定里提取配色、判断配色关系,为调色和还原角色颜色打底。
- 3 小时
- 基础
- Procreate
学完你能做到
- 说清色相、饱和度、亮度各管什么,会在「值」面板里读出 HSB 数值
- 在色相环上找到一个颜色的互补色,知道互补色混在一起为什么会变灰
- 判断一组颜色是互补、补色分割、近似、三等分还是矩形关系
- 用面积、互补平衡、冷暖主调三条法则说出一组配色好看或刺眼的原因
- 从角色设定图里提取 3~5 个代表色,存成调色板
修图里每一个调色操作,背后都是这节课的几件事:整张照片偏黄就往蓝拉,是因为黄和蓝互补(皮肤本身偏黄要先分清是缺蓝还是绿多,见 3.3 课);肤色发灰,是因为饱和度掉了;角色假发颜色不对,要先用数字说清楚差在哪。这节课先把"颜色"变成能读、能比较的数字。
这节课的示意图
文中的界面图是按 Procreate 5 的布局画的示意图,不是真机截图,按钮的细节和位置以你 iPad 上的实际界面为准。示例角色是为了讲解编的,不对应任何作品。
先弄懂:颜色是怎么描述的
一个颜色 = 色相 + 饱和度 + 亮度
Procreate 的「值」面板用 HSB 三个数描述一个颜色(手册原文:色相 / 饱和度 / 亮度):
| 是什么 | 范围 | 举例 | |
|---|---|---|---|
| 色相 H | 是哪种颜色 | 0°~360°,0° 和 360° 都是正红,绕一圈 | 红 0°、橙 30°、黄 60°、绿 120°、青 180°、蓝 240°、品红 300° |
| 饱和度 S | 有多浓 | 0%~100%,0% 是灰,100% 最鲜艳 | 灰色 S 是 0,霓虹色 S 接近 100 |
| 亮度 B | 有多亮 | 0%~100%,0% 是黑,100% 最亮 | 黑色 B 是 0 |
为什么修图要用这三个数,而不是"有点黄""有点暗":同样说"肤色发黄",可能是色相偏到了 36°,也可能是饱和度太高。三个数分开看,就知道该动哪一个滑块。
亮度 B 不等于"看起来有多亮"
HSB 里的亮度是用红、绿、蓝里最大的那个计算的,纯黄和纯蓝的亮度都是 100%,但黄色看起来亮得多。比较明暗时,用 3.1 课的灰度观察层取色再读亮度。
色相环和互补色
把色相按顺序绕成一个圈,就是色相环。在色相环上正对面(相差 180°)的两个颜色叫互补色。屏幕上最重要的三对:
- 红 ↔ 青
- 品红 ↔ 绿
- 黄 ↔ 蓝
为什么是这三对:屏幕上的颜色都是红、绿、蓝三种光混出来的。青是绿 + 蓝,正好是"没有红"的部分,所以和红互补;黄是红 + 绿,"没有蓝",所以和蓝互补。互补的两个颜色加在一起,三种光就齐了,变成白或灰。
和美术课学的色环不一样
美术课的颜料色环说的是"红配绿、黄配紫",那是颜料混色的另一套体系。Procreate 的「色彩调和」、Lightroom 的色温色调、颜色平衡的滑块,用的都是上面这张屏幕色相环。在 iPad 上调色,以这张图为准。
互补色混在一起会变灰
这个现象在修图里有两个用法,方向正好相反:
- 好的一面:去偏色。照片偏黄,往里加一点蓝,黄就被抵消成中性。白平衡、颜色平衡都是这个原理(4.2 课)。这说的是整张照片偏色;只有皮肤偏黄时,加蓝反而可能让皮肤发灰,判断方法见 3.3 课。
- 坏的一面:颜色变脏。肤色是橙色,往里混进蓝紫色(冷色补光、蓝色背景反光),饱和度就会掉,皮肤发灰发脏(3.3 课)。
所以记住一句话:互补色少量是校正,过量就是弄脏。
冷暖
- 暖色:红、橙、黄。让人想到太阳、火、皮肤。
- 冷色:青、蓝、蓝紫。让人想到水、天空、阴影。
- 绿和品红在中间,旁边配暖色就显冷,配冷色就显暖。
冷暖是比较出来的。同一个肤色,放在冷蓝背景前更显暖、人更跳出来;放在暖黄背景前就和背景糊在一起。cos 照片里最常用的就是"暖色的人 + 偏冷的背景"。
反过来,肤色本身一旦被调冷(色相跑到品红或青那边),就会像生病、冻着了。冷调照片里可以让背景和衣服冷,但皮肤要留住一点暖。
五种配色关系
Procreate 的「色彩调和」提供五种模式(手册原文:互补、补色分割、近似、三等分、矩形)。判断一个角色的配色属于哪种,看主要颜色在色相环上的位置:
| 关系 | 色相怎么分布 | 看起来 | 常见角色配色 |
|---|---|---|---|
| 互补 | 两个颜色相差约 180° | 对比最强、最醒目 | 蓝制服 + 金饰边、红衣 + 青绿配件 |
| 补色分割 | 一个主色 + 它互补色两侧的两个颜色 | 对比强,但比互补柔和 | 橙发 + 蓝和紫的服装 |
| 近似 | 三个颜色挤在 30°~60° 范围内 | 统一、温和,最不容易出错 | 粉紫系少女、全身绿色系的精灵 |
| 三等分 | 三个颜色各隔约 120° | 鲜艳、热闹,难平衡 | 红黄蓝的特摄、魔法少女 |
| 矩形 | 四个颜色各隔约 90° | 颜色最多,最难控制 | 颜色很多的偶像、团体服装 |
黑、白、灰没有色相(饱和度接近 0),不参与配色关系,它们的作用是缓冲:把两个打架的颜色隔开。
三条配色法则
同样的几个颜色,用法不同,结果可以好看也可以刺眼。好看的配色一般满足:
- 面积有主次:主色约 70%,辅色约 25%,点缀色约 5%。几个颜色面积差不多时,画面就没有重点。
- 互补要平衡:一对互补色同时出现,面积大的那个降饱和、降亮度,面积小的那个可以很鲜艳。两个都满饱和、面积又一样,就会刺眼。
- 冷暖有主调:整张图要么偏冷要么偏暖,另一边只占小面积。
这三条在修图时一样适用。比如 5.6 课还原角色颜色时,如果照片里的假发是大面积的高饱和色,背景就要压低饱和度来平衡。
第 1 步:取色
打开设定图,长按取色
- 从图库导入角色设定图(0.1 课第 4 步)。
- 用手指在要取色的部位上长按,出现取色圆环。上半圈是正在取的颜色,下半圈是原来的当前颜色。拖着手指移动可以换位置,松手就选中。
- 长按没反应的话,点一下左侧边栏中间的小方块(「修改」按钮),再点画面。
做完应该看到:右上角的当前颜色变成了刚才取的颜色。
取在中间调,不要取高光和阴影
设定图也有光影:同一件衣服,亮面、暗面、高光的颜色都不一样。代表色要取中间调,也就是不在高光、也不在阴影里的那一片。
- 头发:避开发丝上的白色高光条,取发束中间。
- 衣服:取受光的大面积,不取褶皱的暗处。
- 拿不准时,在同一个部位取三处,读数取中间那个。
照片里的颜色噪点多,取色会跳,可以先复制一层做轻微的高斯模糊再取,方法见 3.3 课第 1 步。
做完应该看到:同一个部位取三次,色相相差不超过几度;如果差了十几度,说明有一次取到了高光或阴影。
第 2 步:读出 HSB 数值
打开「值」面板,记下三个数
- 轻点右上角的当前颜色,打开色彩面板。
- 底部选「值」。上面三条是色相、饱和度、亮度,右边的数字框就是数值;下面三条是红、绿、蓝;再下面是十六进制代码。
- 把 H、S、B 三个数记下来,格式比如
制服 H225 S60 B42。
做完应该看到:三个数字和你眼睛的感觉对得上:深蓝色的 H 在 220°~240° 之间,S 中等,B 比较低。
十六进制可以直接复制
手册里写,长按十六进制那一栏可以拷贝或粘贴。想把颜色发给别人、或者在另一张画布里用同一个颜色,复制这串代码最准。
第 3 步:判断配色关系
用「色彩调和」看互补色在哪
- 当前颜色设为主色(比如制服的深蓝)。
- 在色彩面板底部选「色彩调和」。左上角是模式,默认是「互补」,轻点可以换成补色分割、近似、三等分、矩形。
- 大圈在主色上,小圈自动停在按当前模式算出来的配色位置。对照角色的其他颜色,看它们是不是落在小圈附近。
做完应该看到:如果角色的金色饰边正好落在「互补」模式的小圈附近,这组配色就是互补关系。
用色相差确认
看圈的位置只是大概,再用第 2 步记下的色相算一下差值(大的减小的,超过 180° 就用 360° 减):
| 两个颜色的色相差 | 关系 |
|---|---|
| 0°~30° | 同类色(几乎是同一个颜色的深浅) |
| 30°~60° | 近似 |
| 90°~150° | 对比(三等分、矩形里常见) |
| 150°~210° | 互补(正好 180° 是完全互补) |
这几个区间是大致的划分,用来帮你说出关系,边界附近的两种叫法都可以。
饱和度低于 10% 的颜色(白、黑、灰、银)不参与计算,当作缓冲色。
做完应该看到:算出来的差值和「色彩调和」里看到的位置一致,比如 225° 和 45° 相差 180°,正好是互补。
第 4 步:存成调色板
新建一个以角色命名的调色板
- 色彩面板底部选「调色板」,点右上角的「+」新建一个调色板(菜单里还有从相机、文件、相片新增),轻点名称改成角色名。新建的调色板会自动成为默认调色板。
- 依次取色,每取一个,就轻点调色板里的一个空白色卡,这个颜色就存进去了。
- 存错了:长按那个色卡,选「删除」。
做完应该看到:调色板里按主色、辅色、点缀色的顺序排着 3~5 个色卡。
从照片自动生成
「+」菜单里的从相片新增,可以让 Procreate 自动从一张图里抽一组颜色。它抽到的颜色会包含高光和阴影,不一定是代表色,适合拿来参考,不适合直接当作业的色卡。
第 5 步:用到修图上
| 修图时的情况 | 用这节课的哪一点 | 去看 |
|---|---|---|
| 整张照片偏黄或偏蓝 | 往互补色的方向推 | 4.2 课 |
| 肤色发灰、发脏 | 饱和度掉了,或者混进了互补色 | 3.3 课 |
| 假发、衣服颜色和设定不一样 | 用 HSB 三个数比较差在哪 | 5.6 课、下面的案例三 |
| 换背景以后人不突出 | 冷暖对比、饱和度对比 | 7.1 课 |
| 加光效以后画面很乱 | 面积主次、冷暖主调 | M6 |
三个完整案例
案例一:深蓝制服 + 金饰边
设定图情况:深蓝色制服、银白色假发、金色饰边和徽章、红色瞳孔。
提取和数值(示例角色的读数,你的角色要自己取色):
| 部位 | H | S | B | 角色 |
|---|---|---|---|---|
| 制服 | 225° | 60% | 42% | 主色,约 70% |
| 假发 | 215° | 12% | 92% | 缓冲色(饱和度很低) |
| 饰边 | 45° | 80% | 92% | 点缀色 |
| 瞳色 | 350° | 80% | 80% | 点缀色 |
| 肤色 | 24° | 30% | 94% | 不算进配色 |
判断:制服和饰边的色相差 225° − 45° = 180°,是互补。假发饱和度只有 12%,几乎是白色,不参与配色,起缓冲作用。
为什么不刺眼:互补的两个颜色一大一小、一暗一亮。深蓝面积大,但亮度低(约 42%),不抢眼;金色面积很小,可以很鲜艳。正好符合"互补平衡"。
这类配色容易翻车的地方
- 修图时把制服的饱和度也拉高:两个互补色都变鲜艳,画面立刻刺眼。只提金色就够了。
- 暖灯下拍出来的银白假发偏黄,和金色饰边混在一起,整个人变成"一身暖色",互补关系没了。见案例三。
案例二:粉紫系少女
设定图情况:樱粉色假发、浅紫色裙子、玫红蝴蝶结、奶白花边。
提取和数值(示例角色的读数):假发 H330 S35 B95,裙子 H285 S40 B80,蝴蝶结 H345 S55 B90,花边 H40 S30 B98。
判断:粉、紫、玫红的色相在 285°~345° 之间,跨度 60°,是近似配色。奶白花边饱和度低,当缓冲色。
为什么柔和:颜色都在同一片区域,饱和度大约都在 30%~55%,没有哪一块特别跳。想让视线落在蝴蝶结上,就只提高蝴蝶结的饱和度,从 70% 左右开始试,蝴蝶结比别处明显跳出来就停,其他不动。
这类配色容易翻车的地方
- 粉色假发在照片里偏橙或偏紫,和裙子拉开了距离,近似关系变成了"不搭"。先量色相,差多少修多少。
- 为了"更好看"把全身饱和度一起提:近似配色靠的是柔和,全提以后会像荧光笔。
案例三:照片里的颜色和设定不一样
照片情况:角色 A 的 cos 照片,在场馆暖灯下拍的。第一眼觉得"不太像",但说不出哪里不像。
诊断(拿数字比):这些是示范照片的取色读数,你的照片数值会不同,按取色和画面判断。
| 部位 | 设定 | 照片 | 差在哪 |
|---|---|---|---|
| 假发 | H215 S12 B92 | H36 S22 B88 | 色相从冷的蓝灰跑到了暖的黄色,饱和度也高了 |
| 制服 | H225 S60 B42 | H234 S46 B36 | 色相偏向紫,饱和度和亮度都低了 |
假发变成了暖黄色,和金色饰边连成一片,原来"深蓝对金色"的互补关系被破坏了。这才是"不像"的原因。
修法思路:先整体校正白平衡,把场馆暖灯的黄去掉(4.2 课),假发通常就会回到偏冷的白;剩下的差距在 5.6 课里按部位单独调。每调一步都取色,和设定的数字比。
为什么先整体再局部:偏色是整张照片都有的。如果直接只把假发调白,皮肤、背景还是黄的,人会像抠出来贴上去的。
这类照片容易翻车的地方
- 取设定图颜色时取到了高光或阴影,拿错的数字去修,越修越偏。
- 只看色相不看饱和度:色相对了,但假发饱和度还有约 20%,看起来仍然"不够白"。
学习资料
资料里用 PS 讲的功能,在 Procreate 里叫什么,查 PS 和 Procreate 对照表。
- 三分钟改变你的色调混乱:色彩基础扫盲
约 3 分钟,作者色彩基础系列的第一节,从原理讲起;适合在 3.2 课「先弄懂:颜色是怎么描述的」之前先看一遍。
- 调色的终极秘籍【色彩理论】
约 11 分钟,从摄影的角度讲色彩怎么搭配、怎么运用、怎么管理;对应 3.2 课「五种配色关系」和「三条配色法则」,5.6 课定角色氛围色时也可以回看。
- 储卫民《给摄影爱好者的色彩课》介绍
介绍文章。课程本身在 B 站更新,40 多课时,适合想系统深入学色彩的人。
- 学会 HSB 色彩模式,让配色有理有据!
用 HSB 三个数分析配色的思路,和 3.2 用「值」面板读色值是同一套方法。
参考资料
- Procreate 使用手册:色彩调和
官方说明「色彩调和」的五种模式(互补、补色分割、近似、三等分、矩形)和怎么在色盘上拖小圆圈选色;对应 3.2 课第 3 步「用色彩调和看互补色在哪」。
- Procreate 使用手册:值
色彩面板「值」页的色相(0°~360°)、饱和度、亮度(%)、RGB 和十六进制,读色值以这页为准。
- Procreate 使用手册:色彩界面(含吸管)
长按画布取色、侧栏「修改」按钮取色、对当前图层取样的说明。
- Procreate 使用手册:调色板
新建调色板、存色卡、从照片自动生成调色板。
找图
3 个角色的官方设定图(立绘、角色卡都可以),只用来取色,不发布。尽量选配色风格不同的三个:比如一个冷色为主、一个暖色为主、一个颜色很多的。图要清楚,不要压缩得很厉害的截图。
不知道去哪找?看找图清单。
作业
选 3 个角色,每个角色:
- 按第 1、2 步在设定图上提取 3~5 个代表色(头发、主要衣服、辅助色、点缀色、瞳色里选),记下每个颜色的 H、S、B。
- 按第 3 步用「色彩调和」或色相差判断这组颜色是哪种配色关系。
- 按第 4 步把颜色存成一个调色板,用角色名命名。
- 用两三句话写出:主色是哪个、大概占多少面积,这组配色靠什么平衡(面积、饱和度还是冷暖)。
验收标准
- 每组色卡都标出了 H、S、B 三个数值
- 取色避开了高光和阴影,同一个部位取的是中间调
- 能说清楚是哪种配色关系,并且色相差的数字支持这个判断(比如互补的两个颜色色相相差 150°~210°)
- 写出了主色、辅色、点缀色和平衡方式
要交的东西
- 3 张色卡截图(带 HSB 数值)
- 调色板截图
- 每个角色的配色分析
自检清单
交作业前逐条对一遍。勾选状态会保存在本机。