UI界面配色方法终极指南！一篇长文搞定所有问题repo

静电说：要培养对颜色的敏感度，你必须要了解色彩的原理。在这个基础上去感悟，久而久之，色彩会在你手中变的游刃有余。下面这篇终极色彩指南非常值得一看~让我们不妨再系统梳理一下你的配色技巧吧！

颜色是一种高度刺激的视觉语言。该元素主要用于使用户在屏幕上进行操作或突出显示他们必须知道的信息。

即使是同一朵花，蓝花和红花所传达的感觉也是不一样的。它不仅传达一种情绪或细微差别，而且还用于传达信息。和红绿灯一样，绿色表示积极，黄色表示警告，红色表示禁止。

颜色像火一样。正确使用会给你想要的结果，但过度使用会毁了设计。在数字产品设计中，您需要帮助用户根据优先级快速采取行动，您需要非常小心地使用颜色。让我们找出它有什么属性可以很好地处理颜色之“火”。

颜色属性

要知道颜色是如何工作的，我们需要知道它们有什么属性。颜色具有三个属性。有区分独特颜色种类的色相（hue）、区分原色深浅的饱和度（saturation）、区分明暗的明度（Brightness）。这三个属性用于创建各种视觉效果。首先，形状主要以亮度构成，颜色根据元素的功能进行分类。一般来说，我倾向于使用黑白和一种强调色。有时不止一种颜色用于不同的功能但重要的信息。

颜色模型

在使用Sketch或 figma 时，您经常会看到这些名词。什么是 RGB，什么是 HEX？如何在数字环境中表达颜色？设计中使用的颜色，电脑处理的颜色，显示器显示的颜色，都因规格而异。色彩空间是指用于管理在此数字环境中表达的色彩的标准。在数码产品中，颜色主要是RGB、HSL、HSB等，工作时主要使用HEX和RGB。

RGBA（红、绿、蓝、透明度）：这是一种通过将光红、绿、蓝三基色与表示透明度相结合来表现各种颜色的基本方法。

HSV/HSB（色相、饱和度、值或亮度）：这是一种直观且易于处理的颜色属性）。

HEX：从RGB转换为十六进制的代码，与其他元素相比具有可以一次复制粘贴的优点，是一种通用的颜色值，在各种环境中都易于输入。

所有程序都使用 HSB 来选择颜色并使用 Hex 显示它们。当您想使颜色变暗时，在设计时要方便得多，因为当您看到 HSB 的情况时，HSB 可以更直观地处理颜色属性，您可以减少 B 而不是通过混合红色、绿色和蓝色来变暗的 RGBA。但是在开发的时候，每个属性打个逗号打个逗号比较麻烦，所以我倾向于使用HEX，打码最少，容易区分。

主色和辅色

我倾向于严格和限制性地使用颜色，因为在数字产品 UI 中滥用颜色会干扰内容导航。我们定义了颜色层次结构来管理标准。服务中使用的颜色服务基本使用原色、二次色和黑白（Black, White）。根据服务的性质，我们可能会决定更多不同的颜色组合。服务中使用的原色在很大程度上遵循品牌的图形惯例。

主色：需要颜色的最常用的颜色

辅色：使用主色时使用的颜色，需要与其他元素区分开来。

黑白：主要用于背景和文字，最亮和最暗的颜色

颜色层级（重要性）

既然已经决定了产品中要使用的颜色类型，在页面上使用颜色时，请遵循信息的重要性。基本骨架由黑色和白色组成，使用主和辅色强调功能或必须知道的信息等重要元素。在这种情况下，当认知或行为是特殊情况下的重要因素时，与其他信息不同，使用适合含义的颜色。它突出了重要的最终行为要素和必须验证的信息。

色彩占比

在决定使用哪些颜色之后，您需要决定使用什么比例。由于颜色是一种强烈的刺激物，因此您应该通过对所有元素使用颜色来避免眼睛疲劳。最舒适和可接受的比例可以利用室内使用的 60-30-10 规则。背景颜色使用 60% 和 30% 分配，10% 分配给要强调的元素或面向文本的服务。考虑总量分配背景色后，在10%以内一点一点地添加点色来调整颜色比例。

正如室内空间设计因目的而变化一样，色彩匹配也适用于空间。

对比

如果颜色模糊，眼睛需要集中注意力才能看到细微差别，因此最好使对比度尽可能强。如果你处于必须模糊区分颜色的情况下，你需要考虑元素是否真的足以通过颜色来区分它们。如果您决定以不同的方式表达一种颜色，则需要提供足够的对比度以使该颜色与其他颜色明显区分开来。考虑背景颜色和与其他元素的相对关系调整颜色。颜色对比度遵循WCAG划分的等级，主要以AA级为标准。

A（最少）——3:1

AA - 4.5:1

AAA — 7:1

静电说：我们在这里为大家提供了一个颜色对比检查器，请关注我们的公众号后，在聊天窗口回复“对比”，获取检查器吧

互补！

颜色搭配

即使您已经决定要经常使用哪种颜色，有时您也需要不同的颜色。在这种情况下，您需要根据色轮选择与主色相匹配的颜色。所有元素主要用单一颜色表示，虽然是与主色相似的概念，但在需要区分时使用类似颜色，补色用于用户需要比任何其他元素更清楚地识别的信息。

单色：重要信息使用主色，灰色区域使用与主色相同的色调。

邻近色：类似的概念，但在需要区分时使用类比。

补色：当需要比其他元素更强烈地强调时使用。

明暗对比

如果难以用一种原色区分信息，则使用浅色和深色。此时，定义了比主色浅的颜色和比主色深的颜色，按照自然界的颜色变化规律，按照亮度-饱和度-色调的顺序变换颜色。

加深颜色：基于 RGB 的色调，增加饱和度并降低亮度。

淡化颜色：基于 CMY 色调，降低饱和度并增加亮度。

为什么这么做呢？原因有以下几点：

原因一：自然界颜色的变化

在现实中，当光线强时，物体的色彩饱和度会变弱（想象一下，当你将手电筒放在苹果的正前方时）。颜色出现是因为光被材料反射。反射太少会使它看起来很暗。当物体的颜色变亮时，饱和度降低，亮度增加，当物体的颜色变暗时，饱和度增加，亮度降低。

原因二、色相本身的明暗度

虽然黄色很亮，很难在白底上书写，蓝色很暗，很难在黑底上书写，但很难想象不同颜色之间的亮度差异。你怎么知道在屏幕上看到的色调本身的亮度？

我用illustrator调整了HSB的Hue并分配了12种颜色。我照原样复制它，然后将其转换为黑白。黄色和蓝色是生成的，但其余颜色看起来不是很规则。为什么 180 度和 300 度的颜色更亮？

比较每个数字的图表，当它变为红色 绿色 蓝色时，它会变暗，而当它变为青色洋红色黄色时，它会变得更亮。由于RGB和CMY是标准，屏幕使用的是光的三基色，所以混合的颜色越多，越接近白色，所以原色最多的CMY越亮。

背景颜色

因为颜色是相对的，所以它们的属性会根据它们周围的颜色而变化。在设计深色模式时，背景颜色是反转的，所以不要使用相同的颜色，而是为每个主题使用合适的颜色。

原文：https://bootcamp.uxdesign.cc/color-for-good-ui-afd19424cc89