关于配色的小实验

作者：马宝

很多设计师或多或少会遇到一些关于配色的问题：“如何为你的设计选择合适的颜色？”这个问题尤为突出，我同大多数设计师一样在纠结的过程中艰难选择看似合理的“他人”配色方案；却不知其中为何这般，更谈不上如何做出自己的配色；

通过一个小实验浅析HSB 色彩模式在UI设计中的实践应用：这不是什么高深的配色方案或精湛技法，它只是“默默无闻”存在设计环节中容易被忽略的重要配色方法之一；

上学的时候一度认为：什么RGB、HSB、CMYK、LAB都与我无关，那些都是Adobe 配色专家、色彩工程师、印刷厂的事情！？现在…花一点时间自我普及一下什么是HSB和RGB的区别（限制与优势）

对于色彩理论非常熟悉的同学自动略过跳到二、实验部分并可以下载源文件查看

• 实验PSD link 配色实验.psd.zip

• Material Design color_swatches_google 配色方案.zip

一、HSB的定义（与HSV或HSL“基本同义”）

Hue Saturation Brightness，HSB 并不陌生，PS中非常熟识就是在像素图层中ctrl ＋U 色相/饱和度，在CSS中比较多的叫法是HSL；

1. 色相（H,hue）：在0~360°的标准色轮上，色相是按位置度量的。在通常的使用中，色相是由颜色名称标识的，比如红、绿或橙色。黑色和白色无色相。
2. 饱和度（S,saturation）：表示色彩的纯度，为0时为灰色。白、黑和其他灰色色彩都没有饱和度的。在最大饱和度时，每一色相具有最纯的色光。取值范围0～100%。

3. 亮度（B,brightness或V,value,L,lightness）：是色彩的明亮度。为0时即为黑色。最大亮度是色彩最鲜明的状态。取值范围0～100%。

HSB和RGB 同是web设计中运用广泛的彩色模式，在高版本浏览器的CSS3中有很好的支持（不支持 ie6，7，8）但是相比色域更广、认知度更高的RGB模式而言就经常被工程师们所忽略，部分原因是因为HSL 是一种完全不同的CSS颜色机制：

 <div style="background-color: hsl(240,100%,50%);color:white;">

HSB的限制

1. 人们很容易从十六进制推算得出RGB颜色代码，但很难从十六进制转化为HSB
2. PS的RGB颜色值可直接传导到CSS中，但PS的HSB色彩模式和CSS中的HSL因环境不同有差异
3. HSB提供色域小于RGB色域，RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216

HSB的优势

尽管有以上这些限制，但不影响学习色彩和使用配色方面的使用，不夸张的说HSB比RGB更好用，因为它颜色模式更符合我们对自然颜色调整预判的思考方式，你可以更改HSB值预测到更改颜色变化给感观带来的影响。它可以更好的让我们理解并学习色环“红、橙、黄、绿、蓝、紫、（黑灰白）”

二、我的实验

基本思路：利用HSB的色彩模式选择基色>寻求关系>发生变化，将3元色作为基色，在基色基础上设定饱和度为100，调整亮度色相达到色彩关联，具备单一色、类似色和互补色原则变化规则，衍生出3X3X3 的配色方案；

• 变化条件1，当基色发生改变，关联色一同发生规律改变

• 变化条件2，当全局色相饱和度发生变化，配色方案发生规律改变

简单步骤

1. 画出3个矩形 300*300px 取 红黄蓝 3元色
2. 添加2条 900*100px 亮度/对比度 设置 亮度 ＋40 ＋100
3. 添加6条 100*300px 亮度/对比度 设置 亮度 ＋50 ＋80 正片叠底（更好的融合背景）

4. 相同方法 利用色相/饱和度 改变色相配比

三、配色方法＃1颜色的数量＝3

太多颜色会使页面感觉太“忙”，用户很难找到他想要的信息容易视觉疲劳。 页面中太少颜色就有可能被认为单调无聊，但需求不同导致设计的配色方案会有所不同。 一般来说，使用太多的颜色的风险大于使用。建议的颜色数量是3色

四、配色方法＃2颜色的配比 6:3:1

我们知道页面上不超过3种颜色，当我们已经调配出合适的基色时，如何将3色合理配比呢？ 应用631 法则，你不应该使用三种颜色平均分配。一个有经验的设计师会把颜色变成60，30，10的百分比。

• 原色应覆盖约60％的空间，创造了设计的视觉整体统一。
• 然后二次色的加约30％，创建对比度和视觉趣味。
• 最后用强调色的10％左右，作为优雅的点睛之笔。颜色这种分布的就好比 男人的西装：整套着装的60％是由西装西裤构成。30％是衬衫，10％的点睛之笔是领带。

五、 实际应用＃3- 示例

1. 选择颜色第一首先，选择一种基准色主题色。了解需求，第一色应遵循公司的VI标准色。
2. 寻求它的关系,找到联系，你的颜色可以有，你可以用这取决于你想要的颜色数的色轮。

3. 适用于你的设计最后，应用的颜色在您的设计（牢记的631法则）。让设计更加和谐！

配色工具精选

配色方案来的太容易

1. Adobe的KulerKuler是非常智能的配色工具，从你的图像中检测出的颜色和定制您所选择的调色板。
2. Coolors - 调色板发生器 你只需按下空格键就可以随机产生一组看上去很美的调色板。
3. Hailpixel一个直观自由的方式进行创建调色板。
4. 美丽的渐变 非常丰富优雅的渐变选择
5. 从图片中提取颜色
6. 配色方案
7. MATERIAL DESIGN 调色版

参考资料

• http://demosthenes.info/blog/61/An-Easy-Guide-To-HSL-Color-In-CSS3
• http://www.php100.com/manual/css3_0/HSL-20colors.shtml

本文来自网易实践者社区，经作者马宝授权发布