关于Material Design中UI的配色问题
最近几年用Vuetify比较多，Vuetify是基于Material Design的一套前端UI脚手架系统，整个MD的配色系统是比较科学的，它定义了五个核心颜色： 此外就是自定义的颜色了，主要是根据功能性来划分，在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了。 参考： Material Design Color System…