前言

想起来 补一下设计基础中色彩的部分，不是专业画师 绘师 设计师， 算是半个搞渲染/计算机图形 + 搞设计的。从现代计算机图形角度梳理，用词以计算科学为主 会夹一些基础艺术/设计概念，欢迎补充/纠正。

素材作教育/研究之用，所有素材版权归属其版权方所有。

色彩在计算机中的表达

现代计算机一般表现颜色的时候一般采用一下3类颜色编码（Color Code）之一。*此处 Color Code 指如何用数字表示颜色，属于计算机科学相关领域。

HSV/HSL通过 Hue 色相（什么颜色）- Saturation 颜色饱和度 - Value (Lightness) 明暗 3个参数来表现颜色，是一个人类设计师/画师之间比较好交流的标准，同时需要对颜色进行微调时 也会比较方便。数位板绘画常用的调色轮就是基于 HSL / HSV 系统。*一个颜色色相不变，调节它的饱和度/明暗 得到的不一定是肉眼上的同一个色相的颜色。

RGB / HexCode用 红色-绿色-蓝色 之间不同的混合来表现呈现在屏幕上的颜色，正好对应显示器中的3种原色像素。因为显示屏是通过【自己发光】来显示颜色，用这 红-绿-蓝 3种原色叠加混合（相加混色）就可以表现出大多数颜色了。当RGB的所有颜色混在一起时，呈现出来的是白色。

CMYK系统对应的实际是 青色-紫红色-黄色-黑色 4种颜色的油墨/打印粉。不同于屏幕依靠发光来呈现出不同颜色，当印刷时纸呈现红色时，实际是纸上的墨水【只反射了红色的光】，吸收了除了红色以外的所有光，是相减混色模式。当CMYK的所有颜色混在一起时，呈现出来的是黑色。

(主流的一些颜色编码系统)

(能表达的颜色（色域空间）对比，RGB系统只能表现人眼可见颜色中比较少的一部分。)

另外值得注意的是色域空间实际上【不是一个平面】，而是一个3轴的坐标系。实际上是和标题图类似的一个类似 双角锥 或者 双圆锥体 的立体形状。

色彩明暗/色调 当一个 颜色A 的纯色被混入【白色/黑色/灰色】时，变成了 颜色B 这个颜色的色相不变，但是变暗 变淡了的情况。我们把 颜色B 称为 颜色A 的 Shade暗调 / Tone灰调 / Tint亮调。参考 正红色 RGB = 255 0 0 ，暗红色RGB = 122 0 0 的情况。正红色可以说是暗红色调亮了的亮调 / 暗红色可以说正红色调暗了的的暗调/灰调

以及黑色/白色/灰色 都可以被认为是【无色】的，因为他们可以是任何颜色无限参入【白色/黑色/灰色】，饱和度调到0转换而来。

渲染和光照模型

和油画这类传统绘画很不同，传统绘画很多时候（特别现代/当代）很多时候是直接构思作者想呈现什么样的最终效果。游戏/数字电影的渲染等无论何时实际模拟的都是

入射光1 / 2 / 3 ... N + 材质本身颜色 = 我们看到的颜色 = 虚拟世界中最终反射出来的颜色

而不是直接想呈现的颜色。游戏的关卡策划/3D美术/灯光艺术家 等需要多一个考虑 光源x材料的过程，更类似于数字版绘画中多个半透明图层互相堆叠影响的情况。

这里额外补充一点就是 游戏世界中环境中的光源颜色可以和照亮物体光的颜色轻而易举地完全分开。这一般是是基于 环境照明/Ambinet Lighting 或者 全局光照 Global illumination 实现的。

3D实例：不同光照渲染模型对类似的物体的影响

中文讲解：不同的光照模型及背后的数学理解

色彩搭配 / Color Scheme

又名 Color composition / Color Scheme / Color Pallette ，指在最终成品的画面上呈现了几种颜色。传统绘画中一般指出现了几种原始色（特定颜色的 亮调/灰调/暗调 会被合并成一种颜色讨论）。

(比较注重品牌形象的公司一般会提供一套标准调色盘供第三方使用。)

(谷歌采用的就是比较稳重保守的4相配色。)

如何选择自己的色彩搭配方案

虽然搜配色方案/色彩搭配方案会出来很多方案，但是大多数方案万变不离其宗都是比较传统的互补色/3相/4相 配色方法衍生出来的。

• 单色配色：只使用一种主题色 + 黑白灰色比如 国内传统互联网的商务蓝色 + 白色比如 微信（绿） / 支付宝 （天蓝）比如 机核的玫红色 + 白色灰色比如 可口可乐
• 互补色/撞色（Complementry）配色：选用调色轮上互相成180度的两种颜色，也有互相成90度，120度等的变种。比如《守望先锋》的猎空 蓝色-黄色 的配色方案。比如 百事可乐比如 FS社的祖传光影配色
• 三角/三相配色（Triadic）：选用调色轮上3种互相隔60度 呈等边三角形的颜色，或者3种间隔 120-120-60度 呈等腰三角形的颜色。比如《守望先锋》的法老之鹰 蓝色-黄色-红色的配色方案。
• 正方形/矩形/四相配色（Rectangle / Square)：选用调色轮上4种 构成正方形/矩形的颜色。比如 谷歌

(FS社这套黄色光源+深蓝色阴影用了已经10年了。。。)

(OW 法老之鹰的配色，具体色号来自 OW Cosplay Reference Guide)

老贼这套黄光+蓝色阴影的配色就是很像温带亚热带地区 初夏的上午的光照条件，除此之外 比如说北欧风配色 高饱和度 低亮度 的方案可能是对当地光照环境的模拟。

(老版油管红 放在老式屏幕不好的智能机 和 漏光IPS背板甚至 CTR 显示器上，倒是不会有那种过于正经的感觉。什么设计都需要放到实际使用环境中去测试。)

然后吹一下机核主题色的选色，有辨识度 也避免和无关元素的混淆。总体UI / UX 是很有水平的！夸夸！旧版1色号：R 239 G 29 B 33 （个人最喜欢版本）旧版2色号：R 245 G 67 B 54

新时代的游戏美术：动态 / 边框 / 特效

除了颜色还有很多设计元素可以利用比如 边框比如 特效（怪猎的闪光）比如 特殊拾取动画 半透明

(PSO2 梦幻之星OL2 7~9星装备会是红色掉落 + 彩色变色文字)

(PSO2 梦幻之星OL2 10+星装备会是 彩虹色掉落 + 彩色变色文字，同时跳动的频率也更加频繁 持久。)

(怪物猎人系列历代的特殊拾取动画 + 闪光特效)

设计的核心目的

要去引导怎么样的联想 是晴天 是油画 版画 还是街机时代的CTR显像管？当时的技术条件造就了很多人们的世代记忆和刻板印象。

(复古未来 风格的图片因为当时的印刷技术会呈现出轻微饱和度过高的现象，同时也不会有平滑渐变的阴影过渡。)

(1920s~1940s 期间的宣传海报印刷技术更加老旧，颜色上会更差一些，但也有别样的味道。)

(《暗黑血统 Darksider》的过场动画在色彩和线条上都可以模仿了早期美漫+黄色莎草纸的效果。很有风味。)

Color Grading / 调色

调色 或者 选择光照条件的艺术 (通俗的讲 滤镜 )，参考上面【渲染和光照模型】段，哪怕是同一个物体 在照片中因为光照条件 / 色调曲线 ToneCurve 等等要素的调整，可以呈现出完全不同的效果 唤起不同情感。

A国媒体拍自己国旗的红色作为标准（左上 2张）B国媒体拍A国国旗时就喜欢用 被漂白了红色 / 过度严肃发灰的深红（右上 2涨）。B国媒体拍B国国旗就是 阳光下充满朝气的亮红色 或者 贵气的酒红色。*当然也受 实际面料材质 是否因长期使用褪色 等现实客观条件的影响

(新闻照片中 旗帜中的红色)

实际应用场景

Color coding （设计/UX/）指 把颜色和特定含义相互关联的行为，比如 交通信号灯的绿灯行红灯停，暗黑破坏神的颜色表示装备稀有度 等都是这个设计思路。

(比如股票市场 红=发=好的 所以中文圈一圈基本都是红色涨绿色跌，英语国家则是反过来绿色安全 红色危险。)

通过颜色去做UX上的编码，需要注意各种文化差异。

(对照方法)

(原图 - 出自 informationisbeautiful.net)

颜色的预算问题人类能快速精确分辨的颜色是有限的8~9种左右，哪怕加上边框 加上特效 加上动画，能快速区分的颜色 也是有限的。怎样做出区分度 怎样保留好后续空间 是个需要提前规划好的问题。

做得最好 其实还是各类开箱动画

(最早开始真3D卷开箱动画 印象中是炉石传说)

(炉石 23年9月 还更新了批量开箱功能。。还挺意外的)

(R6 和 炉石 较很大部分日式Gacha Game不同的是，他们的灵感更多来自 万智牌/游戏王/口袋妖怪等实体卡牌。一般多一个 玩家【主动操作】开包的过程，参与感更高，更上头。)

(日式则灵感更多来自弹子机/扭蛋机，一步到位。另外就是日式更喜欢用 渐变色 + 描边效果 来创造一个豪华感。 - 自 《百万亚瑟王》)

(国产《少女前线：云图计划》的抽卡特效，卷得欧美日韩厂商已经看不到车尾灯了。如果游戏性和设计上也下这么大功夫就好了。)

结语

这个世界 最好的软件UX设计基本都在抽卡/支付流程里面，最好的室内设计基本都在赌场/高端酒店/主题乐园，也是满抽象的。反而有点怀念青年旅舍消毒水的刺鼻味道。

参考文档 / Reference

• 英文网页：暗黑破坏神 / 暴雪的用颜色表示稀有度 Color-coded Loot
• 英文网页LearnOpenGL：光照模型简单讲解
• 图片网页：文化差异与色彩
• 网页链接：Adobe的配色方案生成器
• 油管视频：The Color Theory of Elden Ring | Elden Ring Lore- By Hawkshaw
• 油管PSO2素材：PSO2 Sound RareDrop 13★ - By Yomoto Kuggi