艾萨克·牛顿|B端设计 | 设计师必须了解的色彩系统搭建( 三 )
文章图片
2.3 饱和度 （Saturation）
S-表示颜色的饱和度 ， 即颜色的纯度 ， 饱和度高色彩较艳丽 ， 取值在0—100之间 。 饱和度低色彩就接近灰色 。
特别高的饱和度容易产生“椰树牌椰汁”的设计感 ， 而相对较低的饱和度则可创造高级感 。
文章图片
【艾萨克·牛顿|B端设计 | 设计师必须了解的色彩系统搭建】2.4 明度（Brightness）
B-表示颜色明度/亮度 ， 即颜色的明暗程度 。 取值也是在0—100之间 。 亮度高色彩明亮 ， 亮度低色彩暗淡 ， 亮度最高得到纯白 ， 最低得到纯黑 。
文章图片
2.5 拾色器
设计软件中的拾色器就是把明度变为Y轴 ， 饱和度变为X轴 ， 将色轮展开变为色带 。
在色彩理论中的色值被融合到了明度 ， 去掉了颜色温度也用色调带来调节 。
文章图片
三、搭建色彩系统的方法及工具
从工作角度 ， Material Design 的色彩系统实战且有理有据 ， 所以这一篇章是在它基础上结合我的个人项目经验整合的 。
3.1 建立色彩系统的原则
层级感：颜色可以表示哪些元素是可交互式的 ， 元素之间的关系以及它们的强弱程度 。
可读性：当文字出现在彩色背景上时 ， 文本和重要元素（如图标）应符合可读性标准 。
表现力：通过颜色展现产品个性 ， 体现品牌基因 。
一致性：建立色彩系统可以提高设计的一致性 。
3.2 色彩系统（Baseline Color Theme）的组成
色彩系统一般是按颜色的类型+功能分类 ， 我们也可以把颜色分为主色、辅助色、中性色、背景色、遮罩色、功能色、业务色 。
主色（Primary Color）：主色是我们系统的代表颜色 ， 一般与品牌色相关联 。
辅助色（Secondary Color）：在b端中常用中常与中性色合二为一 。
中性色（Neutral color）：中性色又称为无彩色系 ， 指由黑色、白色及由黑白调和的各种深浅不同的灰色系列 ， 中性色不属于冷色调也不属于暖色调 。 黑白灰是常用到的三大中性色 。 一般用作前景色 ， 也可部分用于背景色 。 （我个人的习惯是中性色代替辅助色 ， 背景使用的中性色直接移入背景色）
背景色（Background Color/UI Base Color）：用作页面、模块、组件的背景颜色 。
遮罩色（Overlay）：常用的是全局overlay；在states中 ， 一般以黑色、白色为基色 ， 配合百分比使用 。
功能色（Status Color）：链接色、成功色、警告色、错误色 。
业务色（Business color）：一般由较多的色彩组成 ， 一般用在数据可视化、业务标签等情景 。
3.3 色板的制作方式
我们在Material Design经常看到颜色有名称和Color ID 。
文章图片
https://materialui.co/colors 在这个网站可以选择hsl点击查看颜色详情 ， 这样能更好理解不颜色的变化 。
名称就是我们给这个颜色的代称 ， 比如绿色我们为了洋气可以称为“Teal“ ， 比如背景色我们可以叫“Ui-base” 。
Color ID 表示了颜色明度+饱和度的层级代号 ， 同样的color ID表示了颜色在不同色调的情况下明度+饱和度是在视觉上是层级统一的 。
在建立色盘时 ， 我比较建建议采用Material Design的这种命名方式 。
下面我来分享几种色盘的制作方式：
经验总结扩展阅读
- 补充艾倍生：胶原蛋白除了吃补，护肤，没想到还可以用到私密抗衰
- 症状艾玛珂儿丨敏感肌有什么样的症状？
- 黄脸婆艾玛珂儿丨“黄脸婆”你往这儿看！
- 李心艾三个月瘦35斤，穿旗袍大秀身材，曾因减肥失败遭嘲讽
- 严重艾玛珂儿丨皮肤清洁不到位，会怎么？
- 因为艾玛珂儿丨冬季有那些美白误区，你知道吗？
- 艾瑞“冻干技术”如何助力功效型护肤赛道研发创新？
- 方法艾玛珂儿丨眼部系列问题，如何快速解决？
- 眼袋艾玛珂儿丨女人衰老的标志，你中了吗？
- 面部双孖医疗王培蕾|艾维岚童颜针到底怎么用才对？