颜色戴很多帽子。品牌将色彩视为心情和知觉。在SASS和LESS功能方面，开发看到了颜色。UX设计将色彩视为跨平台的一致系统。总体而言，色彩是传达不同类型信息的通用工具。
为了改善颜色决策，让我们介绍如何：选择调色板，确定颜色优先级，考虑数据可视化以及测试可访问性。
使用颜色理论选择调色板
了解一些颜色元素将帮助你为调色板选择正确的颜色。色轮是牛顿的光实验的衍生产品，将为你提供帮助。
色相饱和度
色相是色轮上的特定颜色或等级。
饱和度是指颜色的强度。在100％饱和度下，色彩是最纯净的。
色调，色调和阴影
将纯色与中性色混合会产生较浅和较深的变化。
淡色 —颜色与白色混合
色调 -与灰色混合的颜色
阴影 -颜色与黑色混合
和谐的调色板
“所有颜色都是邻居的朋友和对立的情人。” —马克·夏加尔
这些调色板基于色轮，由和谐地协同工作的颜色组成。
我们将介绍单色，相似，互补，分裂互补和三重调色板。
单色由色调，色调和一种色调的阴影组成。
用彼此相邻的三种颜色创建类似的调色板。
互补色包含两种相反的颜色，可产生高对比度。
分补互补色由三种颜色组成，
甲三元调色板具有三个色调围绕车轮等距隔开
获得灵感
这是你开始使用自己的调色板的几种方法。
创建渐变：从和谐调色板创建渐变。
优先处理主要和次要
在设计系统中确定颜色的优先级并进行定义。就像直观的库一样，有组织的颜色可以帮助你的内部团队找到他们想要的东西。它们还可以帮助你的团队为用户创建视觉一致性。力求精确的原色，足够的辅助色和清晰的名称
主要
界面中经常使用原色。它们包括商标，交互元素，布局和文本中的颜色。添加一个简单名称及其十六进制数字：violet：＃8322DD
次要
次要颜色偶尔使用，由基于原色的重音组成。通过手工挑选，CSS函数（变暗，HSL％变亮）或同时通过两者创建（Curtis，2016年）。辅助颜色可用于表示系统反馈，例如任务成功，错误或警告。
色调叠
色调堆栈提供了灵活的选择。尝试赋予你的团队足够的选择权（3–4个步骤），但选择的范围不太多，以至于损害了一致性。
你可以使用HSL百分比创建堆栈，以轻松使用CSS函数实现。包括颜色名称，HSL亮度（0 -100）和十六进制编号：violet-lighter-20：＃B47AEA。
动手吧
EVA颜色：此AI工具可帮助你基于原色查找通知的辅助颜色。
着色叠层的冷却器：从一种颜色开始，并以递增的方式更改HSL亮度。
对于数据可视化，使用颜色强调数据的故事性。根据数据的复杂程度，你可能需要6–12种颜色才能涵盖所有用例。创建具有广泛色相和亮度范围的灵活色调堆栈。
数据类型和推荐的调色板：
分类
分类由非数字类别（国家，性别，姓名）组成。对于不同的类别，色相在色轮中间隔开的调色板效果最佳。
顺序
顺序数据具有数字或有序值。为了指示数字步长，颜色应逐渐改变色调和亮度。就像类似的调色板一样，使用彼此相邻的色相。较低的值应开始变亮，较高的值将变暗。
发散
差异数据还包含数值。基本上是两个相继的调色板在一个中心点相遇。发散可以具有负值到正值，或者在频谱上相反。保持中心点较亮，并允许颜色从中心进一步变暗。
可视化
让我们看一些工具，这些工具将使你更轻松地选择调色板以进行数据可视化。
ColorBrewer：浏览调色板（顺序，发散，分类），并在地图上可视化它们。
Viz Palette：此工具可让你在不同的数据可视化图表上查看调色板。
测试你的调色板的可访问性，以确保具有不同视觉能力的用户可以看到每种颜色。对可访问性进行测试是迈向更加实用和易读的产品的一步，可增强其体验。尽早检查并经常检查颜色是否符合万维网联盟（W3C）准则。
对比
寻找背景上文本的足够颜色对比度，以及在数据可视化中一起使用的颜色之间的对比度。在低对比度的情况下，文本将变得更难以阅读，并且数据也难以区分。W3C建议使用以下对比度：
文字4.5：1
大型文字为3：1（粗体为14pt，常规为18pt）
3：1的图标
视觉提示
除了传达重要状态的色彩外，还尝试使用多种视觉提示。色盲用户可能无法单独使用颜色来传达信息。例如，你可以为系统通知添加图标以及颜色和文本。
无障碍范围
在背景上创建不同文本颜色的对比对。然后根据中性色调的进展显示可访问范围。这可以帮助你的团队准确地了解无法访问的位置。
以下是我们学到的内容的快速回顾：
用色彩理论挑选一个和谐的调色板
将颜色分为主要和次要
考虑数据可视化及其数据类型
尽早测试色彩可及性
我们将色彩与它的通用光谱结合使用，以试图表达我们人类体验的深度。我希望这篇文章对你有所帮助，并且希望你从UX的角度出发对颜色有了另一种看法。
