选择合适的配色方案对于任何设计项目都至关重要，但有时候我们可能会陷入配色迷茫的境地。PCCS（The Palette-Centric Color System）色彩体系可以帮助我们从根本上解决配色困惑。本文将介绍PCCS色彩体系的概念、特点和应用，以及为何它能够帮助我们有效地解决配色困扰。
引言：
在设计领域，选择合适的配色方案是营造出引人注目、令人愉悦的视觉效果的关键。然而，很多时候我们会面临配色迷茫的情况，无法确定如何选择合适的颜色组合。为解决这一难题，PCCS色彩体系应运而生。该系统基于科学研究和心理学原理，为我们提供了一种根本性的方法来解决配色困扰。
一、PCCS色彩体系简介
PCCS色彩体系是一个基于调色板的色彩系统，旨在帮助人们更好地理解和选择色彩。该体系通过对颜色的科学分类和组织，将数百种颜色整理成一系列可管理且易于理解的调色板。PCCS色彩体系旨在提供一种直观的方式来组合和比较不同的色彩，使人们更加自信和准确地选择配色方案。
二、PCCS色彩体系的特点
主次色彩：PCCS色彩体系将颜色划分为主色和次要色，使我们能够在设计中使用更有层次感的色彩组合。
色感标度：PCCS色彩体系通过定义不同色彩之间的关系，提供了一种直观的方式来衡量色彩的相似性和差异性。
色彩用途指南：PCCS色彩体系还提供了针对不同目标和情境的色彩用途指南，帮助我们更好地在设计中运用色彩来传达特定的信息和情感。
CCS 色彩体系将明度分为 17 级，每 0.5 级为一个阶梯。为了方便理解，我们也可以粗略地分为 9 级，黑为 1.5，白为 9.5；以 5.5 级灰为中间点，1.5~5.5 为低明度，5.5~9.5 为高明度。明度差越大颜色对比越明显，明度差越小则对比越弱。
明度与纯度联系在一起研究，我们可以将其分为 4 种配色类型，分别是高明度/高纯度、高明度/低纯度、低明度/高纯度、低明度/低纯度。
三、PCCS色彩体系的应用
综合设计：PCCS色彩体系可以应用于各种设计项目，如平面设计、网页设计、室内设计等，帮助我们创建和评估各种配色方案。
品牌形象：PCCS色彩体系可以用于塑造品牌的视觉形象，帮助我们选择与品牌价值和个性相符的色彩，使品牌更加独特和有吸引力。
艺术创作：对于艺术家和创作者来说，PCCS色彩体系可以作为灵感的源泉，帮助他们探索新的调色板和组合，创作出更具表现力和独特的艺术作品。
结论：
面对配色迷茫，PCCS色彩体系为我们提供了一个系统化、科学化且直观的方法来解决这一问题。通过理解PCCS色彩体系的概念、特点和应用，我们可以更好地选择适合的配色方案，提升设计的效果和观赏体验。无论是在综合设计、品牌形象构建还是艺术创作
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本文将深入探讨如何巧用色彩来打造动人心弦的网页设计，并特别关注如何考虑配色弱的用户。我们将介绍色彩对用户体验的影响，解释配色弱的类型，提供一些适合配色弱用户的配色方案，并分享一些巧妙利用色彩的技巧，以提高网页设计的吸引力和可访问性。
第一部分：色彩与用户体验1.1 色彩在网页设计中的重要性1.2 色彩对用户情感和认知的影响1.3 配色弱用户的挑战与需求
第二部分：了解配色弱类型2.1 红绿色盲2.2 蓝黄色盲2.3 全色盲和其他色觉异常条件
第三部分：配色方案适应配色弱用户3.1 使用对比度来增强可读性3.2 避免过于依赖颜色的传递信息3.3 选择易区分的色调和明亮度3.4 采用色相和亮度对比来强调重要元素
第四部分：巧妙利用色彩的技巧4.1 利用色彩心理学原理引导用户行为4.2 创造温暖或冷静的氛围与情感4.3 使用配色工具和调色板来提高效率4.4 探索大胆与独特的颜色组合
第五部分：实践与测试5.1 设计前期的研究与用户调研5.2 可用性测试和反馈收集5.3 不断优化和改进设计
第六部分：案例研究与实际应用6.1 成功案例分析：色彩对用户体验的影响6.2 实际应用建议：考虑配色弱用户的网页设计实践
第七部分：结论7.1 色彩对网页设计的重要性再强调7.2 巧用色彩打造动人心弦的网页设计的关键要点总结7.3 呼吁更加关注配色弱用户并提高设计的可访问性
本文将详细介绍每个部分的内容，包括配色原则、配色方案、色彩心理学原理和实际案例。通过遵循这些指导和运用巧妙的色彩技巧，你可以打造出动人心弦的网页设计，并确保配色弱用户也能够享受到优质的用户体验。建议读者在实践过程中注重测试和反馈，不断改进和完善设计。通过共同努力，我们可以为所有用户提供更加可访问且令人满意的网页设计体验。
今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。而 UI 的发展从拟物的繁琐细节中挣脱出来，却在色彩的展现中放飞了自我。
零售业有个有趣的研究成果 —— “七秒钟定律”：人们在挑选商品和服务时 ，只需要 7 秒钟就可以确定是否感兴趣，而在这短暂的 7 秒钟内，色彩的作用占到了 67%。
要在小小的手机屏幕中加入这么多颜色，并保持其中的联系和逻辑，着实不易。如果你还对配色一无所知，完全不知道配色应该怎么入手，那么你需要了解一下，我几年经验总结的配色思路。
无论我们用 PS、AI，还是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我们来看看这些案例：
虽然是不同的应用，但是这个拾色器的用法大同小异，但是，很多新人并没有搞懂拾色器的正确应用逻辑。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑，也就是色相（H）、饱和度（S）、明度（B）。
HSB 是色彩科学中对所有颜色属性的理论划分，是种概念上的定义，可以用来解释任何色彩，也就是说可以和 RGB 和 CMYK 相互转化，且 HSB 的选色逻辑更清晰、简洁、干练。
因为一个正确的选色过程，是先确定出色相，然后再在这个色相维度下选出明度和饱和度，所以我们首先要关注色相选择条。
细心的同学应该已经发现了，它们的首尾都是红色，那是因为色相的序列是一个首尾相接的环形模式，所以它实际上就是色环的柱状展示图，应用起来和色环没有实际区别。
接下来就要说到重点，饱和度和明度选择区，我自己使用的习惯，是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域，然后明确它们在 UI 中的对应情绪和应用场景。
在过去的大量分析中，互联网产品的主色和重要辅助色都会往右上角聚集，一些次要、不可点的色彩聚集在中上方，而文字背景色则聚集在左侧，无人区则是我们重点避开的对象。
下面我们分析几个案例，看看它们在这个选择区中的色彩分布情况：
大家也可以自己拿一些主流的应用做截图，然后把它们的 UI 元素色彩排列到拾色面板中，就会得到基本一致的结果。牢记这 9 个区域的场景划分，可以帮助我们非常高效、安全地完成 UI 配色。
在众多的 UI 设计规范中，色彩部分的介绍，都必然包含三种类型，分别是：
主色：应用的核心色彩，品牌色
辅色：丰富页面视觉和传达效果的次要颜色
中性：没有色相的文字、背景用色
主色是一个应用的最核心的色彩，品牌的象征色，比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。
确定主色，并没有大家想象的那么复杂，它的要点在于 —— 你想让用户感受到哪种情绪，然后通过情绪关联一个大致的色彩范围，再进行微调。
在今天的互联网产品中，主色的应用选择范围在拾色器区域的右上角，前面已经有解释了。这和平面设计中的用色有非常大的不同。
移动端产品要在一个方寸大的空间中争夺用户的注意力，引起用户的兴趣，那么低饱和清淡的色调是无法实现这个目标的，所以今天主色饱和度越来越极致，比如我们之前整理的，发在站酷的一篇总结：
再加上屏幕的 RGB 显示特性，高对比度，高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法，就是在确定色相类型后，在右上方区域选出合适的色值。
辅助色是丰富应用中的次要色彩，它会包含一到若干个和主色不同的色彩，除了品牌传达外，具有更强的实用性。
前面我们提到过色环，这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型，它蕴含一个最朴素的原则，即两个颜色在这个环形中角度越大，那么视觉差异性越大，对比越强，比如下图的展示：
这些配色的模式是不能闭着眼随便挑的，它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择，是根据实际场景的功能决定的。
比如通知、提醒、取消用大红色，确认、同意用绿色或者蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下最简单、最安全的辅助色选择方式。
没有标准元素用色的情况下，再考虑应用色环的 “角度原则”，越需要被突出的颜色，可以在色环中离主色越远，越不需要被突出的则越近。
比如下方携程的案例，主色在蓝色的情况下，支付、保险金标签这些需要被重点突出的色彩，使用了主色的互补色， 让我们一眼就能看见并产生强烈的操作欲望。
中性色，是页面中文字、背景用到的颜色，它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要，实际情况恰恰相反。
主色辅助色决定了界面视觉是否出彩，而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例，就应该明白，即使只有黑白灰的状态下，我们理解这些页面和进行使用也不会有丝毫的障碍。
中性色的配置，就是制定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的主要判断依据是 HSB 中的 B（明度） 值。
中性色虽然指的是无个性，但并不是只能用纯灰色，常见的一种做法，就是为中性色添加适量的蓝色饱和度，提升观看体验（满足 RGB 的某种特性）。
这种做法，颜色越浅的时候饱和度应用色值就越低，将这个规律在拾色器中进行表现，那么我们就可以得到一个 L 型曲线，我称它为 “中性曲线”。
掌握对于主色、辅助色、中性色的选择方法，那么对于 UI 配色的奥义来说，你已经掌握了一半，接下来就要了解更具体的实践思路了。
配色并不是只有色彩的色值本身，大家一直在研究各种色彩心理学和理论，却很少关心它们应用如何应用，如何配置。
所以，我根据主色和辅助色应用总结了一个配色的四象限表格，在分别看看它们对应的案例：
主色会作为顶部标题栏或其它重要模块中的背景色，进行大面积应用，加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务，需要用丰富的色彩来进行暗示，吸引用户关注。
这类配色中，主色的应用占比也大，出现频率高，鲜有其它颜色出现。比较适用于图片内容丰富的题材中，或者是相对正式、品牌感强的应用。
这是多数主流应用的趋势，降低主色占比，留出更多的空间给内容模块的展示上，突出自身带有的服务和功能。
通常，会应用这种方式是因为产品的服务是相对单一，但也需要用户投入注意力的应用，设计师就会尽力避免给予用户过多的干扰。
每次在进行配色的时候，我们都需要对自己要应用哪种配色应用方式做出规划，然后再动手执行。有了这个目标，后面在整个项目的设计中的配色步骤就是水到渠成的事情了。
在实践前，我们要简单讲讲一个应用或者界面的标准配色的流程了，流程顺序如下：
具体应该怎么使用这套流程，我们用一个图虫 APP 改版的案例来做演示，首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。
原型是 UI 设计的基本艺能了，在开始具体设计、配色前，搭建页面的框架原型是一个必备的条件，下面，是我们已经准备好的原型案例。
然后，我们确定以橙色作为应用主色，并在拾色器中进行确认。
有了主色，就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的，那么首先可以用到的就是顶部标题栏的背景色了，以及底部 Tabbar 中的选中色，大按钮色等。
接着，我们开始整理中性色的使用，选择新的颜色来填充文字和背景，清晰的表现模块层级，文字信息的权重。
最后，就是添加辅助色和其它色彩的元素了，这个步骤建议都是放在最后一步操作。因为色彩越丰富，越难控制，容易让整个画面显得杂乱无序，所以先完成基础搭建，可以更好的帮助我们判断彩色的使用是否合理。
下面，我们使用彩色的金刚区图标，然后将用户关注、认证用户、标签等元素使用其它色彩，来丰富页面的色彩内容。
根据第一个方案，我们可以再用这个原型来实现其余的三个方案的配色。
比如下面的主色占比大，但是色彩丰富度低的。因为已经不太应用其它辅助色，所以主色填充上我们不再填充顶部导航栏的背景，而是将更多元素应用主色，减少辅助色数量。
然后是主色占比小，色彩丰富度高的方案，进一步降低主色应用的比例，然后在金刚区、标签等处使用较为丰富的配色。
最后，就是主色占比小，色彩丰富性也低的方案，那么使用中性色的元素就开始增多，只保留最核心的一些元素使用主色，和极少的辅助色。
根据四种不同的配色方案，我们就可以得到四种不同的配色结果和风格，在每次设计开始实施前，我们都可以根据这种做法来做尝试，并选出自己满意的方案。
要再次强调，UI 配色是极其强调形式的应用科学，最后做的往往会和一开始想的效果有极大出入，所以需要我们有几个备选方案，可以随时进行调整，并选出合理的那个。
作者：酸梅干超人 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作者：大秘密mimi 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
颜色跟其他事物一样，使用需要恰到好处。如果您在配色方案中坚持使用最多三种基色，您将获得更好的效果。将颜色应用于设计项目中，要保持色彩平衡，您使用的颜色越多，越难保持平衡。
颜色不会增加设计品质 - 它只是加强了设计的品质感
皮埃尔·波纳德（Pierre Bonnard）
如果您需要调色板中定义的颜色以外的其他颜色，请使用明度和色调进行调整。他们将提供不同的颜色基调与之配合。
60–30–10 规则
室内设计规则是一种永恒的装饰技术，可以帮助您轻松地将配色方案放在一起。 60％+ 30％+ 10％的比例是为了保持颜色平衡。这个公式非常有用，因为它创造出一种平衡的感觉，并允许眼睛从一个焦点到另一个焦点舒适地移动。 使用也非常简单。
60％是主色调，30％是副色和10％用于强调色。
墙面漆（60%），家具（30%），配饰（10%）
颜色的含义
几个世纪以来，科学家已经研究出某些颜色的生理效应。 除了美学，颜色也是情感交流的创造者。 颜色的含义可能因文化差异而不同。这就是为什么你看到时装店铺的设计是黑白配色。 他们希望看起来优雅而高贵。
Asos采用纯黑白配色搭配绿色按钮设计，这种配色是有原因的。
红色：激情，爱，危险
蓝色：平静，负责，安全
黑色：神秘，优雅，邪恶
白色：纯净，沉默，清洁
绿色：新生，新鲜，自然
首先考虑单色设计
在项目设计初期，我们通常倾向于尝试不同的颜色进行调整，但这种行为会很快违背你的初衷，当你发现的时候，已经花费了3个小时调整基础色...这确实很诱人，但你应该学会避免这种态度。
相反，你应当专注于元素的间距和整体布局。它会节省你很多时间。 这种约束是非常有成效的。从另一方面讲，它看起来并不乏味。如果你想让整个作品看起来更好，尝试不同的颜色选择。
我在追波（dribbble）上的作品之一。简约单色处理，专注于元素之间的使用。
避免使用灰色和黑色
我学到的最重要的颜色技巧之一是避免使用灰色等不饱和色彩。 在现实生活中，纯灰色几乎不存在。 黑色也是如此。
这张图片最黑的颜色不是＃000，而是＃0A0A10
始终记着给你的颜色增加饱和度。潜意识里会显得更自然，为用户所熟悉。
相信自然
最好的颜色组合来自大自然。 他们看起来总是很自然。 寻找颜色设计的解决方案，最好的办法是调色板总是发生变化。
为了得到设计灵感，我们只需环顾四周。
保持对比
一些颜色相互融合，而其他颜色一起使用会发生冲突。 有一个明确的规则，想要了解不同颜色之间如何融合，最好的办法是观察一个色轮。 你应该知道这个方法，但是没有必要动手操作。
获取灵感
当我们在谈论UI参考时，dribbble是最佳选择。它还具有通过颜色搜索的工具，所以当你想对其他设计师使用特定颜色进行视觉研究时，然后去这里：dribbble.com/colors
视频，平面广告设计，室内设计，时装......有这么多鼓舞人心的地方可供收集。如果说根本就没有配色参考，那一定是懒惰的原因，把那些调色板保存下来，一切看起来都非常有趣。
通常我喜欢从KPOP（韩国流行音乐）视频剪辑中选取颜色，他们看起来很华丽。
配色工具推荐
为了方便起见，我搜集了一些最好的配色工具可供选择，在2017年获取调色板，他们会为您节省大量的时间。
Coolors.co
这个绝对是我最喜欢的取色工具。 您只需锁定所选颜色并按空格即可生成调色板。 Coolors还可让您上传图像并从中调出调色板。 很酷的事情是，你不仅仅是一个结果，而是有一个选择器，允许你修改参考点。
网址链接：https://coolors.co
（请使用科学上网工具打开）
Kuler
这款Adobe旗下的配色工具已经和我们在一起了很长时间。它在浏览器和桌面版本中都可用。 如果您使用的是桌面版本，则可以将配色方案导出到Photoshop中。
Paletton
它类似于Kuler，但不同的是，您不仅限于5个色调。 当您拥有原色并希望使用其他色调时，您可以使用这款很棒的工具。
网址链接：http://paletton.com
（请使用科学上网工具打开）
Designspiration.net
试想一下，你有自己的配色的想法，但你要看到几种颜色组合的例子。 Designspiration是一个伟大的工具。 您可以选择最多5种颜色，并搜索符合您的查询的图像。 真的很好，不仅用于找到具有特定调色板的图像，还可以在设计中实现它们。
网址链接：http://designspiration.net
（请使用科学上网工具打开）
ShutterstockLab Spectrum
你可能会问：如果我想用我所选择的颜色搜索照片？ 那么，Shutterstock有一个叫做Spectrum的工具，你可以用特定的语气搜索照片。 您甚至不需要订阅，因为具有水印的小预览图像将足以生成调色板。
网址链接：https://www.shutterstock.com/labs/spectrum/
（请使用科学上网工具打开）
Tineye Multicolr
但是，如果你想搜索照片中的颜色混合，甚至指定每个颜色的数量，那么Tineye会帮助你。 本网站使用了来自Flickr千万张共享图像的数据库。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
原文地址：UX小学（公众号）
作者：小学鸭
转载请注明：学UI网》配色 | 总监说颜色丑，我调了调确实好看多了！！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
配色，设计师的世纪难题。从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。UI 的发展从拟物的繁琐细节中挣脱出来，却在色彩的展现中放飞了自我。
零售业有个有趣的研究成果 —— 「七秒钟定律」：人们在挑选商品和服务时 ，只需要 7 秒钟就可以确定是否感兴趣，而在这短暂的 7 秒钟内，色彩的作用占到了 67%。
要在小小的手机屏幕中加入这么多颜色，并保持其中的联系和逻辑，着实不易。如果你还对配色一无所知，完全不知道配色应该怎么入手，那么你需要了解一下，我几年经验总结的配色思路。
无论我们用 PS、AI，还是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我们来看看这些案例：
虽然是不同的应用，但是这个拾色器的用法大同小异，但是，很多新人并没有搞懂拾色器的正确应用逻辑。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑，也就是色相（H）、饱和度（S）、明度（B）。
HSB 是色彩科学中对所有颜色属性的理论划分，是种概念上的定义，可以用来解释任何色彩，也就是说可以和 RGB 和 CMYK 相互转化，且 HSB 的选色逻辑更清晰、简洁、干练。
因为一个正确的选色过程，是先确定出色相，然后再在这个色相维度下选出明度和饱和度，所以我们首先要关注色相选择条。
细心的同学应该已经发现了，它们的首尾都是红色，那是因为色相的序列是一个首尾相接的环形模式，所以它实际上就是色环的柱状展示图，应用起来和色环没有实际区别。
接下来就要说到重点，饱和度和明度选择区，我自己使用的习惯，是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域，然后明确它们在 UI 中的对应情绪和应用场景。
在过去的大量分析中，互联网产品的主色和重要辅助色都会往右上角聚集，一些次要、不可点的色彩聚集在中上方，而文字背景色则聚集在左侧，无人区则是我们重点避开的对象。
下面我们分析几个案例，看看它们在这个选择区中的色彩分布情况：
大家也可以自己拿一些主流的应用做截图，然后把它们的 UI 元素色彩排列到拾色面板中，就会得到基本一致的结果。牢记这9个区域的场景划分，可以帮助我们非常、安全地完成 UI 配色。
在众多的 UI 设计规范中，色彩部分的介绍，都必然包含三种类型，分别是：
1. 主色的选择
主色是一个应用的最核心的色彩，品牌的象征色，比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。
确定主色，并没有大家想象的那么复杂，它的要点在于——你想让用户感受到哪种情绪，然后通过情绪关联一个大致的色彩范围，再进行微调。
在今天的互联网产品中，主色的应用选择范围在拾色器区域的右上角，前面已经有解释了。这和平面设计中的用色有非常大的不同。
移动端产品要在一个方寸大的空间中争夺用户的注意力，引起用户的兴趣，那么低饱和清淡的色调是无法实现这个目标的，所以今天主色饱和度越来越，比如我们之前整理的一篇总结：
为什么支付宝要换 Logo 颜色？分析下目前 Logo 的主色趋势
再加上屏幕的 RGB 显示特性，高对比度，高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法，就是在确定色相类型后，在右上方区域选出合适的色值。
2. 辅助色的选择
辅助色是丰富应用中的次要色彩，它会包含一到若干个和主色不同的色彩，除了品牌传达外，具有更强的实用性。
前面我们提到过色环，这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型，它蕴含一个最朴素的原则，即两个颜色在这个环形中角度越大，那么视觉差异性越大，对比越强，比如下图的展示：
这些配色的模式是不能闭着眼随便挑的，它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择，是根据实际场景的功能决定的。
比如通知、提醒、取消用大红色，确认、同意用绿色或者蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下最简单、最安全的辅助色选择方式。
没有标准元素用色的情况下，再考虑应用色环的 「角度原则」，越需要被突出的颜色，可以在色环中离主色越远，越不需要被突出的则越近。
比如下方携程的案例，主色在蓝色的情况下，支付、保险金标签这些需要被重点突出的色彩，使用了主色的互补色， 让我们一眼就能看见并产生强烈的操作欲望。
3. 中性色的选择
中性色，是页面中文字、背景用到的颜色，它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要，实际情况恰恰相反。
主色辅助色决定了界面视觉是否出彩，而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例，就应该明白，即使只有黑白灰的状态下，我们理解这些页面和进行使用也不会有丝毫的障碍。
中性色的配置，就是制定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的主要判断依据是 HSB 中的 B（明度） 值。
中性色虽然指的是无个性，但并不是只能用纯灰色，常见的一种做法，就是为中性色添加适量的蓝色饱和度，提升观看体验（满足RGB的某种特性）。
这种做法，颜色越浅的时候饱和度应用色值就越低，将这个规律在拾色器中进行表现，那么我们就可以得到一个 L 型曲线，我称它为 「中性曲线」。
掌握对于主色、辅助色、中性色的选择方法，那么对于UI配色的奥义来说，你已经掌握了一半，接下来就要了解更具体的实践思路了。
配色并不是只有色彩的色值本身，大家一直在研究各种色彩心理学和理论，却很少关心它们如何应用，如何配置。
所以，我根据主色和辅助色应用总结了一个配色的四象限表格，再分别看看它们对应的案例：
1. 主色占比大，色彩丰富度高
主色会作为顶部标题栏或其它重要模块中的背景色，进行大面积应用，加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务，需要用丰富的色彩来进行暗示，吸引用户关注。
2. 主色占比大，色彩丰富度低
这类配色中，主色的应用占比也大，出现频率高，鲜有其它颜色出现。比较适用于图片内容丰富的题材中，或者是相对正式、品牌感强的应用。
3. 主色占比小，色彩丰富度高
这是多数主流应用的趋势，降低主色占比，留出更多的空间给内容模块的展示上，突出自身带有的服务和功能。
4. 主色占比小，色彩丰富度低
通常，会应用这种方式是因为产品的服务是相对单一，但也需要用户投入注意力的应用，设计师就会尽力避免给予用户过多的干扰。
每次在进行配色的时候，我们都需要对自己要应用哪种配色应用方式做出规划，然后再动手执行。有了这个目标，后面在整个项目的设计中的配色步骤就是水到渠成的事情了。
在实践前，我们要简单讲讲一个应用或者界面的标准配色的流程了，流程顺序如下：
具体应该怎么使用这套流程，我们用一个图虫APP改版的案例来做演示，首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。
1. 配色流程演示
原型是 UI 设计的基本艺能了，在开始具体设计、配色前，搭建页面的框架原型是一个必备的条件，下面，是我们已经准备好的原型案例。
然后，我们确定以橙色作为应用主色，并在拾色器中进行确认。
有了主色，就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的，那么首先可以用到的就是顶部标题栏的背景色了，以及底部 Tabbar 中的选中色，大按钮色等。
接着，我们开始整理中性色的使用，选择新的颜色来填充文字和背景，清晰的表现模块层级，文字信息的权重。
最后，就是添加辅助色和其它色彩的元素了，这个步骤建议都是放在最后一步操作。因为色彩越丰富，越难控制，容易让整个画面显得杂乱无序，所以先完成基础搭建，可以更好的帮助我们判断彩色的使用是否合理。
下面，我们使用彩色的金刚区图标，然后将用户关注、认证用户、标签等元素使用其它色彩，来丰富页面的色彩内容。
2. 其他配色类型应用
根据第一个方案，我们可以再用这个原型来实现其余的三个方案的配色。
比如下面的主色占比大，但是色彩丰富度低的。因为已经不太适用其它辅助色，所以主色填充上我们不再填充顶部导航栏的背景，而是将更多元素应用主色，减少辅助色数量。
然后是主色占比小，色彩丰富度高的方案，进一步降低主色应用的比例，然后在金刚区、标签等处使用较为丰富的配色。
最后，就是主色占比小，色彩丰富性也低的方案，那么使用中性色的元素就开始增多，只保留最核心的一些元素使用主色，和极少的辅助色。
根据四种不同的配色方案，我们就可以得到四种不同的配色结果和风格，在每次设计开始实施前，我们都可以根据这种做法来做尝试，并选出自己满意的方案。
要再次强调，UI 配色是极其强调形式的应用科学，最后做的往往会和一开始想的效果有极大出入，所以需要我们有几个备选方案，可以随时进行调整，并选出合理的那个。
以上是我们关于配色有关知识点的分享，希望可以帮助大家提升对 UI 配色的认识。
文章来源：优设 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天跟大家聊聊设计中焦点配色这个话题。焦点这个词对于设计师来说应该不会感到陌生，但是这节课我们主要是从色彩的角度，来看看焦点在设计中的作用以及色彩焦点的重要性。首先我们要知道设计的目的就是通过视觉来传达信息，而视觉的表现形式是有一定规律性的，在这些众多的规律性当中，其中有一条就是通过色彩来实现，而焦点配色就是色彩设计中最有效的一个手段。
其实无论是绘画、摄影还是我们的设计，都存在大量的焦点配色，只是我们平时没有特别去注意而已。比如莫奈的这幅《日出·印象》，我们来尝试分析一下焦点的设置和移动。
我想绝大多数人都应该是这种移动路线，也就是在大面积灰色调和冷色调中先被强暖色的太阳所吸引，然后是近景全黑色的船，接着顺延到另一条船上，当然每个人都会有所不同。
比如也可能是这种从远景到近景的顺序。
也可能有的人是从近到远的观看顺序，但是无论你是哪一种，都不重要，为什么？
因为无论你的视线是怎么移动的，都不会影响到我们最终焦点的归属。大家可以感受一下，当你看这幅画的时候，无论你先看哪后看哪，最终你的眼睛都会被这个橙红色的太阳所吸引，这就是色彩焦点的魅力。
我们再来看一个摄影作品，这个跟刚才那幅画来比，焦点就更加清晰了，而且这里也不需要焦点的移动，很明显焦点就是这个人物。
但是这个焦点是怎么通过色彩得到强化的呢？可能有的人会说这么明显的人物肯定是焦点啊，但是你可以尝试把人物后面的暖色光去掉看看，虽然人物同样是这个画面的焦点，但是一定没有现在这样抢眼，因为暖色和背景的冷色形成了强烈的对比。
所以无论是绘画、摄影还是我们接下来会看到的设计，其中都会包含一种故意的或者是有意识的色彩焦点的安排，而这种焦点的形成是怎么实现的呢？其实就是通过色彩对比，因为有色彩对比必定产生焦点，即使没有焦点我们也会努力去寻找焦点。我们联想下平时的生活就会发现，无论是我们看到一幅画面，或者是置身于一个真实的环境中，我们都会不自觉地去寻找色彩最突出或者最醒目的东西，这就是作为人的一种本能，也就是自然而然地去寻找焦点。
下面我们来看一些设计作品，我们看这三个界面，不能说没有焦点，有，就是图片，准确地说应该是没有色彩焦点，所以我们接收到的就是图片加上信息排在一起，我们很难在短时间内区分出哪些是重要信息哪些是次要信息。我们不知道视线应该落在哪里，因为没有突出的东西，这种不知所措会让看的人感到不舒服，这就是没有焦点会造成的一种情况。
同样这三个界面，我们什么都不变，只是在想强调的部分填充一个颜色，这样就会让看的人可以通过色彩毫不犹豫地感受到焦点，这种交互才是人性化的交互，而这个简单的过程其实就是色彩设计。
我们再来看一个更加简单易懂的，比如现在这个，就是在一个蓝色背景上编排纯白的文字，可能通过字号和距离的安排我们也知道孰轻孰重，但是如果从色彩的角度来看还不够，因为没有形成让人快速识别的焦点。
如果在想强调的地方，适当的填充一个颜色，那么瞬间就有了焦点，而这个颜色和背景色的对比越强，焦点就越明显。
我们看这个海报，当我们看到这个画面的时候首先注意到的是什么？
首先注意的肯定是上方的图片，其次会根据信息的层级大小去看主标题，然后是次要信息。这种没有设置色彩焦点的形式，虽然不太会影响信息的阅读，但我们不妨试试有色彩焦点的情况。
当原本就是画面中比较重要的标题信息和突出的英文被填充红色之后，焦点就产生了并且得到强化。
这时候当我们再看这个作品，就可以在短时间内迅速获得信息，如果想继续了解也可以继续阅读，这就是有焦点和没焦点或者焦点不突出的差别。
我们看这个 banner，这里我们不说它的版式怎么样，我们就看色彩和焦点，这个画面有什么问题呢？就是焦点设置错误，什么意思？
也就是大家看这个画面的时候，虽然都会先看月饼的图片，然后是标题到进入专场，但是大家发现没有，你的视线总会被中间这个粉色的花瓣吸引。
就是那种你不想看它，但是又不得不看的感觉，因为这个花瓣的颜色完全没必要出现在这里，因为它不是信息，为什么要充当焦点呢？这就是焦点错误。
我们把花瓣去掉试试，这样焦点就很清晰明确了。
现在我们知道了有焦点和没焦点的差别，那焦点的设置其实也是有多种情况的。我们就拿这个网页来举例，版式部分保持不变，你想突出哪里就在哪里设置焦点。我们来看看通过色彩把焦点安排在不同的地方，这个页面产生什么样的效果。
比如我们可以把焦点设置在上半部分，也就是顶部的品牌和导航区域。
也可以把焦点设置在主标题的文字信息上。
还可以设置在底部区域，形成色块。
当然也可以是自由式的焦点设置，强调你想强调的部分，这种情况下就有了焦点的移动。
通过之前的案例分析我们总结一下有焦点的好处：首先它满足了人的生理需求，其次满足了视觉传达的需求，最后满足了审美的需求。也就是说我们所要做的视觉设计是需要传达信息的，你得让受众看到你的信息才行，而要想有效的让人看到信息，焦点的设置就要满足前面三个需求，如果没有满足，一定程度上说明你的作品是失败的。实际人都是充满惰性的，也都不喜欢延迟，当人们看到所有的信息在它应该在的位置，不需要眼睛和大脑再去阅读，这时候就得到了一种观看和阅读的满足感。
说了这么多焦点的好处，下面我们就来看看如何通过配色形成或者强化焦点。首先我们要知道的就是焦点是通过对比实现的，而这里包括了色相对比形成焦点、冷暖对比形成焦点、深浅对比形成焦点、有彩色与无彩色对比形成焦点、花色与纯色对比形成焦点、色彩面积对比形成焦点。
首先我们来看色相对比形成焦点，这里的色相对比通常是指互补色或对比色之间的对比，因为色相差异越大越容易产生焦点。比如这个海报就是蓝色和黄色的互补色对比，当然需要注意的是，我们所列举出的这些对比并不是单独存在的，它们往往都是相互结合的，比如这个海报最明显的就是色相上的互补色对比，当然你也可以说是冷暖对比，同时也包括面积对比。
这个网页作品，蓝色与绿色形成了色相上的对比，同时它们二者又与背景形成了有彩色与无彩色的对比。
这个圣诞主题的 banner，整体是大面积的暗红色，这就让人物头顶的绿色圣诞树成为了焦点，也就是色相对比中通过对比色形成焦点。
然后是冷暖色对比产生焦点，这个版面很简单，就是文字编排加上背景，但是很明显，通过在强调的地方使用蓝色与背景的粉红色形成一种冷暖对比，让焦点一目了然。
这个同样也是红色与蓝色的冷暖对比强调焦点，让人一眼就能抓住重点。
这个同样也是通过冷暖对比形成焦点，只不过这个画面并不是单一焦点的形式，是多个焦点从大到小或从近到远的移动。
如果色相对比不够明显，那么通过单一色彩或近似色彩的深浅对比也可以很好的形成焦点，同样纯度和明度差异越大越容易产生焦点。比如这个画面中的焦点面包与背景形成的就是深浅对比。
这个画面整体是褐色的基调，但是杯子中的茶汤是比背景更亮一些的颜色，所以它自然而然地就成为了画面的焦点，而且这个焦点也是符合这个版面的设计逻辑的。
这个页面的背景是偏深一些的粉红色，当然图片肯定是这个画面的第一焦点，但除此之外，这个画面中还有另外两个焦点，就是比背景偏暗一些的嘴唇，这就是利用深浅色对比形成焦点。
焦点的作用以及如何强调焦点都很好理解和操作，但是设置焦点背后的原理是什么呢？就是我们之前讲过的色彩营销，因为设计的目的是通过视觉传达信息，而传递信息的目的是为了营销，所以答案也就很明了了。也就是如何设置焦点以及让谁成为焦点，这背后的逻辑要依据营销的目的，换句话说焦点的设置一定要满足以上的需求，假如设置了错误的焦点，就会适得其反，倒不如不设置焦点了，这个道理大家一定要明白。
我们接着往下看，下一个就是有彩色与无彩色对比产生焦点。比如我们看上面这个海报，图片整体是黑白的，只有雨伞的部分是红色，非常醒目的被凸显出来，当然就是第一焦点，其次就是红色的标题性文字。因为黑色与红色很好的对比效果，所以类似这种形式的摄影作品大家也一定见过很多，就是整体是黑白，个别地方用红色的形式。
虽然这个网页页面上的有彩色并不是单一色彩，但是与背景黑色的搭配，整体上依然是有彩色与无彩色搭配所产生的对比，从而产生焦点。
这个虽然也是有彩色与无彩色的对比，但是这个很巧妙，因为设计者并没有直接在主标题上填充有彩色，而是在标题下方使用了一个有彩色的色块，这也是一种变相突显焦点的方式。
接下来是花色与纯色对比产生焦点，这个算是很常见很通用的一种形式了，尤其是照片上编排文字的形式，如果图片本身的色彩就比较丰富，那么文字色必然要使用单一的色彩才能保证很好的识别。
这个杂志封面的背景是由多种色彩所形成的插画图形，而人物一身黑色位于中间形成了第一焦点，其次是位于人物上的绿色文字，可以说既是有彩色与无彩色的对比，又是有彩色与花色之间的对比。
这个海报上的图片虽然色彩并没有多纯，但是由于色彩比较分散，所以可想而知，在它上方编排文字难免会造成识别度很低的情况，所以设计师也很巧妙地使用了添加色块的方式，利用这种图片花色与色块纯色的对比来突出焦点。
最后就是通过色彩面积大小产生焦点，这种面积的对比可以说是非常常见的，可以说大部分有色彩焦点的画面都是之前的那几种形式与面积对比的一个结合，但是并没有谁重要谁不重要一说，就比如这个海报上的红色圆形，无论你是把它的面积放大，还是把它换成和蓝色相近的颜色，焦点的效果都没有现在的好。所以我们在具体设计配色的时候千万不要有强迫症，因为这些方法往往都是结合使用的。
这个也是面积对比产生的焦点，同时又有蓝色与红色的冷暖对比。
这个页面也是，通过在大面积绿色调中使用一个红色块，快速形成对比，从而确定焦点。
以上我们主要讲解了通过配色形成焦点的一些方法，但其实细心的同学就会发现，这里面还是有一些潜规则的，有的是和色彩有关，有的可能和色彩无关。比如说同样的色彩或同样大小的对象，具象的东西比抽象的东西容易形成焦点、人物比场景或风景容易形成焦点、图像比文字容易形成焦点、标题文字比内文容易形成焦点、暖色比冷色容易形成焦点、强对比比弱对比容易形成焦点，最后我们就分别来看一下。
具象的事物比抽象的事物容易形成焦点，这个似乎没什么可说的，大家应该都能明显的感觉到，就比如这个海报，即使人脸的周围有着密密麻麻的抽象图像，我们的注意力依然在人脸的部分。
人物要比场景更容易产生焦点，比如这个海报，同时存在两张图片，虽然上方的图片是一匹马不是人，但是道理是一样的，我们的视线总是想关注这个马的眼睛，而下方的海水我们可能只是一扫而过。
图片比文字更容易形成焦点，这个也是无需多说的一点，因为即使都是黑白的图片和文字，我们也会首先注意到图片，这是图片所具有的天然魅力。比如这个海报，假如我们把图片遮掉，那么红色的「魂」字毋庸置疑就是第一焦点，因为在一堆黑色文字中它实在太显眼了，但是加上人物图片的话，就没有多少人会去关注「魂」字了。
标题比内文更容易产生焦点，这是因为标题所具有的天然优势，也就是面积优势，比如我们看这个海报，其实它这里的标题使用与图片一样的蓝色并不是很突出，虽然日期和副标题使用了色相对比，也确实成为了焦点，但是对于主标题的影响并不是很大，我们依然不会忽略掉主标题，这就是面积原因所造成的，因为它足够大。
暖色比冷色更容易形成焦点，这个海报就是一个很好的说明，因为海报中两个图片大小相当，唯一的区别就是一个是暖色一个是冷色，那么哪个更吸引你呢？一定是暖色，如果你说你就是被冷色所吸引那也没关系，但是你自己保留意见，我不接受反驳。
最后就是强对比大于弱对比，比如我们看这个海报，其实本身背景色上有色相的对比，但是因为对比不够强，所以就让上方的红色成为了焦点，因为红色与整体背景形成了强烈的深浅对比。
简单总结一下，首先我们通过一些案例说明了色彩焦点的重要性，也就是满足了人的三种需求：生理需求、视觉传达的需求以及审美的需求。其次我们讲解了如何形成或强调焦点，也就是通过一些色彩对比来实现。最后补充了一些焦点配色中存在的潜规则，也就是哪些内容或形式具有形成焦点的天然优势。当然这一切的落脚点还要归到视觉传达以及色彩营销上。
文章来源：优设 作者：研习设
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
界面配色2016 年玩追波的时候，有幸加入了 FreedomUnion 团队，当时团队内的小D（Dea_n）的界面渐变风很受欢迎，他使用的颜色干净、舒服、有感染力，很快形成了自己特有的设计风格。
我被他的配色深深吸引了，特别想研究他的配色，就尝试把他的作品在 PS 中打开，尝试吸色，找找他经常使用的配色范围。为什么他配出来的颜色就很吸引人，长时间看眼睛也不会太累？下面先欣赏一下小D（Dea_n）的设计作品。
作品已经过了三年了，如果是一般的配色作品应该看上去会有些过时，但是小D（Dea_n）的作品看上去并没有，还是有不少作品的配色现在看上去也是很前卫的。一起来看看我对小D（Dea_n）的大部分作品的吸色情况吧。
小D（Dea_n）的用色着实很大胆，很多都是贴边用色。我上大学的时候，老师曾经说过尽量少用贴边的颜色设计，包括灰色也可以使用带有颜色倾向的高级灰。这下终于明白了为什么小D（Dea_n）的配色这么亮眼。
当然我也有自己的小发现，我发现每个的作品主配色的 CMYK 值总会有两种色值为 0%，比如C：0%、M：91%、Y：95%、K：0%。
难道只是偶然？当时我也请教过小D（Dea_n）是否是刻意的，得到的答案是并没有。然后小D（Dea_n）靠自己卓越的配色能力进入小米 RIGO 设计团队。
当小米 miui9 系统官网海报出来的时候，我把作品拿到 PS 一吸色，结果告诉我小D 一定参与了这个作品的配色设计。那为什么只有黄色的 CMYK 的色值是有 3 种颜色混合而成的。
难道仅靠着一点吸色就可以肯定 CMYK 配色方法的存在？CMYK 配色方法是不是只存在 UI 界面设计中？CMYK 配色方法可不可以增加它的扩展性？CMYK 配色方法可以作为一种配色方法帮助设计师完成色彩搭配的工作吗？带着这些疑问我继续研究配色。
我们来看一下「子弹短信」的应用图标，它的用色基本符合之前说的 CMYK 配色方法，当然是不包含子弹上的深色调。渐渐地我发现 CMYK 配色方法的路子越来越宽了。
Asher 是追波绘画写实图标的大神，他的写实作品配色饱和度高，光影通透到位，需要很强的手绘功底。在他的设计作品中除去暗色调和深色调的部分，其他配色基本都使用了 CMYK 配色的技巧。
我们都知道 iOS 系统和 Android 系统，在他们各自的系统规范中对配色也有相应的规范。我们提取两大系统规范中的配色进行吸色分析。
一顿猛吸之后，发现大厂系统规范的用色也基本符合 CMYK 配色方法的标准。
前段时间 IBM 重新定义了他们的设计语言，在产品配色中 Blye 60、Alert60、Alert40、Alert20、Alert50 等主要配色都符合 CMYK 配色的方法。
近期很多互联网公司进行了品牌改版，深亮色调到浅亮色调慢慢成为一种趋势。
新版的 Facebook LOGO 从深蓝色变为亮蓝色，字体则继续保持原样。其中 CMY 值进行适当减少。除此之外，图标部分也由原来的圆角正方形变为圆形，图标中的「f」从偏右的位置移到圆形的中间位置。
全球旅行者喜爱的民宿预订平台 Airbnb 的品牌 logo 主色也符合 CMYK 配色的方法。和 2019 潘通流行色珊瑚橘很接近。
微信 7.0 版本使用了经过调整的全新图标。图标除了原来绿色渐变的背板变浅外，两个标志性的对话气泡与背景板的比例也做了相应的调整。色彩的 CY 值减少了。调整后的新版图标除了空间感和符号感也更强外，整体变得「更轻」了。
在网易云音乐 6.0 版本中，对品牌 LOGO 再次进行了调整。新版网易云音乐图标最明显的变化为红色的主色调，其次为「留声机」和「音符」组合而成的图形部分。
红色较之前变得更加明亮，同时图标红色背景由之前的纯色改为轻微的红色渐变填充。新的红色着重考虑了用户长时间使用屏幕造成的视觉疲劳，采用比较「轻」的色彩可有效降低这种问题。其中颜色 CMY 三种色值都有减少。图形部分，新版图形缩小了中间交叉部分的面积，顶部向右弯曲的弧形变大。整体效果较之前更加清晰，特别是在更小的应用尺寸中，其展示的效果明显要比之前的好。
看到上面的描述是不是特别想知道当 CMYK 中的两个色值同时为 0 时，不同颜色的色域范围？带着这样的想法，把红橙黄绿青蓝紫中每类选一种颜色进行区域研究。打开 PS，在拾色器中截取不同颜色的色域范围如下：
上图白色区域就是在红色 C 值为 0、K值为 0 时的色域范围，范围还是很小的。
黄色的 CMYK 色域很奇怪，在色相 38-58 度的黄色纯度最高时，CMY 都有色值。也就是 PS 里面最纯的黄色也是由 CMY 复色调和而成的。这也是为什么之前黄色使用时，CMYK 色值是由三种颜色混合而成的。
上图白色区域就是在绿色 M 值为 0、K 值为 0 时的色域范围，范围开始慢慢变大，意味着绿色高饱和度的可使用颜色越来越多。
上图白色区域就是在绿色 M 值为 0、K 值为 0 时的色域范围，范围也开始慢慢变大，大体范围和绿色相当。
上图白色区域就是在蓝色 Y 值为 0、K 值为 0 时的色域范围，范围应该很大了。
上图白色区域就是在紫色 Y 值为 0、K 值为 0 时的色域范围，范围和蓝色的色域范围相当。
上图白色区域就是在洋红色 Y 值为 0、K 值为 0 时的色域范围，范围和蓝色、紫色的色域范围相当。
1. CIE
从理论上讲，可见光分布的色彩域就是 CIE 所表示的色域。在颜色感知的研究中，CIE 1931 XYZ 色彩空间（也叫做CIE 1931色彩空间）是其中一个采用数学方式来定义的色彩空间。从 CIE 图中能看出冷色的区域远远大于暖色的区域。其中黄色和红色的色域范围相对较少，完全符合 PS 拾色器里面的色域范围。
2. RGB
RGB 是计算机荧光屏显示颜色的色彩方式，它们是由 R、G、B 三种发光质通过加光混合产生的。RGB 色彩模式是一种加色模式，将红光、绿光和蓝光以不同的比例相加可以合成各种各样的色光。R、G、B 三种颜色各能产生 2 的 8 次幂，即 256 级不同等级亮度的颜色。256*256*256 即 16777216种颜色。RGB 色彩模式主要用在电脑显示器和电视上。RGB 色彩模式是绘图软件最常用的一种颜色模式。
3. CMYK
CMYK 由C（青）、M（品红）、Y（黄）、K（黑）四色高饱和度的油墨以不同角度的网屏叠印形成复杂的彩色图片。CMYK 色彩模式是一种颜料模式，它利用色料三原色混色原理，加上黑色油墨，形成各种各样的色彩。
这种模式属于相减混色模式，广泛运用于绘画和印刷领域。CMYK 的色域范围比 RGB 的色域范围要小，某些色彩无法用 CMYK 油墨印刷出来。当这些不能印刷出来的颜色出现时，在 PS 的「拾色器」对话框上会显示一个带感叹号的三角形警告标志，表示这些颜色超出 CMYK 的色域。即使设计了比较鲜艳的颜色，如果超出了 CMYK 印刷颜色的色域，计算机就会用一个接近它的较灰暗的颜色去顶替它。可见大部分 CMYK 印刷颜色的色域小于 RGB 屏幕颜色的色域。
我们来仔细研究下 CIE 色域范围，CMYK 当中的黄色色域值有一小段超过了 RGM 的色域值。这就说明黄色的更饱和的 CMYK 的原色和间色可能在 RGB 的范围之外。
其他的我们还有一个方法去验证。就是在 PS 里面新建颜色模式为 CMYK 的文件，打开拾色器界面，把颜色调到右上角改变色相值的 0-360度 的范围。色相在 38-58 度的黄色区域对话框上不会显示带感叹号的三角形警告标志，表示黄色区域的 CMYK 色域值是超过 RGB 的色域值。这就是为什么 iOS 系统规范中的黄色色值必须是三种颜色混合而成的。这时候特殊的颜色就需要特殊处理。
CMYK 配色法就是两种颜色的色值为 0%，但是黄色因为色域问题是由三色组成的（c值尽量小于10）。
色域集中在纯色系的范围，浊（灰）色系和暗色系除外。
界面的主色（纯色系为主）、图标设计、品牌色（纯色系为主）都可以使用 CMYK 配色法。
CMYK 配色法目前多适用于互联网产品，虽说在创意上要敢于创新，但在实际的工作中还是需要理性地根据公司品牌和产品定位，合理地进行色彩搭配。目前此方法没有更多的理论依据支撑，如有疑问希望多多交流。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
