黑白灰是一个多义词，可以指的是美术中的黑白灰关系。黑白灰关系，空间关系，主次关系共同组成了素描作品的三大关系；也可以是小说或电影。

此处主要讲界面设计中常用到的黑白灰。界面设计和绘画是一样的道理，同样是用黑白灰的整体调子关系组成界面设计元素。

黑白灰的关系可以理解为色彩的明度变化关系。

黑色提高明度变化为灰色，灰色提高明度到最高值，就是白色。反之，白色降低明度成灰色，灰色降低明度到最低值就是黑色。

“灰色”的定义很广泛，灰色的划分除了黑白明度变化的结果之外，很多带有色彩倾向的接近于黑白变幻出的灰的颜色，也可以被称为“灰”。色彩倾向偏蓝的话可以称为“蓝灰”，色彩倾向偏紫的话可以称为“紫灰”……

界面设计中的黑白灰常被运用到辅助色中。出现频率相当高，字体、图标、场景、组件等都会出现。

以国内外常见的搜索引擎首页为例。

回想初入行的时候用色很随意，靠绘画时练就的“眼力和经验”，觉得什么颜色顺眼就用什么颜色，甚至连具体色值都不知道是什么。直到给标注切图时才发现原来这个文字色值是#999，那个按钮边框是#888...

有没有和我一样的同学呢？

这种情况在量级较小的产品中效率问题不太明显，后期经历的产品越来越多，尤其量级大的产品再用这样的方法效率很低，对产品的一致性影响很大。

经历了多个产品的踩坑，总结了一套不同场景黑白灰色值的使用「方法规则」，在大部分产品中都可以得心应手的使用。

黑白灰的层次变化很丰富。

下图为黑色提高明度后，呈现出灰色的几种不同色值详情。这些色值基本上可以覆盖到日常界面设计工作的需要了。

这些不同色值，在色彩规范的落实中，记忆成本还是很高的。

其实可以换另一种色值+透明度的方式，便于记忆。视觉上可以达到同样的效果，还能达到更好的规律性。

以下是同一色值+透明度变化的形式表达上图颜色（主要以白色背景为例）。

16进制色值

rgba色值

白色也是同样的

以下为常用白色色值+透明度变化的常用到的颜色（黑色背景为例）。

把透明度转换为16进制色值的话，色值如下

有一个问题需要注意一下，明度很高的部分色值，在一些Windows系统无法正常显示。如下图，浅灰色背景、阴影部分在Mac系统可以正常显示，但一部分Windows电脑是看不到的。 

我曾经做过实验，排查浅灰色在Mac和Windows系统上正常显示的极限色值是什么？

答案是#F2F2F2。明度高于#F2F2F2的话，部分Windows系统是无法正常显示的。所以如果想保证所有计算机正常显示，明度高于#F2F2F2的色值就不建议使用了。

在同一产品不同背景色的场景下（如包含夜间模式的产品或者换肤功能的产品），可以使用rgba颜色值就会对产品的设计与开发的统一性高效性有很大帮助。

以下是我为公司B端产品做的具有换肤功能的产品。截取两个页面示例一下黑白灰在产品中的实际应用情况。

有些产品为了更具特色或者视觉上更舒适，辅助色的运用都会有颜色倾向，一般是倾向于品牌色的。

上图中我在浅色皮肤下运用的主体部分辅助色是以黑色为基础的。但是深色皮肤下的主体部分的辅助色却不是纯白色。是在白色基础上稍微加了品牌色的蓝色倾向。

再看一下微信读书的阅读界面，微信读书和大部分的阅读类产品都具有夜间模式，与普通模式相比，夜间模式背景色与主体部分颜色会有不同，明度成反比。

正常模式下，背景为浅色系，标题正文等主体部分为深色。可以看作是不同明度的灰，此处的灰色倾向偏蓝，可以称它为“蓝灰”。

夜间模式则相反，背景色为深色系，主题内容为浅色。

以设计师视角来解析，色彩的实现方式有两种的。

一种是采用16进制颜色值，那么主体部分会有以下几种色值：

我们在记忆的过程中，至少要记住这五种不同的色值。这五种色值寻不到什么规律，只能靠你超强的大脑了。

另一种，采用rgba色值加透明度变化的方式。如下图。

这样只需要记住一个色值，其他的按照透明度来划分色阶，方便记忆的同时也做到了有理可循。（示例中以接近微信读书本身颜色为基础调整的透明度。）

总结：黑白灰颜色的运用，在界面设计中可能被看作很小的细节，任何细节数量多了都会变的复杂。提炼规律，总结方法，提高工作效率与工作质量。

每个人都有自己的工作方法，欢迎交流。