首页
/
装修攻略
/
详情
探索电子游戏中的炫彩世界：揭秘视觉设计的基础奥秘
家居选购指南网
更新日期：2025-07-18 09:28:34

前言

想起来 补一下设计基础中色彩的部分，不是专业画师 绘师 设计师， 算是半个搞渲染/计算机图形 + 搞设计的。从现代计算机图形角度梳理，用词以计算科学为主 会夹一些基础艺术/设计概念，欢迎补充/纠正。
素材作教育/研究之用，所有素材版权归属其版权方所有。

色彩在计算机中的表达

现代计算机一般表现颜色的时候一般采用一下3类颜色编码（Color Code）之一。 *此处 Color Code 指如何用数字表示颜色，属于计算机科学相关领域。
HSV/HSL 通过 Hue 色相（什么颜色）- Saturation 颜色饱和度 - Value (Lightness) 明暗 3个参数来表现颜色，是一个人类设计师/画师之间比较好交流的标准，同时需要对颜色进行微调时 也会比较方便。数位板绘画常用的调色轮就是基于 HSL / HSV 系统。 *一个颜色色相不变，调节它的饱和度/明暗 得到的不一定是肉眼上的同一个色相的颜色。
RGB / HexCode 用 红色-绿色-蓝色 之间不同的混合来表现呈现在屏幕上的颜色，正好对应显示器中的3种原色像素。因为显示屏是通过【自己发光】来显示颜色，用这 红-绿-蓝 3种原色叠加混合（相加混色）就可以表现出大多数颜色了。 当RGB的所有颜色混在一起时，呈现出来的是白色。
CMYK 系统对应的实际是 青色-紫红色-黄色-黑色 4种颜色的油墨/打印粉。不同于屏幕依靠发光来呈现出不同颜色，当印刷时纸呈现红色时，实际是纸上的墨水【只反射了红色的光】，吸收了除了红色以外的所有光，是[相减混色]模式。 当CMYK的所有颜色混在一起时，呈现出来的是黑色。
1 / 2
另外值得注意的是色域空间实际上【不是一个平面】，而是一个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 ，指在最终成品的画面上呈现了几种颜色。传统绘画中一般指出现了几种原始色（特定颜色的 亮调/灰调/暗调 会被合并成一种颜色讨论）。
1 / 2
如何选择自己的色彩搭配方案
虽然搜配色方案/色彩搭配方案会出来很多方案，但是大多数方案万变不离其宗都是比较传统的互补色/3相/4相 配色方法衍生出来的。
  1. 单色配色：只使用一种主题色 + 黑白灰色 比如 国内传统互联网的商务蓝色 + 白色 比如 微信（绿） / 支付宝 （天蓝） 比如 机核的玫红色 + 白色灰色 比如 可口可乐
  2. 互补色/撞色（Complementry）配色：选用调色轮上互相成180度的两种颜色，也有互相成90度，120度等的变种。 比如《守望先锋》的猎空 蓝色-黄色 的配色方案。 比如 百事可乐 比如 FS社的祖传光影配色
  3. 三角/三相配色（Triadic）：选用调色轮上3种互相隔60度 呈等边三角形的颜色，或者3种间隔 120-120-60度 呈等腰三角形的颜色。 比如《守望先锋》的法老之鹰 蓝色-黄色-红色的配色方案。
  4. 正方形/矩形/四相配色（Rectangle / Square)：选用调色轮上4种 构成正方形/矩形的颜色。 比如 谷歌
1 / 2
老贼这套黄光+蓝色阴影的配色就是很像[温带亚热带地区 初夏的上午的光照条件]，除此之外 比如说北欧风配色 高饱和度 低亮度 的方案可能是对当地光照环境的模拟。
然后吹一下机核主题色的选色，有辨识度 也避免和无关元素的混淆。总体UI / UX 是很有水平的！夸夸！ 旧版1色号：R 239 G 29 B 33 （个人最喜欢版本） 旧版2色号：R 245 G 67 B 54

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

除了颜色还有很多设计元素可以利用 比如 边框 比如 特效（怪猎的闪光） 比如 特殊拾取动画 半透明
1 / 3
设计的核心目的
要去引导怎么样的联想 是晴天 是油画 版画 还是街机时代的CTR显像管？ 当时的技术条件造就了很多人们的世代记忆和刻板印象。
1 / 3

Color Grading / 调色

调色 或者 选择光照条件的艺术 (通俗的讲 [滤镜] )，参考上面【渲染和光照模型】段，哪怕是同一个物体 在照片中因为光照条件 / 色调曲线 ToneCurve 等等要素的调整，可以呈现出完全不同的效果 唤起不同情感。
A国媒体拍自己国旗的红色作为标准（左上 2张） B国媒体拍A国国旗时就喜欢用 被漂白了红色 / 过度严肃发灰的深红（右上 2涨）。 B国媒体拍B国国旗就是 阳光下充满朝气的亮红色 或者 贵气的酒红色。 *当然也受 实际面料材质 是否因长期使用褪色 等现实客观条件的影响

实际应用场景

Color coding （设计/UX/）指 把颜色和特定含义相互关联的行为，比如 交通信号灯的绿灯行红灯停，暗黑破坏神的颜色表示装备稀有度 等都是这个设计思路。
通过颜色去做UX上的编码，需要注意各种文化差异。
1 / 2
颜色的预算问题 人类能快速精确分辨的颜色是有限的8~9种左右，哪怕加上边框 加上特效 加上动画，能快速区分的颜色 也是有限的。怎样做出区分度 怎样保留好后续空间 是个需要提前规划好的问题。
做得最好 其实还是各类开箱动画
1 / 5

结语

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

参考文档 / Reference

I