明度 颜色 色相 前言这一次的北农商银行的项目，是在企业版手机银行 App 上加入企业 OA 的功能。所以在继承现有的设计规范的基础上，行方也希望产品能有一个品牌升级，提升用户体验。我们将从构建一套科学有效的颜色规范入手，本着北农商银行“人本、创新”的核心价值观，在设计中我们想要寻找新活力、新体验，所以在原有品牌色的基础上，引入了更多灵动鲜活的辅助色彩，体现北农商品牌“聚焦、友好、多元”的个性。我们希望北农商银行企业手机银行可以为更多的企业和行业赋能，探索视觉上与各行各业适配的无限可能，带来更多个性化新体验。相关干货：如何设计B端色彩体系？3个步骤帮你掌握起来！编者按：B端设计的色彩体系如何构建？阅读文章 > 一、颜色规范的原则1. 理性我们在选色时，尽可能避免个人设计偏好，减少配色的主观性，理性地有逻辑地选色2. 可扩展确定下来的基础色，可以拓展生成更多的颜色，以符合不同场景的使用需求3. 和谐颜色规范中的颜色互相搭配使用，是和谐的，整体的二、制定产品颜色规范的流程1. 以前制定产品颜色规范的流程是什么样的呢？“归纳产品特性，结合行业属性和公司的品牌文化-提取关键词-建立情绪版-选择色相-制定色系”。这样的制定流程的优势在于不脱离品牌特性，也符合用户的基本认知，但是缺少一点理论支撑和数据验证。所以，我细细研究了几家大厂的设计体系，他们对于色彩体系的建立都存在一定的共性，下面我将这套理论在此次北农商银行项目上实践一下，看看是否可以得到一套更符合用户审美爱好、更符合产品特性、更规范、更高效的色彩体系。2. 旧的设计规范我们先来大概浏览下旧的颜色规范：三、本次制定颜色规范的流程品牌色基础上确定主色-结合色环确定辅助色-采用 HSB 色彩模型调整辅助色-颜色校正确保感官明度一致-WCAG 标准验证颜色-调色板-设计落地1. 品牌标准色进化确定主色主色是产品使用频率最高、最核心的颜色，常用于主要按钮和文字、重点操作状态、高亮提醒、图形化等场景。一般产品的主色，首选是品牌色，可以更好地传达品牌价值；其次，可以通过产品的行业属性来确定主色，比如科技用蓝色、电商用红色、橙色、健康用绿色等。这里给大家分享一个非常棒的网站： http://brandcolors.net/ （包含全世界 500 强产品的品牌色，可以从这个网站寻找与我们产品业务相似的品牌色，获取灵感）北农商银行的品牌色是带有首都鲜明地域特色的红色，流露出浓郁的文化底蕴。首先，采用 HSB 色彩模型进行设计，该模型是通过直观地描述颜色的色相 H（Hue）、饱和度 S（Saturation）和明度 B（Brightness）的方式来表示颜色，更便于设计师在调整色彩时对于颜色有明确的心里预期。我们保持色相 H: 358 不变，降低了 S，从 89->75，提升了 B，从 78->90，让原先过于严肃的红色轻量化、轻盈一些，蕴含更多的活力和想象力，承载着北农商银行对未来新挑战新发展的态度。2. 结合色环配色理论，确定辅助色在一个科学有效的颜色规范里，往往包含至少两种色彩：主色+辅助色。辅助色是辅助主色来丰富产品的界面，以及作为一些操作结果，状态的反馈。功能色的使用需要符合用户的认知习惯，比如正常或成功用绿色，失败或错误用红色、等待或警告用橙色，失效用灰色、链接用蓝色等。用户不需要阅读文字信息，就能直观地了解设计的状态。本次颜色规范体系将制定一套丰富多元的辅助色，将用到色环工具。我们将以北农商银行主色红色（#E6393E）（H358，S75，B90）为起始点，饱和度 S 和明度 B 保持不变，色相 H 以 358 为起点，以 15 度为增量或减量标准，生成 24 色色环。在色环中，标记好主色红色，然后在红色的相近色（15 度）、类似色（30 度）、邻近色（60 度）、中差色（90 度）、对比色（120 度）和互补色（180 度）选取下面几个颜色。下面将根据实际界面使用情况，对上面色环得到的颜色进行删减，确定辅助色。为了保持北农商银行的基础品牌调性，选择了冷暖一致的类似色橙色，以保证整体色调统一和谐，感情特性一致，一定程度上也增加了色彩层次。并利用了中差色蓝紫色和对比色蓝色、绿色这些丰富多元的色相，使视觉冲击力强，活泼有趣，增加了色彩的平衡，并且满足各种场景下对色彩的需求。大家在确定色值的时候可以这样操作：在主色红色的色相 358 的基础上，分别增加或减少 120，得到两个对比色（蓝色和绿色）3. 确保辅助色和主色一致的明度和饱和度确定好辅助色之后，要对辅助色进行下一步的调整，这步非常简单，就是保证辅助色和主色拥有一致的明度和饱和度。4. 颜色校正，确保感官明度一致，对颜色进行微调在 HSB 模式中，即使饱和度和明度一样，但是不同色相的颜色的感官明度是不一样的，黄色、青色、洋红实际看起来比较浅，所以为了让整个色板看起来更和谐，画面不跳跃，我们要动手调整，校正辅助色。校准方式：在颜色上面叠加纯黑色图层，图层模式选择色相，通过无彩色系下的明度色值进行对比，就可以直观地看到无彩色视觉感官明度。细调过程中，相差大的颜色可以以“5”为差值调整饱和度或明度，最后在根据效果进行微调（校正原则：色相保持同类色即可。对颜色不满意，可以稍微调整色相，以实际效果为准）5. WCAG 标准验证颜色为了保证视障用户的使用，保证足够的对比度，我们的用色需要遵守 WCAG 用色标准。WCAG 用色标准中普通文本与背景对比度不低于 4.5:1，所以一般颜色规范中的中性色（#33333）等都需要满足于这个标准。那么对于产品主色，是不是也要达到这个标准呢？对主流 App 以及主色为红色的竞品 App 进行测试，发现范围在 3.2-4.2 的居多，所以这是个比较合适的对比值范围。下图是北农商银行 App 主色（#E6393E）的色彩对比度检测。更多WCAG 的知识：从3个方面，帮你从零开始掌握WCAG色彩对比度最近在学习大厂设计系统时，发现了 WCAG 标准。阅读文章 > 6. 调色板① 如何得到同色系配色？第一种方法是无色相变化的同色系，就是通过调节明度的方法，得到一系列同色系配色方案。将颜色从白到黑排列成黑白色卡，黑白色卡可以划分 10 级灰度，然后把纯色放入调好的 10 级灰度的黑白色卡中，得到一些同色系配色方案。第二种方法是有色相变化的同色系。浅色系中，色相往感官明度高的色相依次差值 2，饱和度依次减少 15，明度依次增加 5；深色系中，色相往感官明度低的色相依次差值 2，明度依次减少 15，饱和度依次增加 5。两种方法，我会更推荐第二种有色相变化的同色系，也称微色相变化，在色环上夹角小于 30 度的颜色变化，色相的跨度很小，所以配色上比较容易控制，可以很好地平衡画面的层次感和规律感 。7. 落地落地分为两个方面：设计方面和开发方面。① 设计方面此次项目实施中，发现了颜色在界面的实际应用中也应该注意一些问题。比如：主色为红色，如果将品牌色赋予按钮的时候，它会和界面中涉及破坏性操作的按钮发生冲突。因为一般情况下，红色在按钮上含有警告和禁止的含义。带有删除数据、取消操作、涉及破坏性的操作，都会用红色标识出来。所以将主色红色应用于按钮颜色，要考虑好异常情况，如果是双按钮形式（确定+取消）应该怎么定义按钮的颜色，才能让用户更好的区分。② 开发方面为了配合开发，我们定义了 Design Token。这样在以后的换肤中，只需要在底层对变量的值进行改变即可实现全局的更改，提高效率和拓展性。对于 UI 原子的命名规则为：大类字母(名称)/小类数字(样式编号)/样式说明_样式状态例如：a/1/主色_nor：#E6393Ea/2/1/辅助红_nor：#FF4E3A对于开发原子的命名可以根据各平台特性去定义，保持基础编号能快速识别对应即可（仅供参考）例如：sscolor_a_1_nor：#E6393Esscolor_a_2_1_nor：#FF4E3A四、设计规范·组件库搭建五、页面效果六、推荐工具Ant Design 色板工具地址： https://ant.design/docs/spec/colorsAcrodesign 色板工具地址： https://arco.design/palette/listarco.design*ColorPalette 色彩对比度检测： https://arco.design/palette/wcag结语在这次的颜色规范重新定义中，重新审视过去的设计，我们为了赶项目进度，为了自身便利，时常依靠主观情感和偏好去选择颜色，这将不利于产品的迭代和发展。将设计理论应用到项目中，让色彩体系科学化，真正让色彩去服务设计，让设计更高效，希望本文对您也有所帮助。如何构建科学有效的色彩系统？来看腾讯文档的实战案例！“色彩是我们感知世界的重要媒介，对于信息传达有着重要的作用，能使人们能够更有效的感知设计的意图和内涵，使传达更高效。阅读文章 > 腾讯实战！如何构建科学有效的色彩系统（应用篇）在《腾讯文档-构建科学有效的色彩系统》这篇文章中，我们阐述了腾讯文档如何升级了新的品牌色，为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和品牌认知，以及如何构建一个科学有效的调色板。阅读文章 > 欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/product-color-specification
色相 颜色 产品 从零做一款产品的时候，需要制定产品的主色。怎么制定呢？“归纳产品特性和理念-提取关键词-建立情绪版-选择色相-制定色系”，这是很多文章里面归纳出来的几步，使用的时候也有理论依据。但我想说点不一样的。在这个时代，产品五花八门，想用哪一类别的产品一搜一大把，在七麦数据搜索购物类的 APP 榜单，光第一页单榜就有 200 多个。我们模糊一下这张图，你会发现 APP 最终记忆点是色彩。换做在手机看也是一样的，打开你的 APP 列表，快速往下滑去找一个 APP，你会发现它们最终只剩下色彩——“我想找爱奇艺，它在我记忆中是绿色的，刚才快速滑过的红色黄色都不是”。当然，这只是拿来举例，通常你不需要这样去找一个APP。用这个例子只想强调APP主色的意义——它是区别于竞品的第一特征，是调性概括，是一种态度，甚至是你趁手的兵器。所以当你去确定产品主色的时候，有三种思路：随大众；反着来；搞特殊。随大众不同的行业发展至今，已经自带色相了。比如电商购物是红黄色、医疗健康是蓝绿色、商务是蓝色…如果我们每次都用产品或者行业特性去推导色相，出来的大多数都是第一种思路。反着来使用和竞品色相相差大于 90 度（中差色、对比色、互补色）的，差别较大的就是反着来。这是逆向思维，通过差异较大的色相能让你在一堆颜色同质化的竞品中跳出来。搞特殊抖音和 keep 是我心中搞特殊的 top，既不使用行业相同的色相，也不使用相反的色相，而是双色相或双色相叠加。用我做的小易 APP 来做例子说一下制定色系的过程吧基于行业与场景确认色相色相偏移WCAG 标准验证颜色色系拓展基于行业与场景确认色相小易是一款助力销售的 CRM 产品，主打销售智能化。取色就要看你立足点是“数据智能”还是“销售”了。与数据智能相关的绕不开蓝绿色，与销售系统相关的绕不开橙色。这个产品是内部定制化的，不存在有竞品的情况，因此随大众更容易取得方案的通过。为免出现“这个颜色一点都不科技和智能”的质疑和返工，我非常科学（识相）地选择了蓝色作为主要色相。色相偏移用 HSB 参数来看，正蓝色的 H 值（色相）是 240。引用优设大课堂态爷的一句话是：要想颜色好看，色相别太正。那么正蓝色就要偏移：往冷色偏移或者往暖色偏移。这里加入一个空间的概念：假设产品是一个空间，里面主打智能和数据，我设定了大环境偏冷光，所以里面的物体会受冷光的影响。在冷光环境下，蓝色的色相受环境影响，会往冷色偏移。色相偏移 15 度是同类色，偏移 45 度是近似色。我在两者之间取了中间值，约 25 度。对市面上的产品取色进行研究的时候，会发现它们的色值一般在拾色器九宫格的右上格，所以 S 值（饱和度）的取值范围大致在 77%-100%之间，我取了中间偏下的值 89%。B 值（明度）一般为 100%，除了黄绿色相本身明度偏高，则会适当降低明度。WCAG 标准验证颜色WCAG 是网页无障碍指南其中关于颜色的使用标准，简单来说就是色彩要在页面中达到一定的对比度，才能让人看清。WCAG 用色标准中普通文本与背景对比度不低于 4.5：1，那么对于高亮文字颜色（通常是产品主色）是不是也需要达到这个标准呢。我用几个 APP 进行了测试，下列 APP 的对比度在白色页面中范围是 2.3-4.5。我估计原因有二，一是饱和度太高有点太艳了，二是现在很多 APP 都有暗夜模式，观察这张图上的 APP 颜色情况，可以发现一个颜色在白色背景对比度越低，在黑色背景对比度就越高。且高亮文字使用的频次相比文本文字少，多数伴随色块按钮使用，所以 3-4 是较合适的对比值范围。有个快速计算对比度的网页很好用，输入色值就可以得出结果。contrast ratio：https://contrast-ratio.com/#%23FF784A-on-white还有个网站会更直观，输入色值后下面还有网页例子预览效果。color review：https://color.review我选择的蓝色对比值在白色背景是 3.9，黑色背景是 5.2，在正常范围内。其实小易 APP 大概率不会有暗夜模式，因为需要投入更多的开发资源，浅色模式也不是不能用。在这个考量下，可以抛开黑色背景不考虑，但是话又说回来，做好准备总是没错的。色系拓展色系拓展需要拓展两类：中性色和辅助色。中性色相对来说比较简单，所以放在前面先讲。前面我已经选定主色是#1b7aff，打开拾色器，将明度调为 10%，就可以得到一个深色偏蓝的颜色。用这个作为界面中性色最深的颜色，叠加白色（白色的透明度以 10%作为基础依次递减），得出中性色的色板。我看过很多写得不错的文章，文末会放相关参考的链接。下面的四种选色思路，是根据他们的归纳为基础，加入一点其它的角度来进行辅助色系的选定。 看到这里你应该也发现规律了：选色离不开色彩的理论知识。在理论的基础上不断尝试搭配，组合出不一样的色板。而且要基于目的来选择搭配，跟画画一样。如果想要画面和谐，就不要出现多组互补色。画面中有一组互补色时，要取两者中间的颜色来劝架，以达到和谐的目的。如果希望画面冲击力强，则相反。基于这样的色彩理论，可以让我们不出错且有依据地搭配出界面的色系。我的选色我希望颜色能有更细腻的色相变化，所以我把色环按照 10 度作为基准细化。选择互补辅助色的时候，我没有选正互补色，偏移了 10 度。从黄色到绿色的亮度都很高，所以我的选色更多偏右边。以选取的这六种颜色作为小易的基础色，微调饱和度稍微降低色彩的黑白灰差值。参考文章：如何科学地建立色彩体系？我总结了这5个方面！最近我在想一个问题：假如设计师负责一款全新的产品，不受已有规范的束缚，我们该如何定义产品的色彩体系呢？阅读文章 > 如何抛弃惯性思维，重新定义一款产品的主色？不知道大家有没有听过这么一个故事：某家餐厅销量一直不太好，老板究其原因也没有查明白到底是为啥，明明选址在闹市区，价格也很实惠，就是卖不出去；后来老板请了个 “大师” 帮忙一探究竟，大师说你家盘子颜色不行，换成橙色保准牛X；老板立马认购了一批橙色盘子，从那以后这家餐厅火爆了，王境泽都觉着他阅读文章 > 授权 W3G 文档，网页无障碍指南（WCAG2.1）翻译版优设态爷手绘提高班关于色彩的内容（课程链接）欢迎关注作者微信公众号：「牙线y2x」本篇来源：优设网原文地址：https://www.uisdc.com/theory-of-color
自己的 色相 正片 大家好~我是自学插画的西城,很多人问我怎么学习的,我现在简单说一下我的方法:早上用一小时欣赏采集优秀插画,有自己的素材库,记得分类业余时间会去Youtube看绘画教程或者快速绘制视频,主要是看操作、步骤,无需理解太深业余时间画画,基础很重要,新人的话建议一定要学一些素描基础“三大面五大调”、”透视关系”、”色彩基础搭配”,理解就好不需要素描画的太厉害,也无需为此报班,网上很多免费教程比如B站,如果你有时间和财力可以报班(人体基础还是要报班的).绘画过程,别老想着做原创!负责任的说,世界上真正原创的东西没有几个,绘画也好,做设计也好,都是要有借鉴的,不管是借鉴别人的画也好,借鉴生活中的事物也罢,一定要有借鉴!!!借鉴!(不是抄袭)前期先临摹,我第一期文章视频有说过临摹的方法,不要整张画一起临摹下来,只临摹一个点就行,比如“树、石头、海、云”,后期熟悉了一些风格后,可以开始创作自己的画,多找参考,进行融合~,这种融合的创作是属于你自己的作品,可以发出来的,其实很多好的作品都是各种风格的融会贯通最后就是喜欢并坚持今天给大家期待已久的投影文章有一些小技巧也是我自己学到的在此分享给大家为了做好这一期文章,特地自己随手画了一张画来做案例(不要吐槽哈)接下来开始说加投影的三种方式1同色投影同色投影的意思是:在一个物体上加投影,投影颜色可以遵循物体本身颜色,然后进行亮度和饱和度的调整这么说有点绕,简单来说就是,吸取物体本身颜色进行调整来做投影比如我要给房子加上地面的投影,阳光设定在右上方,所以投影的方向跟着光的方向一致:这时候投影颜色要遵循地面本来的颜色,吸取地面颜色:然后进行斜向下调(调的度数自行选择),当然加上色相上下微调也是可以的:颜色选好后,填充:因为投影是从实到虚的,接近房子的比较深,距离越远越模糊,所以要进行投影虚化调整,我们加个蒙版,然后按G(选择渐变工具)在蒙版上拉一下黑白渐变(黑色隐藏,白色显示),拉蒙版渐变可以多次尝试,直到自己满意:除了在蒙版上拉渐变的方式,还可以用系统自带笔刷“柔边圆”,降低笔刷透明度10%(自定义)用笔刷在蒙版上轻轻擦除,黑色隐藏,白色显示,可以通过按X来切换黑白,蒙版还是很常用的以上是第一种最常用的加投影方式~可以根据这个方式对房子其他地方添加比较细节的投影2正片叠底接下来我要说的也是大家可能都比较熟悉的图层样式“正片叠底”该方式加投影是比较简单暴力的,适用于比较复杂的物体统一加投影正片叠底是一种混合模式,解释起来比较复杂,大家简单记住,它能够带来变暗的效果,并且带有该色相的暗色回到房子加投影步骤:我想在屋檐下加投影,这里比较复杂,有窗户和墙壁,这时用前面那种同色系方法加投影就比较麻烦了,那么正片叠底就可以用上:将要加投影的图层设置为正片叠底吸取屋檐的紫红色,因为它的投影会影响到下面,所以我设定它会带有环境色然后进行画笔涂抹,图层降低透明的进行调节:OK第二种加投影方法完成3 曲线/色相+蒙版的方式加投影好了,重头戏来了我们要通过调节曲线或者色相然后配合蒙版,来添加投影和高光,估计你想不到~首先,先复制一层你要加投影的全部画面,(这里我复制整个房子和地面)然后合并按快捷键“ctrl(⌘)+M”调出图层曲线在曲线上点上两点(表示要调节暗部和亮部),然后下拉最下面的点,具体根据自己的需要进行调节,往下是暗往上是亮然后给整个图层加蒙版,在蒙版上全部填充黑色来隐藏用画笔工具,切换白色,在蒙版上画出你需要加投影的地方即可同理,调节色相调节器也是可以的,还可以改变色相和饱和度按”ctrlt+U”调出色相调节器让我们举一反三,同理可以用作高光的绘制灵活运用,再同理:按“ctrlt+L”调出色阶也是可以调节的这是第三种方法~总结这个方法,最终都是需要蒙版来配合,当然这个方法也有软肋,就是不好改动,它是基于原图的基础上进行调节的,如果原图有细节要改动,就比较麻烦不过在绘画的过程中,方法技巧是需要相互配合使用的,并不是只能用一种,也并不是所有都需要用,看自己的需求来定,一定要灵活运用今天教的只是其中的三种方法,其实加投影的方式还有很多,下次我会特别介绍噪点绘制投影,敬请期待~希望这篇文章对大家有帮助哦~原文地址：西城解忧杂货店（公众号）作者：西城
明度 色彩 色相 可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。之前向大家介绍过 HSB 色彩模式。HSB 色彩模式按色相、饱和度、明度三个属性来表述颜色并进行量化，以更贴近人类感官直觉的方式来描述色彩。熟悉 HSB 色彩模式，就可以通过个人对色彩的感知与把握选取一个颜色，再通过 HSB 模式的调色板实现快速选色和配色。HSB 色彩模式让我们可以更准确地选取自己想要的颜色，也提供了相应的配色技巧。但是如果我们还不知道自己想要什么样的颜色，或者不确定什么样的颜色最贴合主题呢？今天就为大家介绍一种专业实用的色彩体系——PCCS（日本色彩研究所配色体系），让大家以更便捷直观的方式来理解颜色的分类及连续变化，快速准确找到合适的色彩。学会HSB色彩模式，让配色有理有据！念起作为一名 UI 设计师，不免每天都会和色彩打交道，但有时总会苦恼于色感把握不准，让我们配的色彩，总是“不对味儿”。阅读文章 > 什么是 PCCS（日本色彩研究所配色体系）？PCCS，全称 Practical Color-ordinate System，是日本色彩研究所于 1964 年发布的颜色体系，是目前全世界最常用的色彩体系之一，在平面、服装、建筑、室内等各个设计领域都有广泛运用。“Practical Color Coordinate System”直译过来就是“实用色标体系”，从”实用”2 个字就可以看出 PCCS 侧重于实践运用——色彩要如何理解才更方便，如何搭配才更和谐更好用。PCCS 将色彩空间分成了 24 个色相、17 个明度色阶和 9 个纯度等级来进行体系构建。其最大的特点是将色彩的三个属性，综合成色相与色调两种概念来说明全部的色彩变化。下面逐一为大家介绍 PCCS 中不同概念的含义。1. 24 色相环PCCS 色相环有 24 个色相，是以心理学四基色为基底延展形成一个色相圈。每种色相前标示一个数字。由于色彩间隔注重等感觉差，因此 PCCS 色相环又被称为等差色相环。四种心理原色为“红（2：R）”、“黄（8：Y）”、“绿（12：G）”、“蓝（18：B）”，在圆周上顺时针排列。每种心理补色放在 4 色的对面位置，构成 8 个色相，再对 4 色进行插值，使它们间隔相，构成 12 色，再进一步细分，形成 24 色。2. 17 级明度阶梯PCCS 中明度设置白色为 9.5，黑色为 1.5，它们之间每 0.5 分为一级，共 17 级。3. 10 级纯度阶梯PCCS 中每个色相的代表色（鲜艳的色调）都设置为相同的饱和度（9s），同一色相从饱和色到无彩色的纯度变化被均匀划分，使其以相等的间隔被感知。无彩色为 0s，纯色为 10s，将色彩空间一共分为 10 级。但是 10s 的饱和度是用色卡无法再现的颜色，所以色卡中的纯色是 9s。以上就是 PCCS 系统中的色彩三属性。需要注意的一点是，各色相的纯色都有作为色彩本身各自的明度关系。比如，黄色的色相明度最高，其次是两侧的黄绿色与橙色，依次顺沿，离黄色越远明度越低，直到紫蓝色时明度最暗。这是色彩的自然连锁。在实际观察中，色彩给我们的直观感受与纯粹的颜色是不同的。比如暗的黄色与明亮的紫色在明度上没有差异，这种明度与纯度之间复杂的变化关系往往令我们难以把握色彩的变化。PCCS 则提出了“色调（Tone）”来表示明度与纯度的复合概念。用“色相”和“色调”这两个属性形成二维体系，来表示色彩的性格，便于色彩的各种搭配。4. 12 类色调(Tone)PCCS 将色彩空间分成了 24 个色相、17 个明度阶梯和 9 个纯度阶梯。然后再将整个色彩群的外观色划分为 12 个基本色调倾向。每个色调都有对应的形容词及缩写代称，如纯度最高的色调命名为 Vivid，意思是鲜艳夺目的，缩写为 V。如何用 PCCS 解决“配色没感觉”的问题？通过上面的内容我们了解到 PCCS 有以下特点：1. 用色调代替了明度和纯度的复合概念，相比之前的三维体系，色相和色调形成的二维体系理解记忆更加方便。2. 色调可以用日常语言来形容，将其与色彩性格结合起来，可针对不同主题的设计进行快速搭配，让颜色与适合场景向结合。有了以上的认知，我们之后在积累色彩搭配经验时，就能将优秀配色更清楚的纳入自己可以理解的色彩体系之内。而在遇到某一设计主题时，也可以根据主题延展出的情感氛围，找到对应的色调。这样慢慢积累，找到合适的配色就不再是难题了。以一组 Banner 配色学习为例：通过分析我们可以得出不同主题风格所对应的色调，将其总结归纳，之后遇到相同风格的主题时，就可以更好的把握选色及色彩搭配。以上就是 PCCS 色彩体系帮助我们实现快速准确选色的全部内容，喜欢的小伙伴记得点赞收藏哦~之后练习创作中多多思考运用，配色能力肯定会大幅提升！更多色彩搭配技巧：https://www.uisdc.com/zt/color-matching本篇来源：优设网原文地址：https://www.uisdc.com/practical-color-ordinate-system
色相 明度 色彩 赶在年前将这篇关于“配色”的设计解析整理了出来，分享给大家，希望对大家有帮助。在平时的设计创作中，色彩搭配是很基础且重要的。那如何才能让自己成为了一个会搭配的设计师呢？除了日常的审美和创作积累，其实掌握好色彩基础和搭配原理才是让自己设计配色提升的第一步。下面就带大家由浅入深全面了解一下吧！本文主要围绕四个方面进行讲解：色彩的基础知识1. 色彩模式目前实际工作中比较常见的的几种色彩模式有如下几种：CMYK、RGB、HSB、HSL。CMYK：印刷四色模式是彩色印刷时采用的一种套色模式，利用色料的三原色混色原理，加上黑色油墨，共计四种颜色混合叠加，形成所谓“全彩印刷”。主要应用于平面印刷。RGB：RGB 色彩模式（也翻译为“红绿蓝”）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。HSB 又称 HSV，表示一种颜色模式：在 HSB 模式中，H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度 HSB 模式对应的媒介是人眼。HSB 模式中 S 和 B 呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽。HSL 是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。是运用最广的颜色系统之一。2. 色值实际软件设计应用中通用的两种色值表述法：HEX 表示法（#xxxxxx）和 RGB（X，X，X）表示法：根据不同的色彩模式，HSB、HSL 也使用和 RGB 同样的表示方法，如下图选择了一个颜色，用不同色值和模式的下表达色值书写样式。HEX 表示法(#XXXXXX)又称十六进制法，十六进制颜色代码保存 0 到 9 之间的数字值以及从 A 到 F 的字母值表示 10-15 数字，十六进制颜色代码是 6 位颜色代码，这串 6 位数的代码，实际上使用三组 2 位十六进制数表示了 RGB 的色值。RGB 表示红、绿、蓝三个通道的颜色，三个通道颜色的参数范围值为“0-255”。更深入的知识可网上查阅相关资料，文章不做详细赘述。HSB 模式和 HSL 模式是在 RGB 色彩模式的基础上衍生出来的。HSB 是 H（Hue：色相）、S（Saturation：饱和度）、B（Brightness：明度），参数范围值分别是“0-360”、“0-100”、“0-100”。HSL 是（Hue：色相）、S（Saturation：饱和度）、Lightness（亮度），参数范围值分别是“0-360”、“0-100”、“0-100”。Hue（色相）的取值范围是色环上 0-360 的圆心角度。但 L（Lightness：亮度）与 B（Brightness：明度）分别被认为是「颜色中白色的量」和「颜色中光线的量」。如下图：这两种模式更适合软件开发应用，所以设计师一般使用的都是 HSB 模式设计视觉图，HSL 更适用于技术开发人员。所以设计师需要在同步设计页面时知会技术人员。以免让颜色有误差。配色工具与标准1. 色相环色相环是辅助设计配色的一大利器，一般我们选择 24 色相环作为颜色标准。色相环的概念是基于 HSB 的色彩模式下就行分析讲解；如下图我们以 H（色相）为 350 度为起点，以 15 度递增创立 24 色相环，（保持 S 饱和度：80，B 明度 100 参数不变）根据色相环角度范围，可以将色相环的色彩分为：同色相下颜色梯度变化(H 为 0，改变 S 饱和度和 B 明度)，同类色，邻近色，类似色，中差色，对比色，互补色，映射属性分暖色、冷色、中性色「同色相色」：是指 H（色相）一致，通过改变 S（饱和度）与 B（明度）变化产生的颜色。「同类色」：指色相性质相同，但色度有深浅之分。（是色相环中 15夹角内的颜色）「类似色」：也就是相似色。在色环上 90内相邻接的色统称为类似色，例如红－红橙－橙、黄－黄绿－绿、青－青紫－紫等均为类似色。类似色由于色相对比不强。「邻近色」：色相环中相距 60 度，或者相隔三个位置以内的两色，为邻近色关系，属于对比效果的色组。色相彼此近似，冷暖性质一致，色调统一和谐、感情特性一致。如：红色与黄橙色、蓝色与黄绿色等。「中差色」：色相环中 90 度的配色，在视觉上是有很大的配色张力效果，是非常个性化的配色方式。在 24 色相上作任选一色；与此色相邻之色为邻色；「对比色」：是指色相环上相距 120 度到 180 度之间的两种颜色。「互补色」：色相环中成 180角的两种颜色。按照色彩的映射关系分为暖色、中性色、冷色，以上图色相环饱和度和明度参数为例，通过 5递增展示。2. 色立体除了色相上的变化，颜色还有明度和纯度上的变化，对于颜色的影响也至关重要。这三个词汇的概念如下：色相 Hue：也称色调，是指色彩的相貌；纯度 Saturation：也称饱和度，是指色彩的鲜艳程度；明度 Brightness：也称亮度，是指颜色的明暗程度；色相、纯度、明度三者构成了色立体的概念，让色相环由二维变成了三维的概念。3. 拾色器拾色器是设计软件经常会使用的调色工具，我们建立一个基于 S（饱和度）与 B（明度）的平面坐标系，如下图：将拾色器纵轴方向三等分可以将色彩分为高中低三大调，其中高调再细分为“白色调、粉色调、明色调、鲜色调”四色调；中调再细分为“灰色调、深色调”两色调；低调为“黑色调”。如下图：3. 色彩对比度我们参照网页无障碍设计规范，可以先了解关于设计色彩对比度的一些概念：如下：什么是对比度 ？对比度是两种颜色之间的亮度或颜色差异。对比度的比值越低，它们之间的差异越小。为了确保尽可能多的人可以使用您的产品，对比度需要符合 WCAG 的 AA 级 与 AAA 级 标准。WCAG 的 AA 级 要求小文本与背景的对比度至少为 4.5：1，大文本与背景的对比度至少为 3：1。WCAG 的 AAA 级 要求小文本与背景的对比度至少为 7：1，大文本与背景的对比度为 4.5：1。小文本指字号在 19px 以下的粗体文本类型，或者是字号在 24px 以下的常规文本类型。大文本指字号至少是 19px 以上，字重为粗体的文本类型，或者字号是 24px 以上的常规体文本。下方截图是字节设计体系中的关于对比度设计的应用工具展示，你可以随机选择或者互调背景和文字色，进行对比度检测，实时查看结果。参考网址： https://arco.design/palette/wcag不合格案例：合格案例：配色的设计应用1. 色彩分类和选择设计应用中选取是非常重要的，那根据设计应用，色彩主要可以分为主色、辅助色、中性色等。主色主色一般应用产品的品牌色，通过颜色提升用户对品牌的认识，传递价值。关于主色的选取，我们可以先根据一组产品截图进行了解，通过获取图中产品的主色再结合颜色在拾色器上的分布理解。通过上述案例产品主色调在拾色器上的分布，会发现大多数产品主色都会在右上方色域进行选择。根据产品的需要传递的品牌特征，确认相关颜色色相之后，调整色彩的饱和度和明度，避免使用过低或过高的饱和度和明度，以保证用户在识别颜色会比较舒服、适宜，同时还能吸引他们的注意力。辅助色色相环中的颜色角度相差越大，颜色的对比越强，视觉差异也越大。所以用于搭配的辅助色应满足以下两个条件：有区分：尽量避免所选辅助色在视觉上与品牌色差距不大，导致用户对品牌色产品误解；不突兀：根据色彩原理来说，互补色是反差最大的颜色，但可能会有些突兀。所以我们选择互补色的邻近色，对比色作为辅助色。辅助色可以在色相环的规则标准下根据实际特定的功能场景来选择应用。如下图通过 HSB 模式，色值（350，80，100）为基色创立色相环，做辅助色的选取分析（24 色相环选基色-6 色相环选择辅助色-校正辅助色的步骤），仅作参考。如下左图支付宝的理财模块，顶部背景图使用品牌基色，金刚区图标选择同类色，保持视觉上的统一。右图汽车之家底部有两个 cta 按钮，但是使用基色蓝突出主要功能“获取底价”，旁边的按钮使用类似色进行弱化。再比如下图产品例子：左图马蜂窝的酒店订购页面，使用基色、对比色、同类色，基色和同类色用于主要功能按钮，对比色用于提示入住情况。右图 soul 底部按钮使用多种邻近色、对比色表达不同的功能。中性色中性色包含一系列灰黑色，用于页面中的内容文字、分割线、边框，相关背景，中性色的定义还需要考虑深色背景以及浅色背景的差异。如下图所示：页面设计中可以通过在中性色增加色相，正常添加蓝色色相，HSB 色彩模式中，在曲线的轨迹中选择对应的色值，得出不同层级的高级灰。腾讯-TDesign 设计体系中提及了带有品牌色倾向的中性色是如何计算的相关信息，它通过使用了 RGB 混色模型，经过多次的尝试最终确定了品牌色的混合比例为 20%，运用规则同普通中性色一致。大厂出品！腾讯开源企业级设计体系 TDesignTDesign 是来自腾讯内部近 300 名设计师与开发者共同打造，经由 500+ 项目使用、验证和锤炼过的企业级设计体系， 秉承包容、多元、进化、连接的价值观，TDesign 期望与用户、行业及合作伙伴等一起打造具有竞争力的产品体验。阅读文章 > 2. 大厂色彩体系阿里体系关于色彩模块主要介绍了三大部分：a. 色彩模型，b. 系统级色彩体系（基础色板，中性色板、数据可视化色板，色板生成工具，代码中使用色板），c. 产品级色彩体系（品牌色应用，功能色，中性色）。网址： https://ant.design/docs/spec/colors-cn字节体系关于色彩模块主要介绍了两大部分：a. 色彩体系（基础色板，添加色板，色板导出），b. 色彩对比度，c. 色彩探索（待开发）。网址： https://arco.design/palette/list字节跳动全新发布！ArcoDesign 设计系统正式开源https://v.youku.com/v_show/id_XNTgxNjA2OTQwNA==.html?spm=a2hcb.profile.app.5~5!2~5~5!3~5!2~5~5~AArcoDesign 是什么？阅读文章 > 腾讯体系关于色彩模块主要介绍了两大部分：a. TDesign 设计体系（主题色、功能色、中性色、带有品牌色倾向的中性色，扩展色），b. 应用指南（UI 设计指南，数据可视化指南）。网址： https://tdesign.tencent.com/design/color#header-12配色案例解析1. 渐变知识分析渐变色从属性上看，可以按照方向，长短，呈现不同的表现形式，在保证属性不变，改变渐变的长度，渐变越长，色彩过度越平缓，渐变越短，色彩过度越紧凑，如下图：渐变色从样式上看，可以按照线性，径向，角度、对称，如下图：按照色彩色相数量的不同，可以分为：中性色渐变，单色渐变，多色渐变，如下图：按照色彩的明度的和饱和度不同，可以分为高明度、低明度；高饱和度、低饱和度，如下图：2. 渐变配色案例这里案例介绍通过一张海报设计，使用不同的渐变和配色方式进行创作，设计视觉展示如下：渐变方式：同色渐变渐变方式：多色渐变+色相环六色分类3. 实战页面案例如下页面案例通过色相环选择不同的基色，通过色调六大分类再结合渐变类型进行配色的效果展示。渐变方式+弥散渐变（基色/同类色）渐变方式+弥散渐变（基色/类似色）渐变方式+弥散渐变（基色/邻近色）渐变方式+弥散渐变（基色/中差色）渐变方式+弥散渐变（基色/对比色）渐变方式+弥散渐变（基色/互补色）总结关于配色技巧的分享总结到此就结束了，感谢大家的阅览，希望能帮助大家对配色有更全面的认识！UI 设计视觉指南-配色篇就算完结了，咱们下篇文章见！想做好UI配色？只需要这三步！一套产品色彩需要有哪几种色彩：品牌色+提醒类型颜色（成功、错误、警告）+中性黑白灰颜色（各种字体、背景、分割线颜色等）那么用到的色彩类型： 品牌色 品牌黑 内容底色 全局底色 分割底色 图标色 文字链接可点击颜色 提示信息 错误提示 错误提升阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/3-color-matching-steps
飞翔的企鹅
表哥
在路上
