关于Material Design中UI的配色问题
by zhangv
最近几年用Vuetify比较多，Vuetify是基于Material Design的一套前端UI脚手架系统，整个MD的配色系统是比较科学的，它定义了五个核心颜色：
- primary - 主要元素的颜色（背景或者边框，如页面中的「确认支付」按钮）
- secondary - 次要元素颜色（同样是以背景或者边框，如页面中的后退、分享、过滤按钮）
- tertiary - 再次元素颜色（一般就比较少用了，除非是比较复杂的页面）
- neutral - 通常用来做背景或表面，也作为文本和图标的强调色
- neutral variant - 主要是用来作为中等强调的组件或者边缘和文字
此外就是自定义的颜色了，主要是根据功能性来划分，在Vuetify中有：error、info、success、accent、warning，需要设计师根据核心色调整。
针对于易读性问题，要保证强调色(primary/secondary/tertiary)和基底色（neutral/neutral variant)有足够的对比度，可以部分的通过生成来解决。
对一个专注于功能开发的程序员来说，MD的这套配色系统至少提供了一套可复用的配色逻辑：
（注：MD是基于孟塞尔颜色系统(Munsell color system)，主要是是基于：
1. hue - 色相/色调,颜色在色轮中的位置（一共360个位置）
2. saturation饱和度、也叫色彩强度（intensity）或色度（chroma）-越高越强烈，越低越暗淡
3.value色值，颜色的深浅，混入黑色让颜色变深（shade）、混入白色让颜色发白（tint）、混入灰色使颜色偏灰(tone)
- 以一个基本图片出发
- 先获取主色（primary），也就是图片中最多的颜色（获得HCT中的H - hue色相）
- 然后根据primary生成secondary和tertiary（如饱和度减弱）
- 然后根据primary生成neutral和neutral variant（增加/减少灰度）
- 其他自定义色：
success - 通常选绿色或者暖色，根据主色增加饱和度
warning - 通常选桔黄色，可暖可冷，如主色的对比色
error - 通常选红色，根据注册调整饱和度和灰度
info - 选个人畜无害的颜色，我一般很少用
accent - error和warning中间的颜色，如果二者接近，可考虑neutral的对比色
总之，MD的配色系统还是考虑到很多的，如果稍微多了解一些颜色配色基础，即便不是设计师也能做出不那么难看（难看如微信）的UI了。
参考：