万字干货！超全面的色彩与应用指南

颜色是影响用户最简单和最重要的因素。研究表明，人们只需要 90 秒可以下意识地判断一个产品，其中高达 超过60%的判断仅基于颜色。因此，选择合适的颜色对提高产品的转换率和可用性非常有用。在没有文字的情况下，颜色的搭配非常重要。如何匹配颜色可以使设计感更强，如何匹配颜色更好，哪些颜色匹配不好，解决这些问题需要学习颜色理论。

色彩基础知识

我们生活在一个丰富多彩的世界里，物体的不同颜色会让我们产生不同的情绪。颜色，即光从物体反射到人的眼睛所引起的视觉和心理感觉，可以分为颜色和颜色。「色」是指进入眼睛的光传到大脑时产生的感觉，「彩」它指的是多色的意思，是人们对光变化的理解。虽然色彩的基本理论很常见，但在 UI 我们需要了解如何在设计中使用它，以及关于颜色的个性和意义。所以在学习中 UI 在配色之前，让我们先了解一下色彩的基本知识。

1. 色彩常识

原色

所有的颜色都来自三种原色：“红、黄、蓝”。许多人错误地认为三种原色是“红、绿、蓝”，但事实并非如此。红、绿、蓝是显示的三种原色，计算机屏幕显示为三种原色（红色） red，绿 green，蓝 blue）即 RGB 由此组成，每个像素的颜色都显示在三原色值上，这与艺术上的三原色不同。原色不能与其他颜色混合。将原色混合在一起，可以与其他颜色混合。

虽然 RGB 它在显示设备上表现良好，但不够人性化。因为人们经常通过：这是什么颜色来判断颜色？它太亮了吗？它太亮了还是太暗了？这样的感官维度，很难通过红、绿、蓝的亮度水平来判断。所以人们后来是基于它的 RGB 衍生出了 HSB 模式和 HSL 模式。

印刷三原色为青色（Cyan)、品红（Magenta)、黄（Yellow)。是减色模式，混合成深灰色，不能产生黑色，所以印刷时加入黑色油墨，可以产生纯黑色，即 CMYK 颜色模式。

间色

又称“二次色”。它是由三种原色和两种颜色混合而成的颜色。红色和黄色是橙色的；黄色和蓝色是绿色的；红色和蓝色是紫色的。橙色、绿色和紫色也被称为“三种颜色”。在部署过程中，由于原始颜色的重量不同，可以产生丰富的间色变化。

复色

也被称为“复合颜色”。复合颜色是由原色和颜色或颜色和颜色组成的“三色”复合颜色是最丰富的颜色家庭，不断变化，丰富的异常，复合颜色包括除原色和颜色以外的所有颜色。例如，黄色和橙色混合橙色，红色和紫色混合紫色。

冷暖色

最后，由三种原色、三种间色和六种复色组成的系统称为十二色环，从紫色到黄绿色，从黄色到紫色。冷色与天空、海洋、冰雪等有关，产生寒冷、理性、宁静等感觉；暖色与太阳、火焰、血液等有关，产生温暖、温暖、危险等感觉。

虽然可以用「冷」、「暖」颜色系统被划分为颜色，但颜色匹配有成千上万的变化。通过色彩的组合，从「非常冷」到「凉爽」到「暖和」再到「炎热」色彩印象可以用不同的配色组来表现。

知识点：

不同的色轮是由不同的人发明的。他们对颜色有不同的看法，所以创建的色轮有不同的用途。例如，伊顿色轮又称艺术三原色，由颜料三原色组成；RGB 色轮主要用于计算机、手机、平板电脑等一系列科技产品，RGB 三原色是光的三原色；CMYK 印刷领域主要采用色轮。

2. 色彩三属性

丰富多样的颜色可以分为两类，即颜色系统和无色系统。颜色系统的颜色有三个基本特征：色调、亮度和饱和度，在颜色科学中被称为三种颜色元素或三种颜色属性。

色相（Hue）

色调是自然状态下的颜色，是颜色的外观。简而言之，色环上没有明暗的颜色。色调是颜色的主要特征，是区分不同颜色的标准。例如，红色、橙色、黄色、绿色、绿色、绿色、蓝色和紫色是不同的基本色调。黑色是一种没有色调的中性颜色。人们眼中不同色调的差异是由色调本身对应光的不同波长引起的。红色波长最长，紫色波长最短。

饱和度（Saturation）

饱和度是颜色的纯度，他说颜色中所含颜色成分的比例。增加饱和度，颜色会变得更强烈、明亮、生动；减少饱和度，颜色中的灰色成分越大，颜色就越暗淡。当一种颜色与黑色、白色或其他颜色混合时，纯度就会发生变化，当混合的颜色达到很大的比例时，人们的眼睛就无法感知到。

饱和度为 0 颜色是无色的，即黑色、白色和灰色。值越大，颜色中的灰色就越少，颜色就越鲜艳。高饱和度给人一种接近的感觉，而低饱和度给人一种遥远的感觉。高饱和度和低饱和度的颜色给人一种坚硬的感觉。

明度（Brightness）

亮度是指颜色的亮度和暗度，反映了颜色深度的变化。以自然为例，有些物体在早上和晚上有不同的颜色。如树木和山脉，早晨颜色较浅；晚上，由于光线减少，颜色变暗。物体离光源越近，亮度越高，相反，亮度越暗。

明度在 UI 在设计中起着重要的作用，使用良好的亮度，可以达到良好的对比效果。达到亮度 100%时，颜色会变成白色(黑白模式下)；明度是 0%时，它会变成黑色。颜色亮度的变化往往会影响纯度。例如，蓝色加入黑色后，亮度降低，纯度降低；如果蓝色加入白色，亮度会增加，纯度会降低。

3. 色彩的搭配

完整的 UI 配色应包括主色、辅助色和中灰色。主色通常与品牌色一致。辅助色一般选择与主色一致、层次分明的颜色，强调与主色对立的互补色。让我们学习一些常见的配色方案。

单色

单色是指某种颜色的亮度变化，即叠加在颜色上 10%-90%的白色或黑色是一组颜色。单色搭配可以和谐共处，因为它们的颜色相同，但它们不容易引起注意，因为它们相对简单，会给人一种单调的感觉。单色配色也适合长时间阅读颜色变化。颜色波动较小，更适合身临其境的交互界面设计。

虾音乐是单色搭配的最佳例子。它在主要功能入口、标签栏图标等各行各业使用主色橙色在表面的关键元素上，给人一种非常精致统一的视觉体验。

如果你想在颜色变化中融入一点微妙的变化，你可以尝试在色环中选择两侧相似的颜色，这样颜色层次丰富，统一感不会改变，称为“相邻的颜色匹配”。

邻近色

是指色相环中相邻的两种颜色，在色相环上相距 60°，或者五六个数字之间的两种颜色。它可以在相同的色调中建立丰富的纹理和层次。它的优点是阳光、活泼、稳定、和谐，但不单调。当然，它被称为最安全的配色规则。相邻的颜色相似，冷暖性质相似，传达的情感也相似。例如，红色、黄色和橙色是一组相邻的颜色。相邻颜色表达的情绪大多温和稳定，没有太大的视觉冲击力。

美颜相机的主色是粉色，以浅粉色和浅紫色为辅色，既能区分信息，又能和谐统一。

互补色

互补色是指色相环的对立(180°）两种颜色，色相环上的夹角呈直线，如黄色和紫色、橙色和蓝色、红色和绿色。互补色对比度很强。当颜色饱和度很高时，可以产生许多非常强烈的视觉效果，这将使这两种颜色看起来更加鲜明，并将视觉冲击强度提高到顶峰。这种配色形式的优缺点与对比色非常相似。它经常给人一种趋势、刺激和兴奋的感觉。把互补的颜色放在一起会给人一种强烈的排斥感。如果搭配不好，就会很模仿。

Airbnb 主色为红色，界面设计采用主色的互补色「墨绿」作为主色调，给人一种清晰、高效、简洁的感觉。

分裂互补色

分裂互补色是指寻找三种颜色，其中两种是相邻的颜色，另一种是与它们形成互补的颜色，如黄色、蓝色和洋红色。这种搭配不仅能保持互补色的强烈对比和视觉兴趣，还能使颜色柔和。

36Kr 在图标和标签上使用蓝色作为主色，互补色黄色作为辅助色，然后选择黄色相邻色红色作为辅助色，用于不同的信息，帮助用户区分产品信息。

对比色

指色环上的距离 120°～180°两种颜色也是两种可以明显区分的颜色，包括颜色三要素的对比、冷暖对比、颜色与消色的对比等。对比色可以使色彩效果更加明显，形式多样，富有表现力。需要注意的是，互补色必须是对比色，但对比色不一定是互补色。因为对比色的范围更广，包括更多的元素，如冷暖对比、亮度对比、纯度对比等。这种配色形式的优点是视觉冲击力强，跳跃性强，突出性强，装饰能力强。例如，它通常用作图片中的装饰颜色，或与主体固有颜色形成对比。

马蜂窝的主色是黄色，对比色蓝色作为标签和小图标的辅色，红色作为价格等信息的强调色。

对比色不仅仅是两种颜色之间的对比，而是色调之间的对比！对比色还包括：补色对比、色相对比、亮度对比、饱和度对比、冷暖对比。饱和度越高，对比度越强，对比度越大。

四元色搭配

四元色搭配在色环上形成矩形，不是一对，而是两对互补色。以其中一种颜色为主色，其他颜色为辅色可以得到很好的效果。

四元色是一种很难平衡的颜色，但搭配起来会很出彩。如果你不相信，你可以用它来感受它，特别是当你用其中一种颜色作为主色，其他三种颜色作为辅助色。

4. 颜色与光源的关系

了解颜色的基本知识，以下是颜色和光源之间的关系。如果你想描述物体的颜色，你必须了解物体的固有颜色、光源颜色、环境颜色以及它们之间的关系和变化。

固有色

也就是说，物体本身的颜色。指物体在光源条件下占主导地位的颜色，如红罐、绿色植物等。物体的固有颜色并不存在，“固有颜色”的概念经常被引入到绘画过程中，以便于观察。从实际的角度来看，即使是太阳也在不断变化，更不用说任何物体的颜色不仅受到照明的影响，而且还受到周围环境中各种反射光的影响。所以物体的颜色并不是固定的。

光源色

物体只有在光源的照明下才能观察到它们的颜色。光源有自然光（太阳、天空）和人工光（光），它们都有不同的颜色。太阳是黄色的暖光，月光是绿色的冷光，阴天是蓝色和灰色的天空，普通的光是黄色的暖光。光源的颜色对物体的颜色有很大的影响，想象一个蓝色物体在红色光源下会是什么颜色。

环境色

物体周围环境的颜色是环境颜色。环境颜色对物体有很大的影响。例如，对于红色背景下的白色物体，白色物体的一部分表面会被浅红色覆盖，因为光源击中红色背景上的背景反射光也会“染色”到白色物体上。因此，设计师在使用计算机绘图时也需要考虑和想象环境颜色的影响。

5. 色彩空间

Lab

Lab 的全称是 CIELAB，有时也写成 CIE L*a*b*。最突出的特点是它的生理特征。首先，它包括人眼看到的所有颜色，这是迄今为止颜色域最宽的颜色空间。其次，就像人眼一样，它首先看到明暗，其次是颜色。它可以用数字的方式描述人类的视觉感应，并广泛应用于计算机视觉中。

LAB 色彩空间，L 表示亮度，值[0-100]对应[纯黑-纯白]；A颜色表示从绿色到红色的范围，值[-128-+127]对应[绿-洋红]；B表示从蓝色到黄色的范围，值[-128-+127]对应[蓝色-黄色]，是暖色，负色是冷色。Lab颜色空间的亮度和颜色是分开的， L通道没有颜色，A通道和B通道只有颜色。与RGB颜色空间不同，R通道、G通道和B通道都包含明度和颜色。

在表达颜色的范围内，最完整的是 Lab 模式(其次是 RGB 模式，最窄的是 CMYK 它弥补了模式) RGB 色彩模型和 CMYK 颜色分布不均匀的颜色模式。也就是说， Lab 该模型定义的颜色最多，与光线和设备无关，处理速度与 RGB 模式也同样快，比 CMYK 快数倍的模式。

Hsb

HSB 和 HSV 是同一件事，只是名字不同。在 Photoshop 在拾色器上可以看到，每种颜色都有一组 HSB 值，H 表示色相、S 表示纯度、B 表示明度。色相值为 0～360 度，即圆；纯度和明度值为 0～因此，100%的理解 HSB 色彩的本质可以通过模式的原理来理解。

当我们需要部署相同的颜色，保持颜色不变时，我们只需要改变纯度和亮度。如下图所示 3 同色为绿色，其色相(H152)一致，只在纯度和亮度上发生变化。

当色相和纯度都是 0 当时，颜色被称为中性色，也被称为灰色，即黑色、白色和灰色。其中，灰色不仅仅是指某种颜色，而是从黑色到白色的一系列过渡色。

灰度色主要用于文本。通常，应用程序中的文本不应超过 3 灰色。深黑色用于标题、文本和其他主要文本；浅黑色或深灰色用于辅助和提示文本；浅灰色用于禁用和无效；纯白色用于深色按钮文本。

此外，灰度色经常用于界面背景色，如界面背景色，因为它没有任何色相，总是平静和冷静，减少对内容的视觉干扰 MOO 音乐界面设计。

Hsl

HSL 颜色模式是工业界的另一种颜色标准，它是通过对色相来实现的(H)、饱和度(S)、亮度(L)通过三种颜色通道的变化和它们之间的叠加，可以获得各种颜色。在原理和性能上，HSL 和 HSB 中的 H（色相） 但两者的完全一致 S(饱和度)不同，L 和 B （明度 ）也不一样。

试着选择一种颜色，先选择一种颜色 #0688F9，放入 “HSL Color Picker”，显示 HSL 数值为：H(208), S(95), L(50)，但是我们把它放在那里， Sketch 看看里面，显示 HSB 数值为，H(208), S(98), B(98) 。

HSL 的 H 它代表了人眼所能感知到的颜色范围。这些颜色分布在平面色相环上，值范围为 0°到 360°圆角，每个角度都可以代表一种颜色。色相值的意义在于，我们可以通过旋转色相环来改变颜色，而不改变光感。在实际应用中，我们需要记住色相环上的六种主色作为基本参考：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上 60°圆心角的间隔排列。

HSL 相比 RGB 的优势

让我们做一个基础 HSL 调色练习。你能快速说出“海棠红”对应的吗？ RGB 颜色值？如果加一点橙色，提高亮度，颜色值是多少？想想看，它应该是一种介于外国红色和红色之间的性感和迷人的颜色。我们可以假设它在色相环中 H 上的角度是 330°左右，饱和度高，亮度适中，看颜色是什么？

em...我们想要的颜色应该更接近红色，让我们把色相（H）+20°到 350°，现在好多了。

通过改变色相值 H，从洋红到海棠红，我们实现了色相的偏移。 感觉很近，但还是有点灰暗。我们可以通过增加饱和度来增加饱和度（S）+15%，让这种颜色看起来更鲜艳、更亮丽。

感觉还是差不多。海棠红是少女的颜色，要嫩透明，不要那么强烈。可以增加亮度 L，+试试10%，嗯，这是我们想要的颜色。

同样，如果你想加一些橙色， 再亮一点，我们可以通过心算大致确定色相环的相位和亮度值。在这里，我们需要让它来 H 增加 20°，L 增加 5%。

在使用 HSL 在调色过程中，不需要了解复杂的色光混合原理，这是一个自然、感性、易于理解的过程。相比之下，RGB 调色方法非常笨拙、复杂和难以理解 HSL 多友好啊。

知识点：

需要提醒的是，CSS 支持代码的是 HSL，而不是 HSB。若与前端对接，UI 给到的是 HSB 如果颜色值，最终着陆的颜色效果将与设计稿不同。Photoshop 中的 Hex 和 RGB 可直接使用颜色 CSS 但是在文件中使用 Photoshop 中的 HSB 模式颜色和 HSL 是不同的。

Yuv

YUV，它是一种颜色编码方法。常用于各种图像处理组件。YUV 在编码照片或电影时，考虑到人类的感知能力，允许带宽降低色度。Y 表示明亮度（Luminance 或 Luma），即灰度值；U(Cb)表示色度（Chrominance）；V(Cr)表示浓度（Chroma）；通常 UV 描述图像颜色和饱和度，用于指定像素颜色。

采用 YUV 色彩空间的重要性是它的亮度信号 Y 和色度信号 U、V 是分离的。如果只有 Y 但没有信号重量 U、V 信号重量，所以表示的图像是黑白灰度图像(回想一下小时候看的黑白电视)。彩色电视采用 YUV 空间是用亮度信号的 Y 解决彩色电视与黑白电视的兼容性，使黑白电视也能接收彩色电视信号。

色彩心理学

色彩心理学是艺术知识学习的重要组成部分。他研究的是色彩通过对人的视觉刺激，引起人的情感和感官变化，通过人们在日常生活中积累应用色彩的经验，总结人类对色彩心理的期望。在生活中，色彩心理学对人们对色彩的认知有很大的影响。为什么交通信号灯是红色的，而不是绿色的？为什么大多数快餐店使用红色或黄色作为品牌的主要颜色？这些都是色彩心理学的相关知识。

尽管红色、蓝色是最受欢迎的颜色(通过对) App Store 受欢迎的颜色分类统计数据)。但这并不意味着这个标准可以应用于所有的产品。产品的属性是什么，用户定位是什么，产品的气质是什么，等等，这些都是在选择应用图标的颜色时需要考虑的问题。世界上第一个 Airbnb 一个叫的房间 Rausch street 出生在街上，所以 Airbnb 主色命名为「Rausch」暖色。选择主色调时，4 前往世界的著名设计师 13 一个城市，只是为了更好地理解 Airbnb 想法：热情、精力和自信，这就是 Rausch 要传递的信息。除了 Rausch 以外，Airbnb 还有其他九种颜色，包括 Kazan、Beach、Tirol、Foggy 等等，它们也是以 Airbnb 以社区街命名。

让我们解释一下每种颜色都有什么样的个性。只有了解颜色的个性，才能正确使用它们。

黑色

黑色代表质量、高端、时尚、低调、权威、严肃、稳定，是一种充满纹理的颜色。它是所有颜色中最强大的，能迅速吸引用户的注意。作为一种无色，可以使其与其他颜色多功能，黑色+金色，给人一种奢华和精致的感觉；黑色+银灰色，给人一种成熟和稳定的感觉；黑色+红色，给人一种时尚潮流的感觉。所以黑色是一种总是流行的主要颜色。

白色

白色代表纯洁、简单、纯洁、简单、信任、开放、优雅，白色通常被认为是“无色”，即不是颜色。单独使用白色通常不会引起任何情绪，但当白色与其他颜色一起使用时，白色可以很好地衬托出来，大量的空白空间使其他元素脱颖而出。在界面设计中，作为无色白色，常用于背景颜色，缓解各种颜色的冲突，衬托其他颜色，提高图片亮度，提高文本可读性。

灰色

灰色代表着智慧、诚实、执着、严肃、压抑和冷静。在黑色和白色之间，它也是无色的，没有色调，没有纯度，只有明度的变化。它可以很好地与任何颜色搭配，通常用于背景颜色或突出其他颜色。灰色不像黑色那么坚硬和耀眼。它更有弹性。它比黑色有更深层次的力量。因此，在图片中，纯黑色很少出现。它们基本上用深灰色代替黑色，也可以用浅灰色代替白色。

红色

红色代表节日、热情、快乐、士气、无拘无束、自信，是一种充满活力的颜色。这是最引人注目和最强烈的颜色，一旦出现，就会引起观众的注意，甚至会引起一些生理反应，如心跳和呼吸加速。红色最能衬托气氛，在中国传统节日中使用活泼的红色来装饰，所以不难理解每个节日的主要电子商务应用活动页面都是红色的，为了冲动，吸引消费。红色也代表了警告和警告。因此，红色的文本和按钮通常用于界面设计，以警告用户小心操作。

橙色

橙色代表温暖、快乐、辉煌、健康、阳光、年轻、华丽，是一种充满活力的颜色。橙色不像红色那么咄逼人，它衬托出一种没有危险感的活跃气氛，而是一种友好。因此，越来越多的应用程序避免常见的红色和蓝色，并选择橙色。

黄色

黄色代表信心、青春、智慧、高贵、辉煌、时尚，是一种充满活力的颜色。黄色是一种非常明亮的颜色，其明亮的颜色使它在许多图标阵列中特别突出。虽然警告效果不如红色明显和强烈，但它仍然可以给人一种非常引人注目和危险的感觉（如道路警告标志）。同时，由于太亮，也是一种非常难以使用的颜色，性格不稳定往往有偏差，与其他颜色使用容易失去原来的性格。然而，黄色和黑色的搭配非常受欢迎，比如酷和美团外卖。

绿色

绿色代表健康、生命、青春、宁静、自然、和平、安全、舒适，是一种充满希望的颜色。绿色给人无限的安全感。当我们情绪低落和消极时，我们可以看到一些绿色，这可以缓解我们的焦虑。绿色广泛应用于生活中。例如，安全出口的颜色是绿色，但应适当控制绿色的饱和度。例如，高饱和度的绿色也会令人兴奋和引起注意。

青色

蓝色代表强烈、简单、活泼、清新、柔软、优雅、希望，是一种充满灵活的颜色。蓝色是绿色和蓝色之间的一种颜色，如果不能定义一种颜色是蓝色还是绿色，那么这种颜色就可以被称为蓝色。豆瓣的主色调是蓝色，非常符合豆瓣的小而清新的气质，给用户带来安静的感觉。

蓝色

蓝色代表冷静、技术、精神、自由、放松、未来、理性、纯洁、商业，是一种充满理性的颜色。蓝色是天空的颜色，是大海的颜色。在色彩心理学的测试中，发现几乎没有人不喜欢蓝色。纯蓝色通常会让人们想起海洋和天空，可以抚平心脏的伤口，让人们的心感到平静，帮助人们的头脑变得平静。例如 twitter 蓝色是社交应用中非常安全的颜色，高纯度的颜色传达了信任、年轻和沟通的氛围。

紫色

紫色代表高贵、浪漫、优雅、性感、幸运、梦幻、时尚和创造力。这是一种神秘的颜色。它是孩子们和有创造力的人最喜欢的颜色。紫色光波最短，在自然界中很少见到，因此被延伸为象征高贵的颜色。紫色的亮度是所有颜色中最低的。结合不同的颜色会显示出不同的风格特征。紫色+粉常用于女性产品的色调。黄色是紫色的对比色。

对用户体验的色彩的影响

当我们讨论颜色时，我们谈论的是颜色的搭配。虽然有些设计师认为有些颜色是一些纯粹的审美选择，但事实上，颜色对用户的心理和行为的影响相对较深，最终会反映在用户体验和行为反馈上。

当然，色彩理论是一个相对复杂的主题。从用户体验的角度来看，颜色远不涉及颜色匹配方案的维度。通常，我们谈论的最多的是不同颜色的心理效应，以及多种颜色搭配、相互影响和可访问性的问题。设计师可以更好地将颜色应用到设计中，而不需要重新考虑整个过程。一旦设计师掌握了基本知识，色彩理论中最有意义的部分之一就是学习将更意想不到的颜色融入到他们的设计中。

1. 色彩心理学与用户体验密切相关

界面颜色的情感影响不容忽视。虽然有些颜色是 Ui 设计是“通用的”（例如，黑色、白色和灰色，事实上，几乎所有的好设计都使用了至少一种），但它们结合使用的颜色可能会对体验设计产生巨大的影响。当然，颜色的使用也会对颜色的感知产生很大的影响。以蓝色为例，在简单的布局中，大面积使用蓝色作为主色调，大面积白色底部使用小蓝色强调 CTA 按钮带来完全不同的体验。

尊重文化差异

人类对颜色有共同的理解，但不同的国家对颜色有不同的含义。红色象征着中国的节日、财富和爱情，而在西方国家，它被赋予了出血、牺牲、暴力和激进的文化意义，贬义的味道更重。相反，白色和红色，白色代表中国的死亡、反动和投降，白色的设计往往被认为太过分了「素」，我觉得不够幸运。然而，西方国家认为白色是优雅、纯洁和幸运的。因此，为了更好地降低被误解的风险，有必要根据不同的文化背景使用不同的颜色。

另一方面，随着现代主义运动的普及，白色也具有更现代的特征。在日本，白色甚至与当地文化相结合，延伸出更加精致和独特的精神特征。随着日本战后设计领域的发展和崛起，白色在该地区的意义更加丰富。在《白色》一书中，白色的意义和特征进行了深入的讨论，然后是《Subtle》在一本书中，虽然围绕着纸来讨论微妙的体验，但也没有提到白色本身的特点。

例如，在股票交易市场，国际股票市场通常是绿色的，因为红色代表西方国家的财政赤字，绿色代表财富；在中国，红色象征着财富。

非常重要的是，设计师必须根据产品的目标受众来审视调色板的文化含义。如果产品面向全球受众，请确保所使用的颜色和图像之间的平衡，以防止负面文化内涵。如果产品主要针对特定文化，设计师不必太在意所选调色板在其他文化中可能产生的影响。

历史对配色的影响

时间变化对配色的影响不仅如此。例如，中国和日本在色彩使用上仍然存在着非常典型的差异。历史上，日本作为中国的一个国家存在了很长一段时间，这也使得中国自古以来就提倡高饱和度的正色，而日本大多使用低饱和度的正色，这可以从两国的传统色彩中体现出来：

△ 中国传统色：https://color.uisdc.com/

△ 日本传统色彩：https://color.uisdc.com/jp.html

性别误区

也许自然，女人不喜欢灰色、棕色和橙色。他们喜欢蓝色、紫色和绿色。男人不喜欢紫色、棕色和橙色。男人喜欢蓝色、绿色和黑色。只要记住，当你的产品目标用户群是男性时，选择可以传达男性气质的颜色。想象一下，你使用女性颜色作为运动应用界面，结果可想而知。

△ 男女最喜欢的颜色

△ 男女最不喜欢的颜色

3. 色盲用户群的设计

你们有没有想过你们？ APP 使用者中会有视力障碍吗？

当人们谈论色盲时，他们通常指的是无法感知某些颜色。 大约 8％的男性和 0.5％女性患有不同程度的色盲——她们很难识别部分或全部颜色。面对如此庞大的特殊受众，设计师应该关注他们的需求。

△ 正常人和红绿色盲看到的颜色相同

由于色盲有红绿色盲、蓝黄色盲、单色色盲等多种表现形式。因此，使用各种视觉线索来连接你 APP 重要的状态非常重要。不要仅仅依靠颜色来表示系统状态。 相反，操作和内容应使用元素（如笔画、指示符、图案、纹理或文本）来描述。需要注意的是，不要简单地认为色盲只是不能区分红色和绿色。色盲用户对颜色的感觉差异不仅是一个单独的问题，也是一些范围内色光的敏感性。

有趣的事实：Facebook 特别选择了不太讨喜的标志和蓝色配色。因为 FB 创始人马克·扎克伯格是红绿色盲，他对蓝色的识别是最好的。“蓝色是我生命中最丰富的颜色，我几乎可以看到世界上所有的蓝色，”他曾经说过。

△ facebook

Photoshop 有非常实用的工具来帮助模拟色盲「视图」的「校样设置」菜单可以在选择中使用。这个功能让设计师在色盲用户眼中看到你的界面是什么样的。

△ pinterest登录页红绿色盲图

以点状图信息图为例，说明如何为色盲用户优化信息图：

优化采用了一些方法：1。调整颜色匹配，用红色、绿色和橙色代替红色、蓝色和黄色。2.调整亮度，使图片中的几种颜色在亮度上有更明显的差异。3.给不同的元素不同的形状。使用点元素的所有信息图都可以参考此解决方案。

在实际的设计过程中，我们需要在美观和友好之间进行权衡。我们也可以使用一些互动避免同一界面元素过多、过于凌乱的问题。

4. 流行趋势对颜色的影响

这是一个更长维度的变化。在短时间内，流行颜色的趋势变化也会对颜色的使用产生影响。这种影响直接反映在时尚行业，在网页和网页上 UI 同样存在于设计行业。比如 2020 潘通年度流行色为潘通年度「经典蓝」（Classic Blue），我明白了为什么 iphone12 今年的主色调是蓝色。

因此，当您设计时，如果您的目标用户群有明确的区域或性别偏差，您可以有目的地使用这些知识来避免设计陷阱，并更好地发挥颜色本身的功能和优势。如果受众广泛，您可以尝试使用更通用的颜色进行设计。

知识点：

你知道世界上最流行的颜色是什么吗？

每个人都会喜欢没有性别文化的颜色吗？事实上，有些人通过大规模的研究和探索找到了世界上最受欢迎的颜色：马尔斯绿（Marrs Green）。来自全世界 100 多个国家 3 一万多人响应号召完成投票，最终选出绿色。

色彩在UI设计中的应用

1. 色彩的应用

人脑对色彩的记忆度高于形态，即一个 App 界面的颜色往往给用户留下深刻印象。例如，说到支付宝，我们可能不记得它的主页是什么样子的。标签栏中的图标是什么，但我们可以立即记住，它的主要界面颜色是蓝色。因此，使用正确的颜色 UI 设计非常重要。它可以直观地呈现产品的气质和个性，有效地帮助用户组织和阅读信息，并与界面设计有联系和记忆。良好的配色往往取决于设计师的审美和感觉搭配，但合理的配色必须有合理的配色规则和配色方法论的支持。以下是一些结合相关案例来解释颜色应用的技巧。

不得触摸的禁区

经过对许多优秀设计作品的分析和研究，我们发现他们在使用颜色时不会使用一些区域，这通常被称为“颜色匹配禁区”。当然，这里的“禁区”是双引号带，没有绝对的禁区，只是说这些颜色不容易控制，在基本颜色控制之前，尽量少触摸。

配色禁区可分为三类：三角形禁区、矩形禁区、扇形禁区（红色为禁区），如下图所示：

总的来说，右下角的颜色很少使用，不管是哪个禁区。毕竟又脏又深。当然，请跳过任何颜色都可以控制的大师。

知识点：

在界面设计中，主色和辅助色一般集中在右上角，次要和不可点的色集中在中上角，文本信息和背景色集中在左侧，右下角的禁区是我们应该避免的焦点。

色调一致

在 App 设计前，应确定界面的主色调。主色将占界面的很大比例，通常是品牌色，辅助色、装饰色和背景色应以主色调为基准，以确保 App 整体色调的一致性。色调一致的界面可以给用户带来一致的视觉体验。例如，黄色（品牌颜色）和蓝色（对比色）贯穿于黄色（品牌颜色） App 始终。

60-30-10 原则

60% 30% 10%的原则是实现色彩平衡的最佳比例。在 60%的空间使用主色，可用于导航栏、按钮、图标等关键元素，使其成为整个空间 App 视觉焦点与色彩关系；30%的空间使用辅助色，可以平衡主色过多造成的视觉疲劳；最后，剩下的 当一些不太重要的元素需要区分时，10%的空间是点缀色。6:3:1 原则构建了丰富的色彩层次，使界面看起来和谐、平衡、无序。

比利将粉色应用于页签、标签栏、按钮、入口图标等，角标和图标上使用蓝色辅助颜色，一些小图标和小标签上使用黄色和红色，主次非常清晰。

色不过三

很多大神经常在网上说配色不要超过三种颜色，其实就是「色不过三」原则是不要在一个页面上使用超过 3 这也与上面提到的“60-30-10”相匹配 “原则”相似，即主色、辅助色和点缀色。但在实践中 UI 在设计中，由于产品的需要，可能会使用更多的颜色，但切记不要超过 7 种色相(注意不要 7 色值)，每个色相也可以利用其饱和度和亮度的变化来分解丰富的色彩搭配。

美团外卖首页 20 使用了功能入口大图标的背景 9 不同的颜色，每种颜色都包含一种低饱和度的颜色来进行颜色渐变，但它不显得凌乱，而是呈现出一种年轻时尚的节奏。这是因为它在这里被使用了 9 不同的颜色，但仔细观察发现只使用 3 颜色，别的 6 这种搭配是从前者的相邻颜色中提取出来的，然后随意放置，呈现出丰富多彩的色彩搭配，整体和谐统一。

远离纯黑和纯灰色

黑色就像一个没有活力的深渊，让用户陷入一种冷淡的负面情绪。远离纯黑色和纯灰色，因为它们不存在于现实世界中。尝试在纯黑色和纯灰色中添加一些颜色，使界面看起来更柔软和自然。此外，纯黑色也会与白色产生强烈的对比，长期看会使人疲劳，让用户感到焦虑。MONO 导航栏不是深黑色，而是蓝色低饱和度蓝黑色，界面背景也是蓝色浅色，不会让界面看起来死气沉沉。

遵循色彩心理学

我们已经了解了各种颜色的心理学知识，只是为了我们 App 设计提供依据。这些颜色源于人类对自然最原始的感觉，如蓝天、绿草、黄沙漠等。自然色彩对我们来说很常见，但它们蕴含着丰富的美感，实现了和谐统一。网易云音乐以红色为主色，传达出充满活力和自信的气质。

可读性好

良好的可读性可以在界面设计中为用户提供清晰的主次阅读体验，而可读性差的界面将成为用户浏览的障碍。那么，如何确保界面具有良好的可读性呢？这需要在界面设计中注意颜色搭配的比较，如在浅色背景中使用深色文本，在深色背景中使用浅色文本，使用高对比度的亮色来显示重要元素，使用低对比度的浅色来反映需要削弱和次要内容。例如，苹果 Music 标签栏图标、按钮等主要功能入口采用高纯度红色，与其他元素形成鲜明对比。即使是深灰色的辅助文本也有清晰的可读性。

灵感来自大自然

尽量在配色中使用大众熟悉的颜色，比如自然界中常见的颜色。从自然中获得的配色灵感可以让你的设计更符合用户的审美，非常自然。艺术是对自然的直接反映，是一种非常宝贵的资源，值得充分利用。我们可以收集各种与自然风光相关的图片，从中提取颜色并应用到设计中。这些近乎完美的搭配呈现出的和谐美，瞬间打动人心。天气应用 Marline 这是一个很好的例子。其界面背景的渐变是指自然的变化。随着早晨、日出、中午、日落、深夜、雨天等渐变的出现，开放应用程序唤起了用户的快乐。

将 UX 颜色与品牌相匹配

品牌价值在色板的创造中起着关键作用，但它们不是唯一重要的因素，行业规范也是关键。使用与品牌主要竞争产品几乎相同的配色方案是一种很好的方法。配色在品牌视觉中的作用是不言而喻的，但并不是所有颜色本身的内涵和情感特征。例如，在一个行业中，许多产品使用蓝色，所以你的产品继续使用蓝色，可以让用户更快「识别出」你所属的领域，但也有混淆的风险。如果你想在视觉上脱颖而出，试着使用不同的颜色。

△红色和蓝色是中国或美国最受欢迎的颜色。

在品牌设计中，选择颜色匹配的第一步总是了解各种颜色或颜色的气质和情感属性。然后，在具体设计中，根据品牌的气质和需求，进一步调整色调的亮度和饱和度。它还可以打破传统，创造一个独特的颜色匹配方案。

从强调色开始

为了使配色方案更加突出，在设计中添加强调色可能是最容易开始的地方。例如，律师咨询 App 可以用传统的蓝色作为基本配色，但如果能加入柠檬绿作为强调色，就会显得独一无二。

冷暖对比搭配

冷暖对比色是自然平衡的规律，可以广泛应用于设计中。这种配色会让作品非常出彩，不单调，让用户感到舒适平和。而且这种搭配方法基本没有缺点。在设计中使用时，技术性更强，对设计的精致感受要求更高，需要更多的练习。

黑白搭配不过时

黑色是所有中性颜色中最强的，白色是最常用的背景颜色。黑色是一个很好的选择，有一种高端和永恒的感觉，白色可以给用户带来自由、宽敞和透气的感觉。如上所述，黑色和白色也是最大的对比色，如果黑色和白色的合理使用，它将创造一种优雅的氛围。

强交互色彩

在执行过程中，交互颜色必须清晰，界面必须一致。呼吁语言必须与背景相比有足够的对比度，并且必须与其他组件相比有足够的视觉权重，以便用户能够轻松识别它们。Nike 在健身应用中，「开始」以高饱和度柠檬绿为主色的按钮，从背景中脱引而出。

然而，交互颜色并不总是具有最饱和或最亮的特征，而是通过颜色、形状、大小或对比度从屏幕上脱颖而出。因此，交互颜色的有效性将根据用户识别交互区域和执行任务的速度来衡量。同时，次要功能权更轻，视觉上更接近信息元素。如上图所示 Nike Training 在界面中，“设置”和“声音”按钮只使用简单的白色，以减少对主按钮的干扰，并避免页面中的多个强交互按钮。

保证良好的可读性

可读性是任何设计中的一个重要因素。你的颜色应该清晰易读，尤其是在处理文本时。因此，对比度对视觉效果的影响是非常关键的。如果对比度太小，界面就会产生灰色效果。清晰的对比度通常使用颜色的两极，黑纸白字或白纸黑字。在色彩背景中，为了使内容清晰可见，有必要搭配纯白色或高亮度的文本，以避免灰色文本。我们还应该注意避免在颜色背景中匹配互补的颜色和接近亮度的文本，因为这两种搭配会产生“震颤效应”，并产生光晕的视觉效果。

UI 中的阴影

没有完全纯黑色的阴影，阴影的颜色会受到物体本身固有颜色的影响。我们必须避免使用纯黑色（#00000）。如果使用不太深的灰色，效果会更好。对于有颜色的元素，最好的方法是设置与阴影元素相同的颜色，使其更暗。

如果有颜色元素，而且在黑暗的背景下，一般不建议使用阴影。但如果你必须使用它，将阴影透明度调整到小于 10%及以下，颜色跟随主色调。例如，如果按钮是绿色的，则可以为按钮设置更深的绿色阴影，并添加小于的绿色阴影 透明度值的10%。如下图所示，左边的按钮阴影非常自然，右边的按钮有一层模糊的发光效果，看起来不够漂亮。

知识点：

为什么「超链接文字」要用蓝色？

简单来说，蓝色可以在最早的网站页面中呈现出最高的对比度。

Tim Berners-Lee——web 被认为是第一个使用蓝色链接的人的主要先驱。

早期的 web 浏览器 Mosaic，使用深灰色背景和黑色文本。当时，可以使用的非黑色和最深的文本颜色是蓝色。因此，为了突出显示超链接文本并确保可读性，选择了蓝色。从那时起，超链接文本一直使用蓝色传统。

2. App 设计中的色彩搭配

App 色彩搭配可以直观、快速地反馈给用户的大脑，形成记忆思维。良好的色彩搭配可以加深用户对产品的印象；明确界面的视觉水平，让用户区分主要和次要信息；但也可以给用户一个愉快的视觉享受。所以，在 UI 设计时如何搭配色彩？我们可以从 App 所有这些颜色都包含在开始，通常是一个 App 主色、辅助色、点缀色、背景色 4 以下是以微信阅读为例的详细讲解(个人角度)。

主色

主色是指在配色中处于主导地位的颜色，给用户的第一印象，通常是产品的品牌色。在 App 在设计中，主色一般占有色相颜色 60%的比例。这是指 主色比用于界面的60%，而不是使用面积（因为一个界面中使用面积最大的是背景色）。此外，背景颜色多为浅灰色或白色，属于无色相颜色，因此不涉及配色过程。当我们看到微信阅读的第一印象时，我们可以判断它的主色是蓝色，这也是它的品牌色。这种纯主色用于标签栏、按钮、图标、注册和登录，使界面看起来非常和谐一致。

辅助色

辅助色与主色相辅相成。辅助色的功能是帮助主色建立更完整的形象，丰富界面，避免画面过于单一。一般来说，主色的相邻色、互补色、分散互补色和三角对立色都可以成为优秀的辅助色，但注意辅助色不宜过多，否则会使界面看起来花哨、分散主题。根据 6:3:1 原则上，辅助色可以占据色相的颜色 30%或更少为宜。

在微信阅读中，除主色外，绿色、橙色、梅红色和蓝紫色是最常用的颜色。它们都是辅助色，主要用于功能图标和栏目分类。虽然辅助色看起来有点多，但它们实际上是从主色的相邻色和对比色（及其相邻色）中提取的搭配，只用于页面中很少的地方。这种搭配技巧不仅可以丰富色彩搭配，传达年轻活跃的产品气质，还可以确保整体搭配的和谐统一。

点缀色

装饰色是除主色和辅助色之外的另一种颜色，通常反映在细节上。其功能是，当页面中的主色和辅助色不能满足关键信息的提示时，需要装饰色来吸引用户的注意，并使用装饰色来平衡图片的温度和温度。装饰色通常分散，使用面积小，颜色非常明显，可以与主色形成强烈的对比。一般的装饰色是主色的互补色。在微信阅读中，使用香槟金、梅红和红色作为装饰色。香槟金用于文章共享按钮，梅红用于拇指图标，强调其特殊性，红用于通知和退出登录提醒，用于警告。

来康康的三种点缀色和主色之间的关系是什么？（H）上，3 点缀色为相邻色，主色为互补色；亮度（B）上，3 点缀色均为高亮度色，起到强烈的提醒作用。这种强对比的互补色点缀色能迅速吸引用户的注意力。

背景色

背景色更容易理解，通常是为了衬托内容，大多数 App 浅灰色作为背景色，白色作为背景色的对比色，以区分视觉层次。建议根据前景色提取背景色，使其明亮或变暗，使界面色调更加统一。在微信阅读中，背景色是浅灰色，而不是纯灰色。背景对比色是在白色中添加蓝色相，而不是纯白色。整体对比度相对柔和，给人一种清新透明的感觉。

知识点：

支付宝 Alipay Design 团队提出了配色原则：

以同色系配色为主，辅以多色搭配。

同色系统是一个统一的色调，可以加深品牌色彩的感知，使界面更层次，保持颜色一致性；由于业务多样化，我们需要辅以多色搭配；多色辅助颜色，也称为功能颜色，可以设置不同的任务属性和情感表达；然后与中性黑白灰色搭配，给予更多的变化和层次。这两种颜色可以通过主次和使用比例灵活地应用于业务的每个场景，具有很好的延展性。

3. 迷人的渐变色

与单一颜色不同，渐变颜色不属于任何颜色。它创造了不断变化的视觉效果，但不会增加视觉负担。与单一颜色相比，渐变颜色的复合性使其在界面设计中具有更强的视觉冲击力，有助于快速抓住视线。如今，这种独特的颜色正逐渐成为一种趋势，原因是目前大量的扁平风格 UI 随着设计的严重同质化，人们需要追求更个性化的视觉语言来满足日益增长的设计需求。让我们学习一些常见的渐变技巧。

渐变色相、饱和度和亮度

色相（H）渐变是指从一种颜色到另一种颜色的过渡，跨度大产生的视觉效果非常明显；饱和度（S）渐变是指同一颜色不同纯度的过度，其视觉效果相对和谐单调；亮度（B）渐变是同色不同明暗的过度，这种渐变的视觉效果给人一种平静的氛围。

渐变表现形式

界面设计中经常看到各种渐变表达方式，最常用的有以下几种:

水平渐变

这一点很容易理解，指的是角度为 0 线性渐变是最流行的渐变形式。界面设计主要用于导航栏、进度条、按钮等元素，可使画面精致透明。例如，京东使用橙色渐变设计语言贯穿整个过程 App，从应用图标到导航栏、按钮和标签，都使用了从红色到橙色的过渡。仔细观察发现，水平渐变设计技术用于许多小标签，使产品看起来更年轻。

知识点：

在水平渐变中，轻（亮）的颜色通常放在左边，重（暗）的颜色放在右边，所以从左到右的方向感只是与人们的浏览习惯保持一致。另一方面，它将与人们的浏览视线相反，应避免。

垂直渐变

即角度为 90°线性渐变通常用于正方形或垂直条形元素，如注册登录页、个人中心头部等。垂直渐变中上下颜色的深度变化会产生完全不同的视觉效果。上、浅、下深会给人一种凸起的立体感，而上、深、下、浅会给人一种凹陷的空间感。例如「纪念碑谷」背景采用单色相和多色相的垂直渐变作为游戏背景，使整个画面丰富，不会太抢主色，使画面清新透气，不沉闷。

角度渐变

角度梯度通常包括对角梯度和多角度梯度。与水平和垂直梯度相比，角度梯度具有更广泛的应用场景，如图标背板、启动页面、注册登录页面、标签等。为了使界面更加华丽、动态和迷人，我们可以考虑使用多组梯度。

色块渐变

渐变的颜色不仅可以用于一个色块，还可以用于一组色块。设计师使用一组相似的颜色，清楚地区分每个菜单项，以平衡界面的频率，使画面更有节奏和舒适。与光滑的渐变不同，色块渐变不再是一个简单的背景装饰，在某些地方也有一定的功能，比如使用不同的色块来划分列表风格。Clear Todos 是日常任务清单 APP，它抛弃了传统的列表风格，用一系列色块作为列表的分割，非常漂亮精致。

径向渐变

指色彩以圆心向周围扩散的渐变，是模拟光源照射的视觉效果。因此，光源是整个画面的视觉焦点。如果将关键元素放在光源中心，它将成为主角。它通常用于大背景，如启动页面、指南页面等。Solar 天气应用的背景是径向渐变，光源扩散的效果创造了一种梦幻般的美感。

和谐渐变色

渐变颜色是从一种颜色到另一种颜色的过程，具有迷人的视觉效果。如果你仔细观察这两种颜色之间的过渡关系，你会发现并不是每次都能得到令人满意的效果，比如红色和绿色的渐变都很糟糕，因为它们是相反的颜色，但如果你添加黄色的过渡颜色会更好。原因是当两种颜色之间超过时 90 这种程度会导致它的渐变色看起来不太和谐自然，只能控制在 90 只有在程度内才能产生美妙的变化。如何改进超过 90 度的两种颜色相的渐变怎么样？此时，过渡色可以添加到两种颜色之间进行调和。例如，当从黄色到蓝色的渐变时，紫色可以作为过渡来呈现完美的视觉效果。

知识点：

搭配渐变色时，尽量只改变其色相（H）、饱和度（S）、明度（B）只有这样，才能创造出和谐的渐变色方案。

创建调色板和配色工具

调色板有助于我们在设计项目中建立色彩规范，提高工作效率。通过以上对色彩基础知识的学习，我们将介绍一些创建调色板的简单易用技巧，以及 Materia design 配色方法及配色网站推荐。

1. 收集设计作品的颜色

打开 dribbble，每个工作预览页面的左下角都有一个自动生成的配色板，许多学生可能不知道这个配色文件是可以下载的。将调色板保存到当地，并在创建时为自己提供灵感。在 ps 操作步骤为：点击“窗口-色板”，然后在色板属性面板右上角打开“导入色板”

它还有一个颜色搜索工具，可以通过输入或选择颜色值来搜索相关的配色设计作品。

2. 从图片取色

这种方法也很常用，不需要任何插件，把图片扔到那里 Ps，然后将图片「马赛克」处理后可以得到一组配色。比如我们需要一组同色系的绿色，在网上(建议) unsplash 或 500px 等专业图片网站)找一张叶子的图片，然后把图片放在 Ps 打开，进入“滤镜-像素化-马赛克”，在打开的窗口中调整单元格的大小。

同时建议平时多收集好看的摄影图片和优秀的配色方案，看多了就知道什么好什么好。 Low 配色对提升审美也有很大帮助。

△ pinterest画板

3. 自定义色块叠加

这种方法有点复杂，示例步骤如下:第一步是画一个方形作为底板，填充一个颜色#5354F0；第二步分别是正方形的上下 1/3 处叠加 20%的白色和黑色；第三步是在正方形中和右边 1/3 处叠加 40%、紫红色#DF56FA80%；最后，将紫色图层的混合模式改为叠加，以获得一组蓝紫色调的调色板。

4. 色彩系统

Materia design 调色板

Materia design 从生活场景中提取 19 一种充满活力的色彩，旨在和谐合作，可用于开发品牌调色板。Materia design 它提供了一套完整的调色板，从原色延伸出许多其他颜色。这些颜色和谐相处，可用于产品设计的品牌颜色。基本颜色的饱和度是 500，Google 建议作为产品应用的主色调，可以选择辅助色，在主色调饱和度和亮度变化的基础上，形成一套配色方案。

若上面的色板不能满足您的需要，则可选择主色，Materia design 色板生成工具将为您生成完整的色板。

主色和强调色

在选择颜色时，首先要明确界面中品牌颜色的使用场景和范围。在基础色板中选择主色，建议选择饱和度为 500 以基础色为主色，根据设计需要在主色的基础上增加 1～3 建立不同饱和度和亮度的色彩层次感，然后选择强调色彩突出重要内容或操作，如 FAB 的背景色。

深/浅背景上的文字

Materia design 通过对不同背景下文本不透明度的深度对比，对于浅色背景下的黑色文本，主文本的不透明度 87%的次要文本不透明 60%，禁止使用不透明的文字 38%；黑色背景上的白色文字恰恰相反；彩色背景上的白色文字不透明 分割线100%不透明 12%。Ant Design 它还定义了一套用于界面文本、背景和分割线的中性色，在着陆时也是通过透明度来实现的。

背景

为了提高应用程序之间的一致性和阅读的可读性，根据设计需要选择纯白色或饱和度 50、100、300 的灰色。

5. 推荐配色工具

颜色是一个难以掌握的概念——因为有无限多种可能的颜色组合，这对许多设计师来说仍然是一件非常困难的事情。为了使设计颜色匹配更容易，以下是一些常用的颜色匹配网站，希望能帮助您在日常工作中节省更多的时间。

Adobe Color

Adobe Color 它是一个基于网络的应用程序和创意社区，提供免费的色彩主题 Adobe 扩展程序也在相应的软件中提供，比如我们常用的 Photoshop 和 Illustrator。

△ https://color.adobe.com/

Adobe Color 基于相似性、互补性、三原色、正方形等不同颜色规则的配色方案可以通过拖动色轮或输入自定义色值来创建。此外，它还支持 CMYK、RGB、HSV 各种颜色模式的配色调整。用法很简单。点击色块上的小三角形确定基本颜色，自动生成 5 一个基于您选择的颜色规则的颜色匹配方案也会在拖动下面的颜色条时相应地改变颜色匹配方案。如果没有灵感，你可以通过顶部导航进入“探索”页面，这为我们提供了很多提取的颜色和图片，有些是摄影作品，有些是设计作品，上面的轮换图片提供了其他一些内容，如潘通流行的颜色，Adobe 社区和手机 APP 等等，很实用。

Eva Design System

Eva Design System 它是一个基于深度学习算法的配色网站。适用于为我们的产品或品牌生成系统的配色方案。浅色模式和深色模式的对比可以切换到右上角。

△ https://colors.eva.design/

Colorhunt

Color Hunt 是由设计师 Gal Shir 创建的开放式调色板集合，每天更新丰富的配色方案。更新时间和喜欢的人数可以在颜色卡下看到。鼠标悬浮在任何色块上以显示颜色值。单击颜色卡进入详细信息页面下载和共享。令人惊讶的是，它也可以添加到 chrome 浏览器，方便随时随地使用。

△ https://colorhunt.co/

Grabient

Grabient 是一个非常漂亮实用的渐变配色网站，支持 CSS 样式代码复制，360 渐变旋转、自由增加或删除渐变颜色等功能。设计师可以在色块下自由添加和调整渐变颜色系统和线性渐变方向。

△ https://www.grabient.com/

当然，这些配色工具只是为了方便我们，而不是主导我们。因此，在使用配色工具时，最好有一定的理论基础作为支撑，使您的配色合理，避免生搬硬套。

知识点：

对于新手设计师来说，颜色越少，控制图片就越容易。颜色级别越简洁，就越容易实现整体颜色平衡。掌握颜色的功能划分将不可避免地使您的颜色匹配过程清晰，从而提高效率。

同时，不管是 2C 还是 2B许多大公司都建立了自己的设计体系。如果你想了解其他人如何进行配色布局，最快的方法就是研究他们的设计源文件。

6. 关于色彩空间配置(附加内容)

建议使用设计软件 sRGB 作为色彩空间的默认配置，不使用无管理（ Sketch 默认情况下没有管理)。如果团队合作，请提前保持色彩空间配置的统一。如果需要为广色域的色彩空间做项目，项目文档的色彩空间可以单独设置为 Display P3 或者 Adobe RGB。

Mac 配置系统色彩空间

建议所有 macOS 用户更换系统偏好设置的显示颜色设置 sRGB IEC61966-2.1 该校准颜色方案可以大大提高系统显示效率。如果有外部显示器，也建议使用外部默认选项。默认选项通常可以发挥显示器的最大颜色性能。

Sketch 色彩空间配置

Sketch 默认颜色配置是 Unmanaged「非托管」， 我们可以在「偏好设置」中为 Sketch 指定默认的色彩空间配置，使我们的设置默认用作每个新设计文档的默认色彩空间，而不是每个新文档单独设置一次。

设置方法：Sketch → 偏好设置(Preferences) → 通用(General) → 颜色描述文件(Color Profile)，修改下拉框选择器的内容是 sRGB IEC61996-2.1(类似于其他设计软件设置方法)

若要将现有文件更改为 sRGB 颜色配置，可以通过文件-更改颜色配置，在弹出的对话窗口中更改文件的颜色空间。

写在最后

事实上，无论是色彩理论还是配色方法，最重要的事情都是这些，更需要设计师在未来的工作中不断探索和积累。这篇文章都花了很多时间写下来（低声说 BB：事实上，每篇文章都是）。对不起，有很多内容，但事实上，它已经被收集和写了。就像树一样，有很多分支不断生长，需要了解很多细分的深度知识。这也是写这样一篇文章的乐趣。通过不断地查阅信息，我们可以清楚地了解过去许多模糊的概念。果然，学习一个知识点的最好方法是说出来，这样你才能真正为自己拥有一切。我希望它能对你有所帮助。文章中有一些不严格或错误的地方。欢迎纠正并一起学习和成长。

参考文献：

这些更详细的色彩知识，可以让你的设计体验更好的色彩生活在心中:人性化 HSL 对色盲人友好的模型设计解决方案“高级” UI 设计师之路Material Design 颜色系统

欢迎关注作者微信微信官方账号:「印迹拾光」