发布时间：2022-9-8 分类： 电商动态
本文介绍了一种采用HBS颜色模型的颜色匹配方法，以及APP颜色规范的应用，结合当前主流产品的颜色匹配，结合模型进一步分析和解释。
对于许多设计师来说，颜色匹配可以是一种物理活动，并且在颜色匹配步骤之前和之后，无数版本的颜色仍然不令人满意。
后来我们学会了如何懒惰并直接在现有界面上绘制颜色。但这不是一个长期的解决方案，每个产品的配色方案应该是独一无二的。颜色好的人可以通过感觉很容易地匹配美丽的颜色，但是由于颜色差，我们需要掌握科学的方法。因为一切都是正常的，只需找到规则并应用练习。我们可以快速掌握这项技能。
今天我将介绍一种使用HBS颜色模型的颜色匹配方法，以及APP颜色规范的应用，结合当前主流产品的颜色匹配，结合模型进一步分析和解释。该模型也是许多BAT设计团队推荐的颜色匹配模型。使用这种颜色模型可以帮助我们在颜色分级过程中对颜色有明确的心理预期，帮助我们快速有效地匹配科学和美丽的颜色。
什么是hsb？
HSB表示将点颜色放置在圆柱坐标系中的RGB颜色模型中，概念上可以认为是一种颜色的圆柱体（黑色在下面的白色上）。如下图所示，圆柱体的中心轴为灰色，由中心轴角度改变的值称为“色调（H）”，与中心轴的距离值称为“饱和度” （S）”。沿中心轴的高度变化称为“亮度（B）”或“亮度（V）”。
HSB颜色模型以直观的方式表达有关颜色的信息：“这是什么颜色的？深度是多少？光明和黑暗怎么样？“使用此模型，我们可以使用简单的数字轻松确定值的颜色，这对于十六进制代码是不可能的。以下是三个值的变化的演示，以改变颜色。
Hue是颜色的外观，我们经常称之为红色，橙色，黄色，绿色和其他颜色名称。色调值按位置测量。在HSB颜色模型中，红色是0 + deg;黄色是60度;绿色是120度;青色是180度;蓝色是240度;和洋红色是300°十二相相环的相间距为30°。二十四色相环的相间距为15°。
饱和度表示颜色的纯度，范围从0到100％，从色环的中心增加。当饱和度为0时，该点位于中心，并显示为灰色，白色和黑色。当饱和度达到100％时，该点移动到色环的边缘，这显示每种色调的最纯色。如下图所示，在色调（H）和亮度（B）恒定的情况下，饱和度（S）颜色逐渐变淡并最终变为白色。
亮度是指颜色的亮度，范围从0到100％，沿着圆柱体的底部向上增加。亮度为0时，为黑色，点位于底部。当它达到100％时，该点上升到顶部并显示最鲜明的色调状态。如下图所示，亮度随着色调（H）和饱和度（S）不变而降低（B）颜色逐渐变暗并最终变黑。
HSB在UI中的应用
通过以上解释，我相信您必须对HSB模型有基本的了解。但也许你仍然不知道如何在项目中专门应用它。下面我将演示使用此模型开发一组样本。
在在线产品颜色规范中，通常包括主颜色，辅助颜色和灰色。主要颜色通常使用应用程序图标中的品牌颜色。二次色使用原色或相邻颜色的对比度。我们以iOS规范中的红色为例。增加或减去15°在彩色圆圈上~30°可以得到一组相邻的样本，加或减120°;然后将获得一组互补的样本。在实践中，你可以上下浮动20度;达到最佳的视觉协调状态，并随着光明和黑暗的变化，可以使色彩更有节奏和协调。
应用页面也大量使用灰度颜色。合理使用灰度颜色可以使页面信息具有良好的一级和二级层次关系，增强浏览体验。灰度颜色包括黑色，白色和灰色。在灰度颜色值中，色调（H）和饱和度（S）都是0，并且仅需要改变亮度（B）值。如上所述，当亮度（B）为0时，它是黑色，并且该点位于底部。当它达到100％时，该点上升到顶部并显示最鲜明的色调状态。只需更改亮度（B）值，我们就可以轻松地为简单易记的色板着色。
在渐变中使用
HSB模型对于分级颜色也非常方便。许多APP页面的导航ICON将使用微梯度背景来增强纹理，并且通过HSB模型可以找到微妙的关系。由低到高饱和度产生的完整渐变纹理。随着色调角度的变化。色调圆的色调越接近，颜色就越自然。亮度值（B）被控制为比75％更透明，并且不会变脏。
实际项目分析
最后，通过HSB模型，提取了当前在线产品的一些颜色，仔细分析将揭示许多相似之处。
支付宝的主色为冷蓝色，使用互补的暖色图标为页面增添活力，仔细观察主色H值和色圈中的二次色调（H）值加减165°;左右立场。
与相同颜色匹配的小红皮书的主色调（H）值非常接近，主要是通过改变饱和度（H）来突出显示价格和标签。
严格选择整体色彩，使用色彩非常克制。标签使用相邻的黄色，主色距离为30°;突出显示信息。
上述颜色值勾勒出来，可能与实际颜色值不同，主要是为每个人提供一种思维方式，而且没有绝对的方法和公式。
结论
虽然目前有越来越多的配色工具，我们可以在几秒钟内快速获得好的配色方案，但作为设计师，我们理解色彩的基本理论是非常必要的。在实际的设计过程中，您会遇到各种各样的问题，要考虑的因素会非常复杂。颜色匹配是理性和感性的结合。我们所要做的就是在两者之间找到平衡点。熟悉配色原理可以帮助我们快速解决相关问题，提高工作效率。
思考问题
通过以上说明，您应该了解HSB颜色模型的基本概念。我们知道红色位于360度的开始和结束时间。色调圈。然后我们经常说红色的相反颜色是绿色，也称为互补色。也就是说，通过颜色理论，绿色应该是红色0度;在180°对面的中心;那么为什么色圈中的180度不是绿色而是青色？
本文最初由@李惠丸发表。未经许可，禁止复制。
该地图来自PEXELS，基于CC0协议
