HSB色彩调整法
选择和谐的延展色其实没有那么难
建议底部点击“原文链接”观看效果更好，如果文字错位等，CC在这道歉啦，站酷的文章上传的排版真的弄不来。
01.前言
当我们在讨论色彩，对比度，和谐度以及如何选择颜色时候，我们脑海里应该首先浮现出这个：色轮。
以及色彩的三要素：色相、饱和度、明度。想必这个大家都会有所熟悉。
我们如果在css样式当中比较常见的是RGB的形式，也就是red，green，blue三原色来组成一个颜色的表达形式。
但是今天我们要聊的却不是RGB，而是基于另一个HSB色彩，来得出的“主色延展色”配色方法。
02.【HSB色彩调整法】
学会这个方法能：
1. 帮助任意一个主色更快速的选出延展色。
2. 预测更加和谐的配色颜色
3. 使色彩的选取更客观，理论化，而不是“凭感觉”“或许这个颜色不错”
其实，界面设计配色的基本技能就是“能够将一种基本颜色修改为许多不同的变化”。
但是注意！很多人会从颜色库中随意挑选“认为合适的颜色来”进行配色，最后的效果可能不会太好，因为虽然颜色是非常感性的东西，但是依然是有理性的思考和心理学逻辑在内的，我们可以用理性的方法来择优选择。
在许多比较优秀的设计作品中，通常都会有主色的变化配色，也就是需要确立所谓的“品牌延展色”——较深和较浅的变化。
以及在按钮的状态变化中：
Q：如果用“白色”和“黑色”作为不透明图层来调整深浅色可以吗？
A：答案是否定的！NO！
我们来观察现实中的色彩变化：
阴影永远不会是纯黑色，亮光永远不会是纯白色。如果只是单纯的叠加黑白色的话会降低设计的氛围感，会有一种与色调格格不入的感觉。
我们来分析下面的这张现实中的照片，实拍作者 Catherine Lau。
仔细看他的“HSB”参数由浅至深的变化：
（HSB，是由“Hue-色相” “Saturate-饱和度” “ Bright-亮度” 三个参数组成，从色彩三要素来更加具体的描述颜色，是一种更人性化的描述色彩的方式。）
我们可以看到：
· 色相下降
· 饱和度上升
· 亮度下降
在观察现实中颜色如何相互作用的时候，我们可以发现，阴影会有环境色的作用，具有更饱和度的色调。我们可以这样记忆：饱和度相比原色更高，才会在亮度下降的时候拥有更多的吸引力。
亮度下降这一点就很好理解了，我们在调整为更深色的同时肯定需要降低亮度，人眼对阴影部分的感知，也是因为光线被遮住导致更深的颜色变化。
我们可以对比一下不按照本原则调整的阴影颜色，是不是就显得氛围感弱很多呢？
所以综上，当有深色颜色的变化时，我们可以预期到：
亮度会下降，饱和度会上升，色相的重要度其实没有那么高，但是依然对参数上会有影响，这是和色相的“感知亮度”也就是“光度”是相关的。
这个名次通常提到的比较少，所以并不是很常见，如果有小伙伴不太明白这点可以给我留言，下次详细的整理一下光度对于色相的影响。
向较浅的颜色变化就反过来推算。
03.最后我们得出结论
更深的调整变化原则：
· 亮度降低
· 饱和度增加
· 色相（通常）向最小亮度（红色，绿色或蓝色）移动
较浅的调整变化原则：
· 亮度增加
· 饱和度降低
· 色相（通常）朝着最大亮度移动
再通俗一点说，我们需要记住，选取较浅的颜色向左上方移动，色相可向最亮色相移动；选取较深的颜色向右下方移动，色相可向最暗色相移动。这样就能做出更加和谐自然的亮色与暗色。
04.验证
【CC分享】
如果依然对自己创立统一色调的延展色拿不准的话，我再分享一个我发现的单色调色板工具吧：
https://copypalette.app/?ref=producthunt
由Dribbbler Dimitris Raptis创建的小工具，能生成合适的单色调色板，可以选择各颜色间的对比度和颜色范围，还可以直接导出到喜欢的设计软件中，有需要话用做选单色辅助色的参考也是不错的。
觉得有用就点点推荐吧～
我的公众号【达芬奇的火柴盒（ccdataui）】后续也会发布一些轻量文，还会不定期发布一些免费素材，有需要可以给我留言领取，当然如果你不关注也没关系，随时欢迎各种交流讨论。
Thanks for reading，CC敬上。
