色不仅仅是一门艺术，某种意义上还是一门生物学科。很多我们认同的色彩搭配逻辑，其实背后都有自然与生物科学作为支撑。

只是，大多数时候我们是无意识的和循规蹈矩的使用，对于为什么这样？似乎并不怎么关心。

今天这篇文章，是国外一位电影制作人Art Adams对于色彩、亮度以及生物学关系之间的一些思考。

Art Adams坦言：“在色彩领域，自己是一个严格的业余爱好者而非科学家或艺术专家。但对于色彩艺术上的问题，他喜欢刨根问底。

黄色为什么是最亮的颜色？绿色为什么在所有的色域中范围都最大？橙青调是怎么成为好莱坞最受欢迎的色彩搭配的？前进色与后退色的感受是怎么造成的？

这些问题可能你也多多少少有过思考。这篇文章里，Art Adams给出了很多有价值的观点。

意识是发现的关键，我希望你读完我这篇文章，能够从中找到乐趣。

——Art Adams

这张图大家可能见过，也许是在某篇描述色彩科学的文章里，也许是在你的初中生物书上。这就是人眼中视锥细胞的光谱反应图，S与蓝色有关。“M”与绿色有关。“L”与红色有关。

大家都知道红、绿、蓝是色光三原色。三原色通过叠加，可以混合出其它的所有颜色，这就是我们常说的加色混合模式。

在这种情况下，每个加色三原色就对应于上图中的一个峰值。“加色”模式下，如果以黑色开始添加颜色，则叠加出的颜色会越来越亮，并且如果以等量添加，则结果将为白色。这也是光的工作方式。

几年前，在拍摄一个MTV时，一位年轻的制作人，希望让背景色更饱和一些。

他们告诉我：“直接在后面加几盏灯吧”。

我说：“那没用，因为光是加色模式”

他们似乎没听进去：“你就这样干吧!” 我们没时间了，我不想争论! ”

“好吧……我迫不得已在背景上添加了更多的灯，并加入了非常饱和的色纸。结果是背景变得更亮了，画面饱和度反而更低了。

最后制作人妥协了，我把大部分灯都关掉，把周围的光从背景中去除，这使得剩下的彩灯看起来更加纯净。

这就是光的工作方式。无论你加的色纸颜色有多重，如果你加入更多的光，你会得到一个更亮的画面。

在加色法系统中，三原色等量相加得到白色，减色法则不同，在减色法系统中三原色等量相加得到的是黑色。

水彩画就是一个很好的例子: 一开始是白色的，颜料的使用过滤了白色光谱的一部分，留下了想要的颜色。加色法总是会使颜色更深。

减色法三原色是黄、品红和青。

加色法在光的领域（比如投影、led和显示屏、交通灯...）等作用。但在没有电的世界里，减色法决定了我们如何看这个世界。

在这个过程中，绿色是一种对于我们的肉眼来说相对更敏感的颜色。

我不知道这是否有用，但确实很有趣。

最亮的颜色是什么?

黄色

我们再来看看这个图表

L和M锥体的光谱响应曲线重叠很多。有一种理论认为，L锥体只是M锥体的突变，这意味着人眼“红色”视锥体可能是进化中的一个意外，这也解释了为什么它们如此相似。

另一个方面，可以通过分析luma（亮度）系数来理解

Rec. 709:

Red = 0.2126

Green = 0.7152

Blue = 0.0722

换句话说，luma（亮度）通道下:

Red = 21%

Green = 71%

Blue = 7%

“这和黄色有什么关系?”

“对不起，我正要说呢。”

由于绿色和红色构成了我们对亮度的主要感知，如果红色是我们亮度感受的21% ，绿色是71%，那么它们相加（红色+绿色=黄色）。黄色就是我们感觉亮度的92%。

另一方面，蓝色只有7%。纯蓝色永远不会很亮。

为什么这很重要?

你可以去问问室内设计师们，它们都知道的一个原理：

暖色前进，冷色后退

“好莱坞大片”的澄青色风格是众所周知的，以至于已经成为陈词滥调。

然而，最大的问题是。它的工作原理是什么？它为何产生？

让我们回到几十万年前，人类还住在山洞里的时候

区分前景和背景的东西是:

前景:肤色(暖色)

背景:天空(冷色)

那我们就来逐一分析一下。

暖色

我们能很敏感的看到肤色，因为它是红色和绿色的结合——这两种颜色对我们肉眼的“明亮感”贡献最大。

我第一次在弱光下使用Arri Alexa时，遇到了很大的一个困惑。我不断检查显示器上的仪表，因为根据仪表显示，我的脸应该是比显示器上的黑很多，但肉眼看实际不是这样的。

Arri似乎模仿了一种减色模式，最饱和的色彩也最暗的地方,因此它们会使色彩饱和，直到亮度达到中灰。在中灰之外，颜色只会变得更亮，而不是更饱和。

然而，这让我感到困惑，因为从肉眼看肤色比我在仪表器读出的更明亮，我认为这也是索尼LC 709 typeA LUT 让人感觉曝光不足的原因之一。

几年前，索尼让我在CineGear上做一个关于索尼F55和Cine-EI的演讲，听众抱怨说“正常”曝光看上去太暗。但通过亮度波形判断，它已经快到头了。

我的猜测是，他们把中间调的饱和度拉低了一点（这样给予我们“明亮感”的橙黄色就少了）脸就会感觉比以前暗了一点。因为肤色是由红绿两种颜色组成的，而这两种颜色是我们最容易产生明亮感的颜色。

还有一个例子，几年前，我参与了一部黑白短片的制作，DP把胶片曝光得好像是（color negative）彩色负片一样，但dailies中所有的肤色都显示为暗灰色。

就在那时，突然我意识到，老黑白电影中的肤色应该比彩色电影中的肤色曝光的更亮——至少亮了一截——因为如果没有颜色信息，它们看起来就是暗灰色，就需要更多的曝光，才能显得栩栩如生。

冷色

蓝色的天空总是明亮的，所以我们的肉眼不需要像对其他颜色那样，对蓝色过于敏感，通常我们看到的大量蓝色都是在远处，在主体的后面。

在自然界中，除了天空以外，真的没有其它地方能看到更多蓝色。比如很少有蓝色的食物。根据《瓦格纳颜色反应报告》，让食物看起来没有胃口的最好方法，就是用蓝色的光来照亮它。

冷暖对比

原始时代，我们狩猎为生。习惯看到肤色在旁边，蓝天在远处。

肤色看上去明亮，因为它包含了我们最敏感的两种色彩，而眼睛最不感敏感的蓝色和我们始终有一种距离。

在室内设计界有句话说“暖色前进，冷色后退”。在我们作为灵长类动物进化的背景下，这是很有道理的。

当调色师让肤色变暖，让其他颜色变冷时，他们只是在利用人类天生对颜色的反应，从而产生一种潜意识的原始视觉感受，增强我们对画面层次，和前景/背景分离的感觉。

绿色，最好的增光剂

任何看过Rec. 709 (HD)和Rec.2020/2100 (UHD/HDR)色域对比图的人都知道，绿色比其他颜色延展的范围更大:

但你有想过为什么吗？（这个问题在HOMEBOY调色职业班课堂上，也经常有不少学员问道）

还记得刚才说的吗。绿色占亮度的71%，它也是我们能看到的最饱和的颜色之一。

如果你曾经在森林里拍摄过，你会发现森林是一个非常黑暗的地方，树叶越重，颜色越深，它吸收蓝色/紫外线，和红色/红外线，仅仅留下绿色。

在一个头顶有捕食者的黑暗森林中，能够看到树叶和树枝之间的移动可能意味着生与死的区别，所以我们先天就对绿色敏感。这也许就是为什么我们能如此清楚地看到绿色的原因。

根据《视觉与艺术:视觉的生物学》(强烈推荐)一书中说道；“我们观察运动的能力很大程度上是基于光本身，这或许可以解释，为什么这种感觉在很大程度上是基于绿色的”。

在艺术创作上，绿色是一种复杂的颜色。它的存在和不存在，都会引起注意:绿色过多（脸上呈黄色）或绿色不足（呈品红色或红色）的光线在视觉上都会令人感到不舒服。

绿色能使任何混合的颜色变亮，我们喜欢的许多色彩，或多或少都有一些绿色在里面。

在现实世界中，很少能看到纯蓝色，或纯红色，绿色经常与蓝色混合在一起，创造出一种更明亮的色调，许多人认为这是纯蓝色，但事实并非如此；绿色还经常和红色混合在一起，创造出一种更亮、略带橙色的红色，这种红色有更多的“冲击力”，但仍然给人以红色的感觉。

蓝色，很好的去饱和剂

有一次，当我用摄影机拍摄金门大桥时，我发现可以让草变绿，或者让桥偏向适当的橙色，但不能同时让两者兼得。

一些摄影机通常会将红色偏向一点橙色，这显然是为了将皮肤瑕疵（红色）混合成肤色，并将桥的颜色染成橘红色。

我通过使用一个摄影机内置的颜色矩阵，让桥的颜色变得更合适了（偏向橙色），但同时也使得前景中的草地呈现出强烈的绿色，分散了画面中对人物的注意力。

我意识到，在最初没有添加颜色矩阵的画面中，红色向肤色倾斜，也将绿色向蓝色偏移，这样草地不会特别饱和，人物被很好的强调了出来。

所以，我开始在两个方案之间挣扎。

这时我意识到，技术上正确的颜色并不总是完美的:很明显，有人明白亮绿色抢了肤色的风头，他们为此做了一些改变和修正（也就是向蓝色偏移）。

我唯一有些抱怨的是：我不能在给草去饱和的同时让桥的颜色合适，至少使用摄影机内置的颜色矩阵无法做到。我就不得不在后期通过调色来处理。

正在上映的电影《大黄蜂》中对于金门大桥场景的处理

在任何颜色中加入蓝色都会降低它的亮度，因为蓝色对我们的亮度贡献很小，这通常也会降低颜色的饱和度。

这也是绿幕合成流行起来的原因之一。在任何使用绿色幕布的场景中，绿色幕布在现有光线下总是显得更亮。(绿色=Rec. 709 luma 71%，蓝色= 7%)，而以前的纯蓝幕就暗一些。

此外，任何在绿色背景前的物体，都会帮助画面形成对比度比较高的场景。这对于生成蒙版很有用，但往往也更容易在画面中暴露出摄影机和编解码器的缺陷。

青色：我们爱它们，因为我们不能拥有它们

当Varicam 35摄影机发布时，我发现它在视觉上呈现出来的感受令人惊叹，尤其是对于日光场景的记录。我花了很长时间才弄明白为什么。

最终我意识到，这是因为它能以一种大多数摄影机无法做到的方式突出冷色调。

我有一个观点，我们喜欢青色，是因为我们看得不太清楚。

在文章顶部的图表中，我们看到蓝色和绿色没有重叠，所以我们在自然界中，我们看到减色法的青色不会非常明亮。

不过，加色法的青色,可以达到和预期一样的明亮度。一些摄影机制造商会在蓝色的天空中添加一点绿色，让它们看起来更流行一些(有点类似于“糖果天空”风格，它们对我来说有点太过了)。

视频链接：

https://v.qq.com/x/page/w08271rvazd.html

这是松下HDR电视广告在Varicam 35上拍摄的一条广告，大部分蓝色实际上有点绿——但很微妙。

这个广告中的镜头包含了好莱坞大片“暖色进，冷色退”的一些很好的例子。

看这个画面，黄色花瓣需要最大的视觉处理能力，因为黄色同时刺激肉眼的L和M锥体。

整个画面暖黄色为主，但最红要的却是背景中零星的青色窗口，尽管是作为点缀，但却保证了画面的颜色对比和层次感。它定义了画面的最大深度。（暖色前进，冷色后退）。

这幅画面也是同样的道理，只是对比更加明显一点。请注意这幅图像的对比度本身是比较低的，因为没有任何明亮的高光或深阴影。

但是色彩的搭配却让对比度感觉比实际高。有趣的是，花瓣是黄色(红色+绿色)和青色的(蓝色+绿色)。所以服装要么是温暖的(红色+绿色)，要么是暗淡的白色，要么是黑色。如果没有黑色的服装，图像会感觉有点单调。

这个画面还是一样，暖色前进，冷色后退。红色的前景和青色的背景使这位女演员显得很漂亮。汽车上的绿色亮点与车窗上的红色倒影形成了鲜明的对比，使演员更加突出。

红色和绿色是对立的: 我们从来没有看到过绿红色或红绿色，所以把它们放在一起会形成更大的对比。他们变得更加“流行”了。

这个画面，虽然整体上是冷色调，但是绿色和前景的暖色调混合在了一起，形成了略带黄色的高光。温暖的前景在冷色的背景衬托下显得格外醒目。这是经典的“好莱坞大片”色彩风格。

这个屡试不爽的套路真的很管用！(此外，由于这款显示器是专为HDR而设计的，所以额外的绿色可能会在Rec 2020/2100显示屏上显示出更多，因为绿色在Rec 2020色域中扩展的最多。)

这并不一定意味着它更饱和，但它有可能创造出比我们在Rec 709显示器上看到的更微妙的绿色。

再来看这张，这是少有的前景不是暖色的情况。然而，这个火球一下子就吸引了我。你看，我们的老朋友黄色，依然扮演着重要的角色。

视频链接：

https://v.qq.com/x/page/i0827nruy25.html

有趣的是，调色师把青色放到了女演员的腿上——我怀疑这样做的原因是，青色在火球的映衬下效果不佳，因为火球中心的黄色可能会让宇航服的青色显得更暗。

再来看一个例子，这片冰之后出现的大多是青色，但也有一些红色混合在一起，形成了一个非常复杂的冷色调。

这个画面的色彩非常微妙，高光部分是偏绿的蓝色，但是阴影部分是微红的蓝色。这不仅会让冰感觉更冷，而且还会增加一大块白色冰的对比度。

蓝色是不变的，但是高光和阴影之间的对比是绿色和红色之间的对比(在人类的视觉系统中，这是对比色)。

我认为人类不希望看到完全真实的影像，这是很无聊的。我们想看到的是“现实下的扭曲”或者“基于真实的变化”。

作为电影摄影师或者调色师，我们做出镜头选择、灯光选择、曝光选择和颜色选择，这些都是从自然界无法找到的视角来讲述故事的。

我写这篇文章，是因为我认为，自己所做的事情，一定有生物学上的原因。

读了《视觉与艺术》这本书，促使我写下自己脑海中出现的想法，尽管我离读完这本书还差得很远。

有很多艺术家凭直觉理解颜色，但我总是想知道艺术选择背后的“原因”。这有助于我有意识地和有直觉地使用这些技巧。

我希望你读完我这篇文章，能够从中找到乐趣。

原文链接：https://www.provideocoalition.com/thoughts-color-brightness-contrast/

究背景

本文基于目前两大设计体系：安卓端的谷歌设计规范和iOS人机交互指南对颜色的定义和规范，参考了部分 Ant Design 的色板生成原理，为大家带来「米庄APP」设计系统颜色规范的建立过程。

色彩理论

1. 起源

对于现代色彩的理解，我们要归功于一个人：牛顿。牛顿阐明了动量和角动量守恒的原理，提出牛顿运动定律，给世界带来了秩序的同时，也通过对三棱镜将白光发散成可见光谱的观察，发展出了颜色理论。

牛顿注意到，当你通过棱镜发出白光时，光会被分裂成彩色渐变。不仅如此，你还可以将颜色重新组合起来再回到白色，这在当时是一个非常全新的事物。要知道在这个实验之前，混合颜色是一种普遍的禁忌和对自然的冒犯。

△ 牛顿的光学图之一

牛顿的彩虹是一个完美的渐变，他把它进行了排序。并且把它分成了七种颜色：红色，橙色，黄色，绿色，蓝色，青色，紫色。

△ boute的色圈

2. 发展

同时，牛顿也发明了色轮，完整揭示了隐藏在自然中的秩序，就像音乐中的音节一样，且由伟大的艺术家歌德完善了色彩理论。对，就是那个写了《少年维特之烦恼》的歌德。

众所周知，歌德是一个伟大的诗人、小说家、戏剧家和杰出的思想家。但是却很少有人知道，他还是一个科学研究者，而且涉猎的学科很多。他从事研究的有动植物形态学、解剖学、颜色学、光学、矿物学、地质学等，并在个别领域里取得了令人称道的成就。歌德同时也是一个著名的画家。他系统地将颜色描述为「暖色」或者「冷色」，这种冷暖概念组成了现代色彩的一部分。早期的人们可能认为蓝色是一种暖色，也许因为它是火焰中最热的那个部分。

后来我们有了蒙塞尔的球体，包豪斯的学者也详细阐述了色轮，并且形成色调，色相，对比度等各种色彩的属性。然后出现了现代数字显示器的发明，这种技术让色彩产生了无数种可能性，更多现代科技的色彩模型，可以让我们更细致地感知色彩。

色彩概念

1. HSL

HSL色彩模式是工业界的一种颜色标准，是通过对色相（Hue）、饱和度（Saturation）、明度（Lightness）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是迄今运用最广的颜色系统之一。

2. HSV

HSV又称HSB，是基于人眼的，设计软件中常见的色彩模式。

在HSB模式中，H（hues）表示色相，在0~360°的标准色环上，按照角度值标识。比如红是0°、橙色是30°等；S（saturation）表示饱和度，是指颜色的强度或纯度。饱和度表示色相中彩色成分所占的比例，用从0%（灰色）~100%（完全饱和）的百分比来度量。B（brightness）表示亮度，通常是从0（黑）~100%（白）的百分比来度量的，在色立面中从上至下逐渐递减，上边线为100%，下边线为0% 。

HSV模型通常用于计算机图形应用中，色相表示为圆环；可以使用一个独立的三角形来表示饱和度和明度，三角形的垂直轴指示饱和度，而水平轴表示明度。在这种方式下，选择颜色可以首先在圆环中选择色相，再从三角形中选择想要的饱和度和明度。

△ HSL和HSV都是圆柱形几何形状

如果我们绘制色调，亮度，而不是饱和度，那么分别得出的是双锥体和锥体，而不是圆筒。

HSL 和 HSV 都是一种将 RGB色彩模型中的点在圆柱体中的表示法，以便更接近与人类视觉感知颜色制作属性的方式对齐。在这些模型中，每个色调的颜色排列在径向切片中，围绕中性色的中心轴，其范围从底部的黑色到顶部的白色。这两种表示法试图做到比 RGB 基于的几何结构更加直观。

△ RGB基础原理模型

今天，几乎每种计算器，颜色选择器，以及 Web应用程序都使用 HSL 或者 HSV，至少作为一种选择。并且大多数的 Web前端框架都存在预打包的开源颜色选择器。在CSS 3规范中允许网页制作者为他们的网页直接与 HSL坐标制定颜色。

使用HSV（HSB）的应用：

• Apple Mac OS X系统颜色选择器（有一个H/S颜色碟和一个V滑块）
• Adobe图形应用程序（Illustrator，Photoshop等等）

使用HSL的应用：

• CSS3规定
• Microsoft Windows系统颜色选择器（包括Microsoft Paint）

设计系统色彩

1. Material Design Colors

一致且有意义：颜色有助于表达层次结构，建立品牌形象，赋予意义，并指示元素状态。对每个组件的颜色应用都有做参考。整个UI用色的精髓，可在 material 工具中体现的淋漓尽致。

颜色用法

谷歌规范中颜色的使用主要对两个部分进行了定义，一个是主色，一个是辅助色。配色灵感来自大胆的色调与柔和的环境、深度的阴影、明亮的高光并存。我们可以在大量页面中清晰地感知到此颜色的使用手法。

主色：强调色。应用程序的屏幕和显示组件最频繁的颜色。要在元素之间创造对比度，可以使用较浅或较深色调的主色。较浅和较深的色调之间的对比度有助于区分不同的表面，例如区分状态栏和工具栏。

辅助色：则是用来强调UI中关键部分的颜色。辅助色可以是和主色互补的，也可以是和主色类似的，但它不应该只是简单的对主色进行加深或变浅。辅助色应该和它周围的元素形成对比，并作为强调，且应谨慎使用。

△ 主要和辅助调色板示例

使用原则：

• 层次清晰：最重要的元素最突出。颜色可表示哪些元素是交互式的，它们与其他元素的关系以及它们的突出程度。
• 清晰易读：文本和重要元素（如图标）出现在彩色背景上时，应符合所有屏幕和设备类型的易读性标准。
• 张力表现：通过在令人难忘的时刻展示品牌色彩来强化您的品牌风格，从而强化产品的品牌。

△ 一些案例

调色板生成器

这些调色板最初由 Material Design 于2014年创建，由可以和谐协作的颜色组成，可用于开发您的品牌调色板。

调色工具

选择配色方案：你可以自定义应用的调色板，以适配你的品牌颜色。或者，你可以使用 Material Design 的调色板创建一个全新的配色方案。

使用颜色工具创建调色板，并在应用中使用。确保应用的颜色满足无障碍标准，且元素之间有充分的对比度，

Material Theme Editor UI编辑器

在2018年5月份的 Google I/O 大会上，Google 设计团队一款叫做 Material Theme Editor 工具，可以帮助设计师轻松且快速创建符合自身品牌又符合 Material Design 风格的应用。

使用教程：《谷歌新出的这款 Material Theme Editor 神器，让你做设计又快又好！》

创建色彩：

• 通过选择主要、次要、背景、文本和图标色调，自动将颜色应用于所有组件
• 检查颜色对比度以满足可访问性要求
• 从「材质」调色板中选择颜色
• 使用单一颜色自动生成10个颜色值的色调调色板
• 使用全局颜色更改自动填充符号

安装插件后，在 Plugins — Material — Open Theme Editor 中打开。Material 组件库：

2. iOS Colors

颜色定义

iOS人机规范颜色定义如下，为了便于对比，我将RGB格式的色块都转化为HSB，可以清楚地观察到它的特点：

使用原则

使用颜色来进行明智有效地沟通，对于重要信息的表现，颜色有非常重要的作用。比如说用户警示的红色。

在 app 中使用互补色。app中使用的颜色需要协调一致，不会互相冲突和干扰。选择合适的颜色。

选择一种颜色来表示功能的可交互性，并且区分可点击和不可点击不同状态的颜色使用。

在 Note 中，可交互的元素是黄色的。在 Calendar 中，可交互的元素是红色的。如果你定义了一种关键色用于传递可交互性，那么你要保证其它颜色不会与之冲突。比如在 app 中我们也通常用蓝色来代表可跳转。

考虑无障碍设计：关注色弱或者色盲用户的颜色体验，并且同时也要注意色彩之间的对比度。

在多种光线条件下测试你的 App 颜色：在不同的环境之下，app中呈现的颜色会受到外界光线的影响，所以要考虑你的 app 的多种使用场景，选择舒适的，不会产生阅读干扰的颜色来使用。

使用足够的颜色对比度：在 App 中，过低的对比度会让内容难以阅读。比如，图标和文本可能会和背景相融合。网上有颜色对比度计算器能够帮助你精确的分析 App 中的颜色对比度，以确保它符合最佳标准。请确保你的 App 对比度至少达到4.5 : 1 ，但是7 : 1更好，因为它更符合严格的功能标准。

3. Ant Design Colors

1.0 Ant Design 色板

有意义的色彩 ：对颜色部分进行了简要的说明。

色彩在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。

Ant Design Colors：提供了一套调色板，并介绍了每种颜色的含义，色板由9种基本色彩组成，每种基本色又衍生出九宫格色板，在此基础上还可以通过黑白叠加的方式实现色彩明暗的效果。

色彩与交互：提供了色彩在交互时的使用指南。颜色选择上运用了 tint and black 系统，通过颜色的不同阶级来表现不同状态。

△ tint/shade 色彩系统算法

选取一个主色作为5号色，将主色与纯白色（#fff）混合，主色与纯白色之间分成100份，20/40/60/80的位置分别分割，得到4/3/2/1号色。

将主色与纯黑色（#000）混合，主色与纯黑色之间分成100份，20/40/60/80的位置分别分割，得到6/7/8/9号色。

通过以上方式得到一条完整渐变色板。

色彩换算工具：

2.0 Ant Design 色板

使用原则：实用

不仅应考虑品牌的识别性，还需达到信息传递、操作指引、交互反馈，或是强化和凸显某一个元素的目的。基于操作系统更注重高效、清晰等特点，Ant Design 的用色上更偏向实用便捷。在选择色彩时有以下三个注意点：

意义明确：色彩应与产品定位相匹配，且符合用户心理认知；定义了品牌色，中性色以及功能色。

层次分明：为重要行动点或关键信息定义一个主色，并建立视觉连续性。

足够对比度：遵守 WCAG 2.0 的标准，保证足够的对比度，让色彩更容易被视障（色盲）用户识别。在由浅至深的色板里， 6格色彩单元格普遍满足 WCAG 2.0的 4.5 : 1 最小对比度（AA 级），我们将其定义为色板的默认品牌色。

色彩对比值校验工具

算法升级

1.0的算法有个弊端，大自然中并没有纯白或者纯黑的物体，所以颜色过渡不自然。基于此基础，并且和谷歌规范保持一致，选择一个主色，在保持1.0的算法基础上，再加入贝塞尔曲线。结合了色彩加白、加黑、加深，贝塞尔曲线，以及针对冷暖色的不同旋转角度，得出2.0色板生成算法。使用者指定主色（和谷歌规范操作一致），便可导出一条完整的渐变色板。

3.0 Ant Design 色板

基于2.0版本的算法，过于复杂，且迭代算法也比较难更新，所以3.0的色板重新从轻量明确简单的角度出发，重新调整算法。相对于第二版，增加了几种主色，整个色板的饱和度更高，不再使用贝塞尔曲线。也更容易和开发团队沟通。

使用了HSV模型：此版本没有继续使用与某个浅色/深色值进行混合的形式获取渐变色板，而是直接用HSV模型的值进行递减/递增得到完整渐变色板。

色彩体系：系统级色彩体系同样源于「自然」的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的12色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对12个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。

产品级色彩体系：同样在品牌色，功能色和中性色进行拓展和定义。

基础色板：共计120个颜色，包含12个主色以及衍生色。

最后将 Ant Design 3个色板迭代的颜色整合在了一起，对比一下还是非常明显的。很直观的看出来算法之下颜色的变化之美。

4. kitchen 工具

一款为设计者提升工作效率的 Sketch 工具集。提供了各大官方精选色板库，并且可轻松管理属于你的色板库。

介绍和下载地址：https://www.uisdc.com/sketch-plugin-kitchen

MIZ Colors

根据米庄多年来的品牌定位，以及目前米庄的扩展业务需求，我们对米庄产品使用中的颜色进行重新定义。基于我们产品的关键词：金融科技，安全可靠，专业智能，结合色彩工程学，赋予和谐的美感色彩。

1. 主色

颜色是有意义的。色彩的表达，需要符合用户心理认知。它包含两个层面，第一个是品牌识别性，传递米庄品牌价值。最直观的展示公司文化，以及 app 的特性。品牌色是体现产品特性和传播理念最直观的视觉元素之一。前期我们对关键词进行拆分，并且对每一个关键词配对适合的颜色进行性格心理解析，产出品牌色以及对应的辅助色系。颜色规范中使用HSB（HSV）——通过色相/饱和度/亮度三要素来表达颜色。

目前的主色，也是我们米庄的品牌色。

HSB = 20 100 100

2. 辅助色

我们不仅需要品牌色来传递品牌价值，我们还需要辅助色来组成我们产品体系的颜色搭配，实现不同功能点的视觉呈现。辅助色还起到中和品牌色的作用，根据不同的业务需求，结合不同的场景来呈现最佳视觉效果，减少用户对于主色的视觉疲劳。对于辅助色的选择，我们选取了类似色、互补色、中性色三种辅助色系。

同类色

同类色搭配原则：色环上相差15度之内的色彩，非常舒适，色彩过渡自然，温和，给予用户安心，信任的心理预期。

并且于品牌色的色相冷暖性质一致，和谐统一。

对比色和互补色

24色相环上相距120度到180度之间的两种颜色。品牌色为暖色系，暖色系会产生热情、明亮、活泼温暖等感觉，而互补色是冷色系，冷色系会中和过度的暖色情绪，从而令人心情从洋溢回归至平静。渐而平稳，安详，天空之境之静谧。所以我们也将红色的对比色，以及黄色的互补色，来形成冷色调互补。辅助色红色色相为H = 5，取对比色绿色，相应色相H为（H+120）；以及辅助色黄色的对比色蓝色，H为215（H+180）。获得以下两个冷色调的辅助色：

校正辅助色

校正的原则一：色相差值不能超过15

近似色的选取，保证色相不超过15，保持统一的视觉体验。

校正的原则二：尽量保持感官明度一致

可以从上图看出，尽管保持了相同的饱和度和明度，色相不一致会导致在视觉上有不一样的感官体验。绿色的发光度比较亮，以及蓝色就稍微偏暗一些。所以需要调整明度和饱和度，保持视觉感官一致性和相似的舒适程度。

中性色做辅助色

中性色作为辅助色，也是调和颜色视觉的一种。它本身不带情感色彩，可中和其他任何颜色，自然界中没有纯黑或者纯白的颜色，所以将纯黑色降了纯度，使之符合感觉舒适程度。中性色也常用于字体的使用，并且以不透明度的形式落地。

3. 调色板

确定好主色和辅助色后，我们需要建立调色板来拓展不同场景下的颜色运用。既符合品牌传递，也需要通过不同颜色层级，来展示界面设计的功能性，进行信息传递，动作指引，交互反馈，或是强化和突显界面元素。同时，也通过颜色层级的变化，对产品交互层面做出改变。

同色系的明度、纯度取值

既能体现我们的品牌形象，也能保持页面的统一性。我们通过在颜色上面增加白色，或者增加黑色，来改变它的明度和饱和度，形成同色系的调色板。在色彩系统里，这种操作方式也叫做 Tints and shades 系统。tints 是指加入白色，减淡的意思；而 shade 是指加入黑色，加深的意思。

Tints and shades系统

为此，我们在 sketch 里根据 tint 和 shade 系统的算法，将算法可视化，在 sketch 中建立了这个系统，方便每个颜色都在统一的规则里形成衍生色。从而形成不同颜色的调色条。

依照上图，我们可以发现：

• 品牌色值点以左的线段，饱和度S以S0/5递减，明度B以 （100-B0）/5递增；
• 品牌色值点以右的线段，饱和度S以（100-S0）/5递增，明度B以B0/5递减。

带入我们的品牌色值HSB（20,100,100），可以得出我们想要的orange01（20,100,90），orange03（20,40,100），orange04（20,10,100）。

最后，结合 Ant Design2.0 中的计算工具校对，此 sketch 色板生成模版有效。

最终我们形成完整的调色板：

4. 色彩应用

在色彩使用上，依据不同场景，我们也从以下三个方面，定义了米庄基础用色。

品牌色

品牌色是体现产品特性和传播理念最直观的视觉元素之一。

功能色

主要应用于消息通知、反馈提醒、表单校验这类场景中的成功、出错、失败、提醒、链接等状态。

中性色

关键内容的衬托和功能的引导，主要体现在导航框架、背景底色、描边，或次级操作等。

sketch色板

5. 使用规范

色彩识别

遵守 WCAG 2.0 的标准，保证足够的对比度，让色彩更容易被视障（色盲）用户识别。

层次结构

层次结构是指根据重要性级别来组织内容。颜色可以表达出一些内容相对与其他内容的重要性。

（参考校对工具：https://contrast-ratio.com/#%23454545-on-%23fff）

意义清晰

颜色可以用来表达屏幕中不同元素的含义。需注意使用中符合用户认知心理预期，减少歧义的产生。

上线复盘

1. 命名

如何正确命名颜色？使用颜色属性和数字组合来表示，方便修改和更换。

2. 替换

让开发将线上的所有颜色都发一遍，然后画出色块，再对照目前调色板的颜色进行调整和修改。整体 app 更加轻量化以及沟通更顺畅。

如何使用

作为一名现代社会中的设计师，我们的工作很多时候就是说服你的老板，你选择的颜色是正确的。你可以准备一个40页的 ppt 来准确的阐述计算逻辑。在这个陌生的数字化环境中，智能和科技让一切都变得有可能，可预测，可验证。

但是同时，也请大家保持对色彩的警惕。不要被工具所愚弄。我们能描述1700多万种色彩，但这并不能代表什么。色彩的本质是什么？目前还有很多群落在没有色彩定义环境中生存着。色彩之所以有意义，是因为我们赋予了它意义。

当下次，在眼睛离开电脑手机的时候，请花点时间留意你身边的绿植，留意远处云朵的色彩，留意旅途中海洋的颜色，留意清晨的露珠和晚霞落日。然后问问自己，你看到了什么？

△ 图片来源：https://dribbble.com/google

附件资源

总结回顾大纲：

调色板下载

PS/AI：

• 下载链接：https://pan.baidu.com/s/1hqv4D_DDwDTln1OjO4Wuvw
• 提取码：ce98

Material Theme Editor UI编辑器：https://material.io/tools/theme-editor/

色彩对比网站：https://contrast-ratio.com/