对于大部分的UI界面来说，一半以上的工作都是在跟黑白灰的处理有关。UI界面的好于坏也往往取决于此。

1、布局

用面与面来区别各个组件之间的不同，通常会找一个跟背景色相差无几，稍微深一点或者浅一点的颜色。这个颜色唯一的功能就是告诉人们这两个区域是不同的，仅此而已。

为了不抢占人们太多注意力，在白色的背景上一般用非常浅的灰。

深色背景上用的则是比背景色稍浅或者稍微深一点的灰。

2、层级

UI中文字的层级关系，除了用字号字体和间距来表达外，最常用的一种就是通过颜色的对比了。而这种对比跟上面用来布局的遵循的原则完全相反。上面的色彩对比是越小越好。而文字的层级关系上色彩的差别越大则层级关系越清晰。除此之外它们都需要跟背景有相对高的对比，否则会影响文字的阅读。

这是Medium的文字颜色关系，可以看得出无论在白色背景还是黑色背景上，文字都有清晰的层级关系。

3、配色

可以说黑白灰基本上可以和任何一种颜色和谐相处。大部分的UI配色都是黑白灰+一个主色+一个辅助色。除了Medium这种毫无色彩倾向的黑白灰。还有一种在黑白灰的基础上添加了些许的色彩，例如推特这种，主色调是蓝，无论是背景还是文字，都其实是一种饱和度极低的蓝。

除了用跟主色调一样的颜色，背景的色彩偏向还可以是主色调的对比色。

如下图所示，主色调是橙红色，而背景是蓝灰。这种微妙的色彩对比也能形成一种和谐的视觉关系。