Date 2025-12-25 15:54:23
声明：文章中的所有颜色规格仅针对可视化大屏幕设计、背景可视化和 B 端可视化规范可能不同；这只是个人观点。如有错误，欢迎纠正；部分内容参考百度及相关资料；文章中的一些图片内容来自互联网；
大家好，读者们！又鸽子了！对不起！距离上次《字体篇》已经很远了 5 已经一个多月了，因为工作原因搁置了很久，终于给大家更新了！本期带给大家的是《可视化十要素-色彩篇》。
往期回顾：
大家好，读者朋友们！
阅读文章 >大家好，数据可视化设计师。鉴于很多学生不了解我们可视化大屏幕的设计知识点，阿勇决定花一些时间详细分析这方面的知识。这些都是多年工作经验的收入，绝对有材料。
阅读文章 >大家好，数据可视化设计师。鉴于很多学生不了解我们可视化大屏幕的设计知识点，阿勇决定花一些时间详细分析这方面的知识。这些都是多年工作经验的收入，绝对有材料。
阅读文章 >色彩主要分为：色彩三要素、配色方法、可视化中的色彩扩展、色彩选择原则、行业配色。
主要是通过色彩原理、色彩匹配的多种方法，以及如何扩展可视界面中的元素颜色（文本、装饰、背景、弹出框等），最后总结了色彩的记忆属性（行业色彩匹配）。
1. 色相
色调是颜色的主要特征，是区分不同颜色的最准确的标准。如红色、黄色、蓝色等。色调可以针对不同行业代表的不同颜色，如公安蓝、党建红、金融橙等。
色相只是对颜色的另一种说法。
2. 明度
亮度可以简单地理解为颜色的亮度。不同的颜色有不同的亮度。例如，天蓝色的亮度高于红色。例如，绿色从浅到深有粉红色和绿色、浅绿色和绿色。
从黑色到白色，明度定义了颜色的亮度。
3. 饱和度
饱和度又称纯度，通常是指颜色的亮度。
颜色的纯度是指颜色感觉清晰或模糊、明亮或浑浊的程度。颜色的纯度变化可以产生不同颜色的丰富强度，使颜色产生持久的魅力和美感。
1. 图片配色法
可采用图片配色法 PS 工具，选择你喜欢的图片，拖进去 PS 里面，执行：滤镜-像素-马赛克，可以得到基于图片的马赛克像素，然后吸收颜色。
2. 插件配色法
可通过插件配色法 Eagle、与图片配色法相比，美叶等软件直接获取图片色非常方便，更加科学准确。
大家可能都知道使用色环配色，但我们需要做的是如何灵活配色，适当处理。
相邻的配色方法
由三种颜色组成，外观更舒适，色彩搭配更舒适。
补色配色法
补色是指色环中的两个对称色块，它们是色环中相隔最远的两种颜色，所以两种颜色的对比度也是最大的。
补色分割配色法
补色分割类似于补色配色。首先选择一种颜色，然后使用它的相邻颜色，最后找出它的补色。(也叫等腰三角配色)
三角配色法
三个角色由三种颜色组成，三种颜色均匀地分布在色环上，共同连接成三角形。这种方法更适合色彩鲜艳。
四角配色法
这种方法由两对补色组成 4 一种颜色，其中只有一种是主色，另外三种是辅助色。
背景、弹框、装饰、文字等颜色可以通过叠加不同透明的黑白(扩展白度和扩展黑度)来扩展。
1. 扩展白度
扩大白度是为所有颜色创造更浅的颜色（增加白色透明度）。例如，我们可以通过大大提高主色的白度作为项目的文本颜色，那么我们应该如何增加白度呢？
2. 扩展黑度
扩展黑度是为所有颜色创造更深的颜色（增加黑色透明度）。例如，通过大大提高主色的黑度，我们可以将其用作项目的背景色和卡片背景色，那么我们应该如何增加黑度呢？
3. 扩展背景
我们通过增加主色的黑度来定义背景色。具体值：主色增加 作为背景色，90%-95%的黑色。
4. 扩展弹框
我们通过增加主色的黑度来定义弹框色和模块背景色。具体值:增加主色 作为弹框色和模块背景色，75%-85%的黑色。
5. 扩展装饰线
我们通过增加主色的黑度来定义装饰线色。具体值：主色增加 50%-70%黑色，作为装饰线的颜色。
6. 扩展装饰点
我们通过增加主色的黑度来定义装饰点色。具体值：主色增加 30%-50%黑色，作为装饰点的颜色。
7. 扩展文字
通过增加主色的白度，我们可以定义文字的颜色。特定值：主色增加 90%-95%的白色，作为文本的颜色(辅助文本可以降低一半的透明度)。
8. 扩展辅助色
蛋糕图可以用很多颜色来配置，那么我们应该如何配置呢？
遵循“631”、“三不”、“两不”这些原则，可使您在可视化中的配色能力更加自由。
运用配色 631 规则将配色定义为主色 60%，辅助色 30%，对比色 10%贯穿整个界面。文本的颜色通过重要性、普通性和次要性进行分配，具有丰富页面视觉的色彩倾向。
不要选择相同的色系
同色系会使画面看起来对比度很弱，颜色指代感弱，颜色之间的层次不容易打开。
不要选择颜色接近
相邻的颜色会使画面感觉虚弱，没有强烈的对比，画面层次感不足。
不要选择同色透明
透明的颜色会使画面非常灰色，这是可视化的禁忌。不要使用它。
选择更多的对比色
强对比可以打开视觉层次，突出画面，视觉第一。
选择黑白灰
黑白灰能使画面变得非常高级，并且画面细节拉满。
色彩具有很强的记忆属性，因此用户会将他们感受到的内容与色彩联系起来。我们可以从大量的资源池中找到灵感。例如，在金融业，我们可以从已知的金融元素中匹配红色和黄色。因此，我们在配色时必须注意这一特点。
1. 交通行业
交通一般以蓝色为主，红、黄、绿（红绿灯颜色）代表道路拥挤，蓝色是大多数人最喜欢的颜色。由于蓝色的亲和力，它是数字产品设计中最常用的颜色（除了黑色和白色）。
含义： 平静、和平、安全、安静、信任。
适用： 交通、公安、监控、政府机关。
缺点： 作为品牌主色，由于其流行性和适用性，很难脱颖而出。
2. 文旅行业
文化旅游代表健康、和谐、自然、户外，绿色是自然的颜色，人们对绿色的热爱仅次于蓝色，绿色具有极好的亲和力。
含义： 健康、自然、平静、放松、成长。
适用： 医疗康复、生态、旅游。
缺点： 当绿色是主色时，你可能需要找到另一种颜色来表示成功。
3. 公安行业
蓝色是大多数人最喜欢的颜色。由于蓝色的亲和力，它是数字产品设计中最常用的颜色(黑白除外)。
含义： 和平，和平，安全，安静，信任。
适用： 公安、监控、交通、政府机关。
缺点： 作为品牌主色，由于其流行性和适用性，很难脱颖而出。
4. 电力行业
电力行业一般以国家电网绿色为主，给人一种安全可靠、绿色环保的电力行业。
含义： 安全、可靠、绿色、环保。
适用： 电力、电网、网络安全。
缺点： 当绿色是主色时，你可能需要找到另一种颜色来表示成功。
5. 生态行业
生态代表健康、和谐、自然，绿色是自然的颜色，人们对绿色的热爱仅次于蓝色，绿色具有极好的亲和力。
含义： 健康、自然、平静、放松、成长。
适用： 医疗康复、生态、旅游。
缺点： 当绿色是主色时，你可能需要找到另一种颜色来表示成功。
6. 金融行业
金融业非常重视属性搭配，暖色可以增加购买欲望，让人感到温暖。橙色被认为是一种非常有活力和热情的颜色， 它促进活动和创造性思维。
含义： 创造力、能量、热情、活跃、易怒。
适用： 金融、证券、货币、党建。
缺点： 当橙色是主色时，你可能需要另一种颜色作为警告色。
热评 白阿白