如何从0-1定义一套品牌色

在定义品牌色的时候：

首先，我们要明确通过色彩想传递给用户什么样的信息，是希望他有购买欲望，还是希望他感受到尊贵荣耀，还是希望唤起他某种情绪?

其次，了解用户人群

男性通常更喜欢大胆的颜色，而女性喜欢更柔和的颜色；老年人喜欢颜色鲜艳明度低的颜色，年轻人喜欢的颜色饱和度明度搭配起来活跃的颜色；西方人认为红色是死亡、灾难，在中国代表喜悦激情。

然后，了解色彩心理学，每种颜色都代表不同含义

红色表示喜庆、爱、勇气、热情、热血、危险、男子气概；

白色象征着纯洁、纯净、善良、朴素、正直、信任的颜色；

黄色是个暖色调，充满希望、信心、温暖，性格上欢快，愉悦；

橙色是欢快、活泼、热情、阳光、健康的色彩；

绿色代表清新、希望、安全、平静、舒适、生命、和平、宁静、自然；

蓝色通常让人联想公安系统、天空等，一般代表着冷静、科技、未来、纯净；

紫色代表着富贵、华贵、优雅、柔美、浪漫、梦幻、魔法；

粉色表示可爱甜美、温柔、纯真、娇嫩、青春、明快、恋爱；

黑色具有高贵、稳重、科技、神秘、酷炫、稳定、庄重的意象；

灰色具有简朴、朴素、柔和、高雅、平凡、温和、谦让、中立

总结：基于以上三点，我们可以为自己的产品定义一种颜色，如果还是没有灵感参考已经上线的知名企业，看看他们的颜色是什么样子的，从中得到启发。

定义一套色彩体系

先了解下HSB，H指的是色相（Hue），S指饱和度（Saturation），B指明度（Brightness）。

以“蓝色”为例，H值(色相)以15, S和B不变，递增得到基于品牌色的24个色带。为什么是24个，24X15=360刚好围绕色环盘一圈，因此我们得到一圈基于品牌色且明度和饱和度一致性的颜色!

我们会发现有的颜色过于亮，与蓝色的饱和度/明度不在同一个频道上，接下来进行调整。我们可以在亮度(S) 上-10/-20，也可以在B上面以+/-10去增加色相，原则就是需要有对比度、明显。（数值范围递增5～15）

用S/B变化的方法得出同频颜色，再去除一些颜色相近的，得到最终品牌色同频的一套色彩体系：

色阶

方法一：http://coolors.co/，利用这个网站制作（不推荐），自己动手丰衣足食不好吗？

方法二：tint/shade 色彩系统算法，简言之：在颜色中分别加入黑或白色更科学的生成色阶

举例中的蓝色，H（220）、S（100）、B（90）

【明色区域】

S值以S/5的结果值为一个增量进行递减，B值以(100-B)/5的结果值为一个增量进行递增。蓝色得到的两个增量分别是20和2。

品牌色在明色区下色阶对应的HSB参数：（220，80，92）、（220，60，94）、（220，40，96）、（220，20，98）

【暗色区域】

S值以(100-S)/5的结果值为一个增量进行递增，而B值以B/5的结果值为一个增量进行递减。得出的两个增量分别为0和18。

品牌色在暗色区下对应的HSB参数：（220，100，72）、（220，100，54）、（220，100，36）、（220，100，18）、（220，100，0）

结果：得到色阶

色彩可用性测试

我们无法判断用户们的使用环境，有可能是在刺眼的阳光下/昏暗的环境中。如果色彩不去做可用性测试，在很多的情况下存在体验降低的风险。

计算色彩对比度的网站：https://contrast-ratio.com/

（我常用的就是4.5:1，对比按钮变成绿色就是可用的）

总结

方法很多，有理可依，掌握就OK啦！

文章参考：

有些不知道出处，曾经看到链接没保存

颜色含义：https://www.zcool.com.cn/article/ZMTI2NzI0MA==.html

色彩对比：https://contrast-ratio.com/

tint/shade 色彩系统算法：https://www.uisdc.com/color-system-derivation