大厂如何定义色彩体系

相信每位设计师都离不开色彩，那么色彩如何搭配舒服，有没有什么规律？如果我的色感不好可不可通过一些方法完成一套色彩体系的建立呢？

大家学习绘画的时候，常听老师说，女生的色感比男生好，那今天做设计难免也逃脱不了配色，不管你色感好还是不好，这套方法都可以作为你色彩体系的方法支撑，或者说让你的色彩有一定的依据，而不至于提案或者制定规范时那么随意，随意说只是你色感好或者你认为的好～

设计本身是为大众服务的，如何让你的设计更有说服力，那么今天我们就来学习下色彩体系的建立，希望能带给一些启发和新的认知。

首先我们先了解下色彩模式

相信设计小伙伴们在做设计时，离不开设计软件，软件里的会标注色彩模式，那究竟色彩模式是什么呢？

查询资料可以看到：“色彩模式”是数字世界中表示颜色的一种算法。在数字世界中，为了表示各种颜色，人们通常将颜色划分为若干分量。由于成色原理的不同，决定了显示器、投影仪、扫描仪这类靠色光直接合成颜色的颜色设备和打印机、印刷机这类靠使用颜料的印刷设备在生成颜色方式上的区别。

例如你看到的太阳七色光和你看到的各色塑料、画布、印刷品其引起视觉的原理是不一样的。前者属于“加法原则”成色，三原光红、绿、蓝，叠加产生白光－反之白光通过牛顿三棱镜被分为七色（除三原光外还有他们的叠加）；

我们常见的色彩模式分为两种：

RGB模式：适用于显示器、投影仪、扫描仪、数码相机等。（数码色）

CMYK模式 ：适用于打印机、印刷机等。（印刷色）

RGB 和 CMYK两大色彩模式是最最基础的，与我们UI设计师相关的就是RGB模式的（数码色），但是，由于RGB（红，绿，蓝）没有一个绝对的统一参考数值，所以在工作中我们很少直接通过RGB模式进行调色和定制规范。

那么我们可以通过什么方法进行调色呢？那就是HSB模式。

什么是HSB模式？

HSB色彩模式即 H(色度)、S(饱和度)、B(亮度)模式。

为什么采用HSB模式?

那要从色彩的三要素说起了，色彩的三要素是指每一种色彩都同时具有三种基本属性，即色相、纯度和明度。它采用颜色的三要素表色，即将颜色三要素进行量化，色度以角度（0°-360°）表示 ，纯度和亮度以百分比值（0%-100%）表示。

HSB模式，可以完美固定HSB中的某一个参数，然后对其他两个参数做改变，这样就有一个可参考的值域，也只有HSB能做到，而RGB则调整一个其他都会变，没办法进行控制。了解了HSB模式，我们就可以根据HSB模式开始建立色彩体系了，我们来看下具体方法：

看完上面的方法，再推荐几个常用的色彩网站，帮助你更好了解色彩和探索色彩的奥秘。

1.BrandColors

BrandColors 由DesignBombs创建。目标是为最常用的品牌颜色代码创建一个有用的参考。它已被 Smashing Magazine、CSS-Tricks、Web Design Depot、Tuts+ 和超过200 万次网页浏览量推荐。现在有600 多个品牌，拥有1600 种颜色，并且该系列一直在增长。

网址：http://brandcolors.net/

2.色板生成器

Material Design的色彩生成器，输入色值后自动生成10个区间

网址：https://material.io/design/color/the-color-system.html#tools-for-picking-colors

国内的可以用蚂蚁的色板生成工具

网址：https://ant.design/docs/spec/colors-cn

3.Adobe Color

Color 是一款网页应用用程式，它是集合了多种配色网站的功能

网址：https://color.adobe.com/zh/create/color-wheel

3.1 色彩对比

色彩调对比色，这里可以选出五种颜色，颜色下面有颜色色值，如果不清楚如何配色，可以选中其中一个颜色为基准色，其他自动帮你选择其他四种颜色。默认是RGB模式，也可在左下角切换。

3.2 色彩搭配

从 AdobeColor 社区、Adobe Stock 图像和 Behance 项目中寻找最受欢迎的色彩搭配。

3.3  色彩趋势

从 Behance 和 Adobe Stock 的创意社群，探索不同行业目前的色彩趋势。

3.4  对比分析工具

你可以通过色值选取颜色，文字颜色和背景颜色可互换。根据对比率，对比率越高越适合阅读，应当符合WCAG标准。（WCAG是一个无障碍指南）

最后

分析和分享这么多，希望对你有所帮助，可以动手尝试起来，推导出一套符合自己产品的色彩体系吧。