品牌ui色彩设计分析

品*ui色彩设计分析

什么的HSB?

HSB是一种颜色模式，在HSB模式下，H代表色相，S代表饱和度，B代表亮度

1.多尝试不同的配色

制作色板时，我们需要尽可能多地创造所有颜色和色彩灵感。不要害怕尝试不好，尝试处理所有颜色后，我们可以缩小色板的范围。在ui设计中，可能需要特别注意几个问题:

超链接颜色、品*颜色、主色、辅色、成功颜色，错误颜色、文本颜色、背景颜色。

2.利用HSB色彩模型

*一步是确定品*颜色，通常是企业LOGO的颜色。如果没有可以定义一种。

(1)以品*色为基准得出24色带

以Spotify为例，它的品*颜色是用绿色来定义它的一套色彩体系。

H值(色相)增加15，S和B不变，递增到基于品*颜色的24个色带。为什么是24个?24X15=360刚好围绕色相环盘一圏，从而获得基于品*色、亮度和饱和度一致性的颜色圈。

(2)基于色带得出16个色相环

细心的同学可能会发现色带上的许多颜色实际上很接近，比如绿色和蓝色。我们需要进一步筛选出合适的颜色作为16色相环，并尝试选择一些与主品*颜色更协调的颜色。

(3)根据筛选得出16色相环

调整b(亮度)和s(饱和度)

在这一步中，我们需要定义相同频率的辅助颜色，即16色相环的辅助颜色，它可以在亮度(b)上按-10，-20去加減，或者在h上以+-5去増加色相，原理是要有对比度，需要显而易见。

调整饱和度值

调节亮度，如果对比度不明显，可以是-20，-30

较后，得出一套频率相同的色盘，但是它们非常相似，所以我们需要排除其中一些。

制定色板

要制作色板，需要使用一个网站coolors，只需要在这里输入相应的品*颜色，就可以得到明度递减递增的色板。当然，你也可以调整亮度以获得出色的色板。

自此我们就得出了整个产品的调色板，许多电子商务公司，包括Airbnb和谷歌，都是通过类似的方法获得了他们的色板。较后，根据前面定义的警告颜色、超链接颜色和成功提示颜色，我们可以从辅助色板中获得相应的颜色，警告颜色为红色、超链接颜色为蓝色、警告颜色为黄色、成功颜色为绿色等。