色彩 灵感 作品 大家好，这里适合你们聊设计的花生~配色想必是很多新手设计师和插画师都觉得比较难的一部分，的确，学习配色要靠长期积累，我们不仅要掌握色彩原理知识，还要多浏览学习优秀的配色，然后运用到实际的设计绘画的过程中，总结出自己的配色技巧和经验。今天就为大家推荐 5 个非常实用的色彩灵感网站，可以帮助我们更快的找到符合自己要求的配色方案，并提升对色彩的感知力和掌控力。往期回顾：配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。阅读文章 > 一、Adobe Color网站直达： https://color.adobe.com/zh/create/color-wheel （需要魔法）Adobe Color 是 Adobe 公司开发的专业色彩灵感网站。如果只看它的首页，会觉得它只能用来寻找和谐配色方案，但它有两项经常被忽略的色彩功能：探索和趋势。Adobe Color 的“探索”功能可以让设计师按关键词搜索配色方案。比如在搜索框内输入 Cyberpunk，网站就会推荐很多相关的图像，并自动生成其的配色方案。配色方案可以下载为 JPG，右上角还有筛选器，可以按色卡、艺术作品、摄影照片来筛选内容。从绘画的角度来说，这种方式能帮助我们快速找到指定风格或场景的参考图片及配色方案，比自己先找参考图片、再提取照片配色更高效。“趋势”则是从 Behance 和 Adobe Stock 中抓取最新的图像内容，提取其配色方案，并按时尚、UI、建筑、插画、风景、美食等进行分类呈现。如果你觉得的自己在色彩方面的感知力较弱，不如多到这里逛逛，既能迅速了解不同行业最新的色彩趋势，也可以获取高质量的配色灵感。二、Color leap网站直达： https://colorleap.app/homeColor Leap 是一个记录不同年代作品色彩的网站，包含公元前 2000 年至 20 世纪 60 年代间的 12 个年代。点击主页的年代标签，进入后可以找到多套符合时代特色的配色方案和代表作品。多了解不同年代的配色风格，可以加深我们对色彩含义的了解，提升对不同配色风格的掌控能力。色彩时光机！可查询每个时代流行配色组合的 Color Leap每个时代都有代表的文化和呈现样貌，如果对于一些绘画或摄影作品有研究，可能也会发现不同年代会使用的颜色也大不相同，当然这牵涉到许多层面，就不在本文深入探讨了。阅读文章 > 三、Google Palette Art网站直达： https://artsexperiments.withgoogle.com/artpalette/ （需要魔法）Google Arts and Culture 和世界各地超 2000 间博物馆达成合作，拍摄它们馆内的艺术作品并上传网上用户欣赏。又在此基础上推出 Google Palette Art，利用电脑视觉演算技术分析并标记了这些作品的配色，让用户可以通过色卡来搜索艺术作品，在 Google Palette Art 上可以随机生成一组 5 种颜色的方案，然后得到所有类似配色的作品推荐。颜色是可以修改的，每修改一次推荐的艺术作品也会随之改变。我们还可以自己上传图片，网站会提取其中的 5 种颜色并推荐类似的配色作品。在 Google Palette Art 内我们不仅可以搜索配色灵感，提升艺术审美，还能了解作品背后的艺术知识。将鼠标悬停在作品卡片上，会有一个「更多详情」的选项，点击后会跳转到作品的介绍页，里面有作者信息。点击作者名称，就能跳转到艺术家主页，里面有艺术家的生平介绍、代表作品和作品故事。四、Designspiration网站直达： https://www.designspiration.com/Designspiration 是一个类似 Pinterest 设计灵感网站，但它可以通过色彩搜索站内的设计灵感。Designspiration 会自动为每个作品生成一组色卡，点击色轮可以查所有使用类似配色的作品，包含插画、平面设计、摄影照片、建筑等多个方面。色卡的颜色可以独立调整，我们也可上传自己喜欢的作品，用这种功能查询所有类似配色的灵感。spiration 在主页搜索栏右侧有一个调色盘小图标，点开后是一个调色板。我们可以在上面选择至多 5 种颜色，然后搜索以这种配色为主的所有灵感。这个网站非常适合刚开始学习设计或插画的小伙伴，如果在配色阶段被卡住了，可以先选一两种颜色进行搜索，过程中根据推荐的作品随时调整颜色，直到找到符合自己需求的配色。五、Palettemaker网址直达： https://palettemaker.com/Palettemaker 是一个免费的在线配色预览网站，它可以随机生成配色方案，或者根据一种配色方案生成 100+ 配色灵感，以及将配色实时应用到不同的设计模板上，模板包括 UI 界面、插画、排版、图案等。如果你突然有一个配色灵感，可以将其复制到 Palettemaker 当中，看看实际应用的效果如何。因为配色效果是实时呈现的，我们可以根据感觉一点点修改直至自己满意为止，然后在这个过程中总结色彩搭配的经验和技巧，积累多了对色彩掌握能力自然会有提升。如果是想迅速获得配色灵感，就可以使用它的 “Generator”功能，选一种颜色让 Palettemaker 推荐灵感，然后从中挑选自己喜欢的。以上就是本期的色彩灵感网站推荐，非常适合设计师和插画师日常浏览使用。喜欢本期推荐的话请大家多多点赞收藏进行支持，我会更有动力为大家推荐干货知识。有关于本文或者设计的问题可以在评论区提出 ，我会第一时间回复~推荐阅读:看电影学审美！5款超实用的电影拉片资源大家好，这里是和你们聊设计的花生~之前为大家推荐了 8 位 B 站上值得关注的电影拉片 UP 主，可以帮助大家了解电影拉片的基本知识。阅读文章 > 2023年，让这20款AI工具帮你更高效地完成工作~2023年，让这20款AI工具帮你更高效的完成工作~大家好，这里是和你们聊设计的花生~2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/6-top-inspiration-resource
色彩 颜色 模型 色彩作为设计师的基本功，如何平衡产品的色彩搭配是每位设计师的必修课。如今市面上有种类繁多的配色工具可以一键生成配色方案，也有成套色卡作为色板参考，但是当面对高度自由且需求多变的设计状况时，如果缺少对色彩规范的系统理解，仅跟随设计师自身喜好进行配色，往往会导致产品杂乱不堪，没有章法。本文结合我自身的工作和学习经验，从理论基础到色彩系统搭建带大家由浅入深学习下 B 端产品中的色彩体系。更多色彩建立干货：如何4步建立系统级色彩体系？来看京东高手的方法！色彩体系的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。阅读文章 > 一、色彩理论基础色彩理论基础是搭建色彩系统的基石，接下来我将从色彩本质开始，为大家介绍设计师需要掌握的几种常见色彩模型。1. 色彩的本质在小学物理课上我们都学过，色彩是由物体自身发光或反射出的光映射在人眼后所感知的，而光的本质是一种电磁波。自然界中存在不同频率的电磁波，短频的如 AM 收音机、电视信号，长频的如 X 光、伽马射线，我们所熟知的可见光则是电磁波中人眼所能接受波长约为 380~780nm，也就是从紫色到红色范围的这段色彩。资料来源：网络反射到人眼中的光，除了光本身的颜色，还会收到物质特性的影响。白色物体在被黄光照射时，反射到人眼中看起来就是黄色的，但蓝色物体在被黄光照射时会呈现黑色，原理是黄色作为蓝色的反色调，黄光本身不包含任何蓝光，因而被蓝色物体完全吸收时并无法反射出其他颜色，导致人眼看起来就是黑色。资料来源：巫师后期-什么是颜色此外，我们最终感受到的颜色除了光和物质特性外，还会收到周围环境、时间和历史经验的影响。下面这张网络图很多人都见过，同一张图片在不同人眼中会识别为不同的颜色。图片来源：巫师后期-什么是颜色综上所述，色彩的本质是一种复合的物理现象，是人眼感知物体表面反射光的结果。2. 色温：描述发光体的冷暖关系通过理解色彩本质可以发现，单纯凭借人的色彩感知来描述颜色具有很强的主观性，要如何保证在实际生产中每个人表述的是同一种颜色呢？这就需要找到可以科学且规范描述颜色的方法，在日常生活中我们接触比较多的是色温法。色温法的原理是：物体把热量以光的方式辐射出去，当物体处于不同温度时会发出不同颜色的光：温度比较低时呈现黄色，温度高时呈现蓝色或白色。这里标定的色温和大众认知中的冷暖感受正好相反，通常我们会认为红黄色调偏暖，蓝白色调偏冷，但实际上红色的色温最低，然后逐步增加的是橙色、黄色、白色和蓝色，蓝色是最高的色温。因此色温的高低和给人的色调感受是正好相反的。资料来源：网络熟悉摄影的同学都知道，当我们在清晨或黄昏的户外拍摄时照片时常会发黄，这是因为该时间段色温较低，光线呈现为橙黄色。而相机的白平衡模式可以缓解环境光的影响。其原理就是通过切换预设场景的色温值抵消当前实景的色温影响，使拍摄出的照片呈现出白色基准更真实。资料来源：网络色温法是建立在物体可以自身发光的基础上，而在自然界的发光体中，红、黄、蓝色会更为常见，但是绿色和洋红色很少。所以单靠色温法描述颜色不够准确，它更适合用来反映环境冷暖和色彩的倾向关系。资料来源：网络3. 常见的色彩模型为了更准确的描述颜色，工程师们引入了色彩模型的概念：将色彩拆分成不同属性并进行量化，通过计算机语言更科学准确的表述颜色，而不同维度的拆分方法便是色彩模型。随着科技发展和生产制造的需要，色彩模型迭代出了多个版本类型，接下来我将挨个介绍常见模型的差异和功能特点：① HSB 和 HSL 模型HSB 模型也称 HSV 模型，该模型是建立在人眼识别色彩的基础上，符合人类日常的生活经验，相较其他模型最为直观易理解。该模型主要使应用在图像处理、计算机图形学、色彩管理等领域，用于描述和操作颜色。其属性包括：H 色相：Hue，以角度（0-360）表示S 饱和度：Saturation，以百分比值（0%-100%）表示B/V 亮度：Brightness 或 Value，以百分比值（0%-100%）表示HSL 是和 HSB 原理相同的模型，在工作中很容易会被混淆使用，其区别在于：HSB 中 B 指的是「亮度 Brightness」，而 HSL 中 L 指的是「明度 Lightness」。为方便大家理解，对于这两种模型的详细区别，我整理了出了以下表格：资料来源：网络HSB 和 HSL 模型在使用场景上都是用于软件开发应用，在实际工作中我们接触 HSB 模式的场景会更多，但到底哪种模型更适合人类用户使用的界面设计尚未有定论。对于设计师自身而言需要注意的是，在和开发同步设计资料时确保使用的是同一种模型，避免产生颜色误差。虽然 HSL 模型有诸多好处（HSB、HSL 属于同类模型，后文统一用 HSL 概括），但其缺陷也很明显：HSL 模型无法用于工业制造，因为在自然界中基本很难找到某一属性纯度可以达到标准的物体，也难以控制单一属性变量来改变物体颜色。为了解决以上限制，用于屏幕显示的 RGB 模型和彩色印刷的 CMYK 模型应运而生。② RGB 模型RGB 模型是依据颜色发光的原理所搭建的，也被称为光的三原色，工业上用于通过红、绿、蓝三色发光单元产生颜色的电子屏幕。R 红：Red，以数值（0-255）表示G 绿：Green，以数值（0-255）表示B 蓝：Blue，以数值（0-255）表示通常情况下，RGB 各有 256 级亮度，用数字表示为从 0、1、2...直到 255，虽然数值最高是 255，但 0 也是数值之一，因此共 256 级。将三种颜色叠加并控制其颜色强度，256 级的 RGB 色彩总共能组合出上千万种色彩，而这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。资料来源：网络RGB 模型是我们日常工作接触最频繁的模型，但是不知道你是否产生过疑惑：为什么偏偏选择「RGB 红绿蓝」作为光的三原色，而不用其他色彩呢？首先我们要明确，能作为三原色的基础是必须保证其中任意一色不能通过其他两种颜色混合而成，且这三种颜色混合后能形成足够多的颜色种类。而 RGB 能作为三原色的色彩主要和人眼的生理结构有关：资料来源：网络前面我们提到，光的本质是一种电磁波。而视锥细胞共分为三种，分别对长、中、短三种电磁波长最为敏感，而这三种波长的光对应的正是红、绿、蓝三种颜色。当这三种感光细胞收到刺激后，会自动对将感受到的光色进行组合从而形成多种多样的色彩。这也是为什么「RGB 红绿蓝」被作为三原色的客观原因。资料来源：网络关于 HEX 色值这里还有个知识点就是 HEX 色值，听到它大家都不会陌生，在很多拾色器中我们都见到过，工作中也经常将其提供给开发同学作为颜色标识。虽然看起来结构不同，但 HEX 也是采用 RGB 模型的原理来定义颜色，只是语言上用的是十六进制代码：字节值范围从 0 到 FF，颜色的最低强度为 00，而最高强度为 FF。实际转换时，每位数字范围是 0～15（分为 0～9 和 A～F，其中 A～F 表示 10～15），这样每位数字都能代表 16 个数，而每 2 位数字相乘即可代表 256 级，正好对应一个颜色通道。相较于长段的 RGB 表示法，HEX 色值表示法只需六位字符，更加紧凑轻量，所以更适合开发人员使用。十六进制到 RGB 转换器工具： https://purecalculators.com/zh-CN/hex-to-rgb-converter③ CMYK 模型以上 RGB 模型是针对可自身发光的物体，CMYK 模型则是针对依靠反光的物体。CMYK 是色料的三原色，也叫印刷的三原色，使用最多的场景是媒介印刷，其原理是基于油墨的光吸收/反射特性，眼睛看到颜色实际上是物体吸收白光中特定频率的光而反射其余光得来。R 青：Cyan，以百分比值（0%-100%）表示M 品红：Magenta，以百分比值（0%-100%）表示Y 黄：Yellow，以百分比值（0%-100%）表示B 黑：Black，以百分比值（0%-100%）表示资料来源：网络通过以上现象我们会发现，将不同颜色的物质不断揉合最终会得到黑色物质，而这正好满足了我们工业印刷品上白纸黑字的需求：选择「红、绿、蓝」的补色「青、品红、黄」，通过调整这三种颜色油墨的比例，就能得到反射不同颜色的油墨。理论来说同比例的这三色油墨可以直接混合出「黑色」，但是现实中由于生产技术的限制，油墨纯度往往不尽人意，混合得到的黑色不够浓郁，只能依靠提纯的黑色加以混合，这种做法同时也可以节省油墨消耗。资料来源：网络在显示器等发光体下，RGB 模式的数值越大则光线越强，最终呈现的亮度也会最大。但是在印刷品等反光体下，其纸张本身的白色即是可以呈现的最高亮度， 所以 CMYK 模式的数值越大则油墨越多，最终呈现的亮度会越低。也因此：RGB 被称作加色模型，即多色叠加最终将得到白色CMYK 被称作减色模型，即多色叠加最终将得到黑色。④ Lab 模型以上三种是最常见的通用模型，还有些色彩模型用于更特定的场景，Lab 模型便是基于生理特征的一种模型。RGB 和 CMYK 受限于载体，同样的颜色可能会因为材质差异影响呈现不同的颜色，Lab 模型则是弥补其不足，摆脱原材料载体对模型的影响。1）L 明度：Lightness，以数值（0-100）表示2）a b 是两个颜色通道：a 通道：从绿色到红色，以数值（-128 至 127）表示b 通道：从黄色到蓝色，以数值（-128 至 127）表示资料来源：网络Lab 模型无法用于实际生产制造，但是其色彩空间比计算机显示器甚至比人类视觉的色域都要大，在转换成其他模型时色彩不会丢失或被替换，所以通常用于图像色彩空间转换、色彩校正、色彩相似度比较等场景。在进行具体的颜色转换时需要复杂的计算公式，作为设计师只需了解其模型用途即可。关于色彩空间上面我们提到一个词叫色彩空间，它是图像处理和计算机图形学领域中非常重要的概念，在图像处理、图形学、图像质量评价和广告设计等众多领域都有涉及。很多人会将它与色彩模型弄混，实际上两者是不同的概念：色彩模型：一种数学模型，用于表示色彩的三维数学空间，通常会用 3 个或者 4 个数值来表示。色彩空间：一种色彩表示方法，它将色彩模型中的颜色映射到二维或三维空间，以便于显示和比较。总而言之，色彩模型是用于表示色彩的三维数学模型，色彩空间是对色彩模型的二维或三维映射，方便于显示和比较色彩。色彩空间通常与色彩模型一起使用，并使用特定的数学表示法来定义色彩空间中的颜色。资料来源：维基百科⑤ HCL 模型HCL 模型最早由国际照明协会 CIE 提出，又被称作 CIELch(uv)。该模型是为了解决色彩对比度问题而诞生的模型，对颜色识别有障碍的视障人士更友好。H 色相：Hue，以角度（0-360）表示C 色度：Chroma，可以理解为颜色的浓度，浓度值越大，颜色就越鲜明。以数值（0-150）表示L 照度：Luminance，用于量化人眼对光的亮度的感知。以数值（0-100）表示。注意这里 HCL 模型的「Luminance」与前文 HSL 模型中的「Lightness」是不同的，我们先来看一个例子，分别通过 HSL 和 HCL 推导的色卡在对比度上有何差异？很明显，虽然都是控制变量但左图在颜色对比度层次不齐。这是因为 HSL 模型是基于电子元件的显示亮度进行计算的，但并非人眼感知光的实际感受。所以在配色时如果采用 HSL 模型，即使「Lightness 明度」值相同，色彩亮度在人眼看来依旧不匹配，需要设计师基于主观意愿进行调整，不仅耗费时间和精力，配色流程不够科学标准化。HCL 模型则很好的解决了以上问题，其初衷就是基于人眼对亮度对感知而创造的：只要「Luminance 照度」保持一致，不同色相的颜色亮度感受始终会保持均匀，这种情景下取色流程会更加简单高效，应用到产品上对视障人士也更加友好。资料来源：TDesign需要注意的是，HCL 模型的色彩空间和其他模型不一定能完全匹配，所以直接转换可能存在颜色丢失或被替换的情况，这里为大家提供了几款以 HCL 色彩模型为基础的色彩转换工具：HCL 转 RGB HEX： http://hclwizard.org:3000/hclcolorpicker/MD 主题搭建工具 HCT Color Picker： https://m3.material.io/theme-builder#/customColorpicker for data： http://tristen.ca/hcl-picker/#/hlc/12/1.03/182009/A9FC8EFigma 插件： https://www.figma.com/community/plugin亮度、明度和照度的区别介于中英文语义的差异，Brightness、Lightness、Luminance 都可以翻译为“亮度”，然而在色彩模型中每个词却有更深层次的解释，为方便大家区分理解区分，将三者整理在一起进行对比：Brightness 亮度：用于 HSB 模型，客观测量颜色的显示亮度。颜色变化从黑到标准色相，满值为颜色标准色相。Lightness 明度：用于 HSL 模型，和 HSB 一样客观测量颜色的显示亮度，与人亮度感知没有直接关系。颜色变化从黑到标准色相再到白，半值为颜色标准色相，满值为白色。Luminance 照度：用于 HCL 模型，主观上衡量发光的强弱和颜色对比度。可以发现前 2 个都是客观上对颜色亮度的衡量，而「Luminance 照度」才是真正意义上主观感受颜色的标准。二、B 端产品的色彩系统近年来，随着企业级产品功能体量不断丰富，产品设计体系逐渐趋向于规范化，如何搭建一套标准易用的色彩系统对于提升团队工作效率和产品体验一致性至关重要。通过系统化的颜色管理方法，可以帮助企业统一品牌颜色，提高品牌识别度和统一性。接下来，我将为大家详细讲解 B 端产品中色彩系统的构成和搭建方法：1. 色彩系统的概念简单来说，色彩系统是指从整个设计系统里抽离出的分支，为方便管理而针对色彩语言搭建的管理体系。完整的设计系统由设计语言和模式库构成，在设计原则的指引下，通过统一的协作语言和科学的管理方法组织起来，创建体验一致的用户界面。完整的设计系统可以拆解成三部分：设计原则：设计要遵循的中心思想，所有的问题和形式都向原则靠拢，减少不确定性设计语言：包括价值观、品牌、符号、色彩、文字等品自主表达的媒介模式库：即组件库，通过对控件进行归纳整理形成的可快速复用工具库色彩系统也是如此，并不仅仅是简单的色彩组件库，结合设计系统的内容，我们可以将设计原则和设计语言归入色彩规范中，而模式组件库即产品色板（调色板）。这里可以将色彩系统定义为：由色彩规范和产品色板组成，可以科学有效管理色彩的应用程序。2. 什么是好的色彩系统理解了色彩系统的定义，如何保证搭建的色彩系统科学有效？好的色彩系统应遵循以下三个原则：有意义：能够体现产品个性，凸显品牌基因，满足用户对产品的认知感受，不同色彩的搭配使用能满足用户的心理预期，提升使用体验。易上手：色彩系统不仅仅是给设计师自身使用的，在整个产品周期中，从上游的品牌战略到下游的视觉运营，都要使用到产品配色，优秀的色彩系统应方便团队成员上手，即使没有专业背景也可以很快的理解和使用。无障碍：不同颜色间对比度要匹配 WCAG 的对比度标准，保证内容元素的可识别度。3. 色彩识别无障碍资料来源：网络在色彩系统搭建之初就考虑色彩无障碍识别问题，可以普适更多场景，有效提升产品信息识别度和易用性。WCAG（Web Content Accessibility Guidelines ）内容无障碍指南作为行业广泛使用的无障碍设计标准，是检验文字颜色可读性的有效依据，只要文本颜色与背景色之间的对比度满足以上标准，就能确保被清晰识别。WCAG 2.0 中将颜色对比等级分为 3 种，等级越高意味着颜色的对比度越高，呈现出来的信息可读性越好：A 级：对比度 3 : 1，是普通观察者可接受的最低对比；AA 级：对比度 4.5 : 1，是普通视力损失的人可接受的最低对比度；AAA 级：对比度 7 : 1，是严重视力损失的人可接受的最低对比度。这里为大家推荐一款可视化对比度检测工具 Color Review：通过将 3、4.5、7 对比度临界点的颜色通过曲线标识，可清晰直观的看到当前色值的对比度在拾色器中的位置，方便进行调整。Color Review 对比度可视化检测工具： https://color.review/资料来源：Color Review4. 产品色板的组成依据色彩的类型和功能不同，产品级色板的内容可分为主色、中性色、辅助色和功能色，其中每种颜色都应有相应的色阶拓展供配色使用。① 主色产品主色一般是页面中使用最多的颜色，通常被使用在关键行动点、操作状态、重要信息提示、图形化等场合。很多设计师会直接将主色和品牌色划等号，即直接将品牌色作为产品主色使用，我们日常接触的 C 端产品大多也是直接使用品牌色作为主色使用，但是 B 端产品主色也可以直接使用品牌色吗？这里需要先理解 B 端和 C 端产品的设计差异。C 端产品设计侧重流量思维，追求尽可能渗透用户的碎片化生活来吸引用户。通过将品牌色作为主色使用可以凸显品牌特征，强化用户心理认知，以此来提高用户粘性和活跃度。而 B 端设计侧重的是效率思维，强调提升用户的操作效率帮助其达到使用目标。所以 B 端产品主色优先考虑色彩的识别度和视觉感受，尽可能保持用户在使用产品时沉浸感，即使在长时间浏览时也不会感到不适。因此究其根本，B 端产品主色不能对用户的使用操作造成干扰，必要时需要在原有品牌视觉的基础上提取品牌色进行修正，使其更符合用户的使用场景。当然能兼具品牌价值传递和操作体验是产品的最优方案。② 中性色中性色又称无彩色，包括黑色、白色及调和后不同深浅的灰色，常被使用在文字、图标、背景、线框等场景。中性色本身不具备颜色属性，没有色相冷暖的区分，因此可以更好的衬托其他有彩色，也能拉开信息的层次差距，对于创造结构、表达边界和建立信息层次十分重要。一般浅灰色应用在分割线、表单描边、背景色等场景，划分页面布局且避免对主要内容造成干扰。深灰色主要应用在正文、标题、图标等元素上，通过明度变化突出内容，方便用户浏览。有些产品会在中性色中加入适度色彩倾向，在保持中性色本身信息区分度的前提下，增加品牌色基因来强化品牌氛围。资料来源：TDesign在搭建中性色色板时，对于配置文字颜色市面上有 2 种解决方案：一种是直接控制灰度拓展色阶，另一种是用透明度变化建立色阶，如使用#000 并降低其透明度。市面上采用透明度方案的并不多，考虑到其根本目的是为了保证文字信息内容可以被正确展示，在此针对两种方案的使用场景提供更清晰的使用建议：色值变化：内容可以完整的保留色彩信息，不会造成色彩丢失，在组件搭建上维护成本更低。适合大多数场景下使用。透明度变化：在复杂图片或纹理的背景上依旧可以很好的展示内容信息，且可以更好的适配亮暗模式，更具包容性，但在一定程度上会增加浏览器的渲染负担。适合使用在暗亮模式需求或有复杂背景纹理的页面中。③ 辅助色辅助色是在主色基础上衍生出的其他颜色，主要有 2 个作用：一方面可以平衡色彩系统，缓解用户在使用产品过程中频繁使用单色造成的视觉疲劳，另一方面可以丰富色彩系统的可用性，通过和主色对比增加内容区分度。资料来源：网络根据研究来看，人类可命名的有彩色数量仅为 8～9 种，更多的颜色分类会增加使用时的筛选负担，同时色彩区分度也会降低。故通常建议在人类可命名的 8 种颜色中选择 6～8 种作为辅助色即可，如果有更多用色场景需求可以考虑加入拓展的颜色色阶进行交替使用。④ 功能色B 端产品中会利用色彩的心理暗示来对用户进行状态反馈，以降低用户认知成本，这部分辅助色通常被独立出来称为功能色：遵循用户心智和行业内默认的色彩语义，选择特定颜色向用户传达成功、失败、告警、链接等状态信息。如用红色传达通知、提醒、错误等，绿色传达确认、成功、正确等，橙色传达警告等。5. 色彩系统搭建以上便是色彩系统的主要内容，接下来将详细介绍如何搭建适合自身业务的色彩系统，主要分为以下五步：第一步：色相环取色。由主色推导出既符合品牌调性又具备区别度的辅助色。第二步：颜色校正。对选择的颜色进行色彩校正，使其保持感官同频。第三步：色阶延展。针对选择的颜色搭建层级均匀、层级清晰的色阶梯度。第四步：色彩语义化。对搭建好的色板进行语义命名，方便团队调用。第五步：团队推进。将资源同步至团队中使用，并优化迭代。① 第一步：色相环取色色相环取色是在主色基础上通过使用色相环来提取辅助色，具体的操作方法为：以主色的「色相 Hue」为起始点，在色相环上以 15为梯度进行加减，得到 24 色的色板。再根据自身产品场景，选择其中 6～8 种的颜色作为辅助色。② 第二步：颜色校正在色相环取色过程中，虽然保持其他变量，只对色相进行了变换，但由于颜色本身在视觉感受上存在亮度差异，故需要进行颜色校正，一方面保证整个色板保持视觉上的感官同频，另一方面保证视障群体的识别度。③ 第三步：色阶延展选择合适数量的辅助色后，需要对单个颜色进行色阶拓展以提供更多的色彩搭配空间，色阶拓展是指将同色相下的颜色由浅到深划分为多个色阶梯度。通常色阶拓展采用 8～12 级进行划分，如果层级过少可能会无法满足日常的取色需求，而层级过多又会导致色彩区分度下降，在取色时也会增加选色成本。市面上有很多种色阶延展的方法，这里为大家整理了几种常见的方法：透明叠色、直线等分、工具生成，各位同学可以基于团队情况自行选用：透明叠色法顾名思义，透明叠色法是在原来颜色的基础上叠加不同透明梯度的白色/黑色遮罩，由此得到不同色阶梯度的衍生色，再通过取色器吸取叠加后的色值。该方法实现成本低，无需其他工具配合即可实现，但是操作相对繁琐，当叠加层级较多时可能会导致颜色偏差，有时需要基于实际情况再做微调。直线等分法直线等分法是通过在拾色器中建立坐标系，之后采用直线等分打点的方法取色。其中拾色器的坐标系是基于当前选择的色彩模型而定，如 HSB 模型横/纵坐标为饱和度/亮度，HSL 模型则是饱和度/明度。直线等分法的操作较为简单，可以通过公式算法自动取色，但设计师独立推导的计算成本较高，通常需配合公式计算。具体的操作步骤如下：1）在拾色器上标明要延展的颜色，将色值点与左上方纯白和右下方纯黑点连接，得到 2 条线段2）将 2 条线段均匀分为 5 段，所有线段段点合集共 11 个点，计算每个点的色值数，即可得到这 11 个点组成的色板。3）以现有颜色坐标（X，Y）为基准，采用以下的计算公式即可得到延展色的色值：左上方点：横坐标(X/5)递减，纵坐标以[(100-Y)/5]递增右下方点：横坐标以[(100-X)/5]递增，纵坐标以(Y/5) 递减工具生成经过多年发展，国内外多家设计系统都开发了直接生成完整色板的开源工具，且经过不断迭代如今算法基本能满足大部分场景下的色板需求，是中小团队的首选方法。但是工具生成也存在一些弊端，其色值生成始终是建立在公式计算的基础上，故在部分极端场景下依旧需要设计师介入调整。资料来源：Ant Design 色板生成算法演进之路以下给大家整理了常见的色板生成工具：在线工具 Chroma.js： https://www.vis4.net/palettesArcoDesign Palette 色彩工具： https://arco.design/palette/listAnt Design 色板生成工具： https://ant.design/docs/spec/colors-cn#色板生成工具Material Palettes 色板生成工具： https://www.material.io/design/colorHTML Color Codes 颜色选择器： https://htmlcolorcodes.com/Eva Design System 色彩系统： https://colors.eva.design/Atmos 色板生成工具： https://atmos.style/④ 第四步：色彩语义化色彩语义化是指依据颜色在界面中的作用和使用场景进行重新命名，方便团队后期的维护和使用。这一步看似简单，但是实际操作起来需要设计师对色彩的使用场景和团队取用有深入的理解，很多细节需要推敲和考量。这里推荐参考 Nathan Curtis 的语义模版，作者将设计系统下的命名模版分为了四个部分：命名空间-元素对象-基础样式-修饰备注。资料来源：Naming Tokens in Design Systems原文关于设计系统下的语义命名进行了详细介绍，有兴趣的可以直接阅读原文： https://medium.comNathan 关于设计系统的命名涵盖了包括色彩、控件、文字等一系列元素命名方式，而色彩系统只需要截取其中部分拼装成符合自身场景的语义模版即可。各位可以基于产品规模和团队情况选择合适的内容进行命名封装，需要注意的是，语义模版的命名需要合理的把控精度：一方面过细颗粒度的命名会导致过于臃肿，维护成本过高，另一方面粒度过粗的命名会导致元素区分度不够，在团队推进使用时容易造成混乱。关于如何验证色彩语义是否清晰有个很简单的方法，即直接将设计的配色方案提供给开发同学，看能否在不借助颜色进行备注和说明的情况下只通过命名即可理解色彩的语义场景，通过不同角色视角更容易发现色彩命名的问题。⑤ 第五步：团队推进到这里色彩系统的基础色板和配色方案基本都搭建完成了，后续就是将其整理到组件库，并输出设计文档同步给团队其他成员使用。这里推荐使用 Figma Tokens 插件来进行管理和维护。此外，在同步前端同学建立开发组件库时，尽量采用语义命名对颜色进行封装，而非直接写死固定色值，以便日后在迭代调整时更加灵活。设计内协同：在 Figma 中生成颜色变量与开发代码联动：利用颜色变量表进行信息同步参考资料https://www.yuque.com/xiami0101/bq79sy/vtnqb262ag42tt66https://www.yuque.com/xiami0101/bq79sy/hy3vvihttps://www.youtube.com/watch?v=k1rB1Y4isHs&list=PLhnwj_CftHvhwO8P0mytRNZzlgbtOvgf4https://www.jianshu.com/p/f0e6382dd825https://zhuanlan.zhihu.com/p/165548359https://jessieji.com/2020/hcl-instead-of-hslhttps://medium.com/@pk.kiselev/designing-colour-system-d9d39f245e01https://www.jianshu.com/p/facdbab5ac20https://zhuanlan.zhihu.com/p/32422584https://www.yuque.com/xiami0101/bq79sy/ntkf60rgs9g3m2h2?singleDoc#https://zhuanlan.zhihu.com/p/102743681?utm_id=0欢迎关注作者微信公众号：「虾米的体验笔记」本篇来源：优设网原文地址：https://www.uisdc.com/color-system-2
视觉 色彩 春晚 《2023 央视春晚》以温暖人心的精品节目、亮点满满的技术创新、美轮美奂的舞美效果为全球华人送上了一道红红火火的文化大餐。整台晚会吉祥而又典雅的舞美视觉美学成为本届晚会的一大亮点。这些美轮美奂的视觉设计是如何产生的？今天我们请担任本届晚会视觉总监，中央美术学院设计学院教授，某集体 ART+TECH 创意总监费俊，来为我们揭秘视觉设计背后的理念、方法和过程。相关春晚的幕后文章：优设专访数字艺术家Sixone：AI辅助创作的IP形象是如何登上春晚舞台的？大家好，这里是和你们聊设计的花生~春节将近，前不久 2023 年央视春晚公布了兔年的吉祥物“兔圆圆”，它是春晚 40 年历史上首个通过互联网大数据分析完成初始配方原创的总台春晚吉祥物 IP，形象乖巧可爱，一经发布就受到了很多网友的称赞和喜爱。阅读文章 > 一、满庭芳华 舞色新春吉庆+典雅，传统+现代的视觉美学理念总导演于蕾和副总导演邹为在晚会策划阶段提出了以宋代词牌名“满庭芳”为核心定位，取意自中国古典文学词牌名，通过舞美、多媒体、节目视觉等各个方面，共同营造祈愿圆“满”的中华大家“庭”尽展“芳”华的主题气象。视觉设计团队秉承这一理念，将中国传统文化中的年俗美学与文人美学相融合，形成“吉庆+典雅”的视觉美学气质；并将传统艺术形式与现代视觉科技相结合，形成“传统+现代”的视觉美学表达。二、传统色彩 创新应用中国传统色彩的视觉美学系统为整体性、系统性地提升整台晚会的美学调性，费俊带领团队建立了一套属于春晚的色彩系统，并设计了一本色彩系统应用手册，这在春晚的历史上尚属首次。这本手册为所有参与创作和制作的团队与个人提供了一套行之有效的配色工具及色彩应用指南，这既大大提高了设计和制作效率，又为形成更加整体性的视觉美学奠定了重要的基础。2023 春晚色彩系统应用手册费俊将色彩系统的建构和应用逻辑概括为“寻色”、“拾色”、“弄色”、“舞色”这四个阶段。整个色彩系统设计的起点来自于对于中国传统色彩的追寻，中国人从自然万物、天地四时中寻觅色彩，这种“寻色”饱含着中国人对自然的敬意、对生活的诗意和对未来的寓意；遵循着这样的理念，团队首先从中国传统色中“拾色”-- 提炼并组合出五个具有吉祥寓意的吉祥五色，并将每个主色延展成 8 种延伸色，形成 40 种可应用色板，以及 10 套配色模版，从而形成了既包含特定色彩搭配指南，又包含较宽色域的应用系统。2023 春晚色彩系统应用手册内容（部分）而色彩系统的应用是一个非常具有挑战的跨学科的系统工程。如何通过各种观看终端的屏幕来完美呈现色彩的表现也是团队着力攻坚的课题之一。艺术的“弄色”需要科技的“校色”方式来支撑，从设计、制作、录制到直播，每个环节都要不断通过设计师和工程师联合的测试、校准和调整，才能实现最佳的色彩呈现。将色彩系统这样的理论体现在设计中，来到观众的面前，则是被称为“舞色”的论题。主创团队依据色彩系统的设定，并结合“满庭芳”的视觉设计理念，设计出了一套被亲切地称为“值班”的春晚主视觉，这些“值班”展现在节目之间主持人串场、零点倒计时以及晚会最后的《难忘今宵》等重要节点上。春晚主视觉（四十多版设计稿）主视觉 - 满庭芳玉棠富贵 （应用于《难忘今宵》）- 主要元素：玉兰、海棠歌曲《难忘今宵》摄影：贾宁旨团队致力于将中国传统色这样的文化遗产活化到春晚舞台，以“色彩系统”为起点，建立起属于春晚的色彩美学体系，让以往缺乏整体风格的舞台视觉变得更加具有美学调性，让大众在色彩的浸染之中感知中国色彩的文化意蕴。“2023 年春晚的色彩观念，依托中国传统色彩体系构建，以正色为经，间色为纬，追求传统文化中柔和雅致、内蕴丰厚的色彩基调，织就春晚色彩体系的传承与创新之美。”（引自：央视新闻）三、传统元素 当代演绎艺术与科技有机结合的视觉美学表达在每个节目的视觉创制方面，视觉团队从中华优秀传统文化中攫取元素，辅之以现代艺术手法和光影技术，使整场晚会节目达到高度艺术性与科技感的融合。VR、AR、XR、360 度自由视角拍摄、AI 人工智能图像生成、大数据、程控灯光装置、动态机械装置等前沿视觉技术的应用，使得整场晚会成为一次艺术与科技的融合成果展示，形成了对于中华优秀传统文化的当代化演绎。歌曲《百鸟归巢》以“南音”古乐融合流行风格，再利用 AR 增强现实技术等科技手段，呈现出一幅百鸟翱翔的吉祥盛景。摄影：贾宁旨在每个节目的视觉创制方面，团队秉持着“思想+艺术+技术”的融合创作理念，从中华优秀传统文化中攫取元素，辅之以现代艺术手法和光影技术，使整场晚会节目达到高度艺术性与科技感的融合。舞蹈《锦绣》摄影：贾宁旨创意节目交互视觉秀《满庭芳·国色》从自然万物、天地四时中追寻中国传统色彩，运用 AR 技术使舞台宛如色彩幻境，同时以现场实时拍摄结合 CG 特效、AI 图像生成等制作技术，将中华传统色彩赋予五位舞者演绎。创意节目《当神兽遇见“神兽”》以《山海经》《抱朴子》《史记》等中国古典典籍中的吉祥神兽为原型，结合 VR 三维影像绘制和 AR 增强现实等技术，让上古神兽“走出”文献古籍，与现代生活中的孩子们奇妙相遇。摄影：贾宁旨武术节目《演武》创意源自 200 年前的古画《武僧演武图》，为少林寺定格了气势磅礴、精彩绝伦的瞬间。节目结 AR 技术带我们穿越入画，梦回千年少林。摄影：贾宁旨四、舞台表演 视觉支撑视觉与表演深度融合的视觉创意方法如何让视觉成为表演的有力支撑，如何与舞台上的各种元素形成协调统一的表达是视觉创意过程中的重要挑战。视觉团队的视觉导演与各个节目主创在内容创作前期就开始深入的视觉创意研究，让视觉内容成为表演者，融入每个节目的原生语汇，而不只是为表演做背景，视觉与表演者成为一体，共同出演；大屏幕上的视觉内容还能成为表演者的支撑要素，而不是变为干扰表演的另外一张皮。 舞蹈《碇步桥》摄影：贾宁旨舞蹈《我们的田野》摄影：贾宁旨中幡杂技《龙跃神舟》摄影：贾宁旨歌曲《跟往事干了好几杯》 摄影：贾宁旨歌曲《花开忘忧》摄影：贾宁旨歌曲《合拍》摄影：贾宁旨歌曲《绿水青山》摄影：贾宁旨有些节目的视觉方案经历了多达数十版的调整，这些调整一方面来自于纯粹的视觉创意的优化；另一方面因为节目内容本身也在经历不断的调整变化，甚至于颠覆。视觉创意及制作团队经历无数个不知疲倦的日夜，不断深化打磨直至最后一刻，为整场晚会视觉品质的提升竭尽所能。创意节目交互视觉秀《满庭芳·国色》《满庭芳·国色》初期节目创意手稿五、光色晕染 灵动优雅演播大厅天顶舞美装置设计今年春晚选择以“花”作为贯穿整台晚会的舞美主题符号，以“满庭芳”作为舞美设计核心理念，这一理念贯穿在演播大厅从空间、舞台到景观等各个方面的设计之中。其中由四瓣花结构演化重构而成的演播厅顶部艺术装置，既是根植于中华文明的美学创造，又是绽放着现代设计理念的创新呈现。创意取材自距今 6000 年至 4800 年前的庙底沟彩陶标志性的“花瓣纹”，著名考古学家苏秉琦先生曾提出：花卉图案彩陶，可能就是华族（即华夏民族）得名的由来。装置设计的巧思之一，是通过“灯光晕染”的方式形成色彩变化，藏于每片结构顶部的灯带作为间接光源，将每层结构之间以柔和的光晕装饰，有如淡彩水墨般节制而淡雅，恰到好处地烘托演播大厅的气氛；同时，通过精密的程序控制，形成灯带整体与局部间丰富的色彩变换，并能实时的根据节目的视觉调性来适配出相协调的色彩动态演绎，这一设计让演播大厅的空间也与舞台上的内容成为了一个可以联动的整体，既提升了舞台的表现张力，也增强了观众的沉浸体验。演播大厅天顶舞美初期设计稿演播大厅舞美设计过程稿六、吉庆团圆 生机勃勃春晚吉祥物设计于春节前夕亮相的春晚吉祥物形象“兔圆圆”，由关山月美术馆馆长陈湘波先生和春晚视觉设计团队历时 4 个月打磨完成。吉祥物“兔圆圆”身上，包含着传统文化中生肖兔的意蕴和美感，也创造性地呈现了中国科学家的科研成就。这是春晚 40 年历史上首个通过互联网大数据分析完成初始配方原创的总台春晚吉祥物 ip。整体形象的基础结合了中国白兔的基本特征，同时参考了社交网络大数据分析，形成了“兔圆圆”的基本形态和性格设定。根据中科院骨脊椎动物研究所研究结果表明，“安徽模鼠兔”为世界最早的兔形动物，中国可谓是兔的“第一故乡”。在“兔圆圆”的造型设计中，视觉设计团队与陈湘波先生一同不断打磨和推敲，最后确定的形象，保留了真实中国兔子造型上的特点，同时艺术化的处理使“兔圆圆”兼具人的表情，更能直观展现不同的情态。造型设定上突出兔的灵动、圆融之美，整体线条简洁饱满和圆润。例如，兔耳选择了大小适中、竖直圆润的形态作为常态，但在不同生存状态时兔耳也有不同姿势；兔的眼睛力求在“拟人兔”与“写实兔”之间找到一种造型的平衡。“兔圆圆”设计过程稿 — 比例调整“兔圆圆”设计过程稿 — 造型三视图“兔圆圆”设计过程稿 — 动作示意草图“兔圆圆”还作为整场晚会第一位出场的“演员”，在开场短片中登场。观众们跟随“兔圆圆”，从充满节日气息的街头市井，来到鲜花盛开的田野草地，而后乘着直冲云霄的节日烟火来到外太空，在空间站舷窗外，看到失重环境下纸花在水膜中开放的独特现象，此时礼花在夜空中绽放，形成了演播大厅舞美天顶的形状，也自然地将观众带入晚会现场。开场短片中的“兔圆圆”短片通过将“兔圆圆”形象三维化，经过不断打磨，配合实景拍摄与动画特效，打造出一个与自然融合、寓意吉祥、形态可爱、含义丰富的新春形象。开场短片分镜草图幕后花絮费俊及视觉组与《2023 年春节联欢晚会》总导演于蕾，在现场监视器前审看节目视觉费俊与晚会总导演于蕾、央美建筑学院副院长崔冬晖团队成员就主持人背景舞台装置进行讨论费俊、胡增鸣与视觉组在春晚现场开工作会晚会开播前接到最后一个紧急设计任务，费俊为岳云鹏变魔术的手绢设计刺绣图案构成费俊与总导演于蕾、副总导演邹为、视觉总监胡增鸣及视觉组在节目成功播出后的合影本篇来源：优设网原文地址：https://www.uisdc.com/2023-spring-festival-gala-design
色彩 亮度 自定义 色彩体系的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。相关干货：如何设计B端色彩体系？3个步骤帮你掌握起来！编者按：B端设计的色彩体系如何构建？阅读文章 > 前言：本文粗浅阐述色板生成、检验与应用的流程方法，包括主流的基准色选取、演算方法、补充色彩空间底层差异、以及 Tokens 结构。好了，那就开始吧~一、取色1. 主色：从产品或品牌主色开始注：以个人项目主色为案例，前期产品色是基于 HSB 色彩模型选取的主色配色：品牌/产品所要传递的调性以拾取 24 色为例：H 360/24=15递进，Brand Blue H218。配色原则方法：1、基于品牌传递调性；2、基于邻近色、对比色、互补色。配色种类：自定义（6、8、12、16...）2. 检验：主色保持视觉感官一致保持视觉感官一致，适宜长时间浏览阅读。矫正饱和度 S 与亮度 B，HSB（brightness）的亮度一致不能保证视觉感知一致，需引入 Photoshop 图像灰度模式或者 Lab 色彩空间下的亮度 L（Lightness）来检验。在保证主色色彩主观感受舒适下，以品牌色亮度为基准，亮度过渡尽量平缓，矫正过于跳跃的色彩主色，才能衍生出接近视觉感官一致的全色系色板。二、延展演算 1.0：透明叠色操作性快捷，色彩过渡平均。假设不以纯白纯黑作为起点与终点，就需要确定最小起点值 95%(自定义)，确定 11 色(自定义)，白色步幅为 n=5(自定义)，黑色步幅为 n=5(自定义)，得出 95%/n=19%。演算 2.0：等序差值操作性容易，有规律推算 S 值与 B 值。同样假设不以纯白纯黑作为起点与终点，就需要确定最小起点 Smin=5%(自定义)；Smax=100%(自定义)；Bmax=100%(自定义)；Bmin=20%(自定义)，浅色步幅为 n=5(自定义)，深色步幅为 n=5(自定义)。如果把调色板看成是一个二维坐标轴，我们有主色坐标、深色坐标与浅色坐标，三个坐标点之间进行均值计算，一次衍生步幅坐标点。通过此规律，那么就可以利用 Numbers 表格搭建简单演算工具，依靠公式修改基准色 S 值与 B 值，演算延展出完整的深浅色板。演算 3.0：曲线拟合依赖曲线函数，多种过渡变化。色彩过渡缓和在直线的基础之上，引入线段曲率与点速度，也可以使用常用的曲线函数：EaseIn；EaseOut；EaseInOut 等。曲线色彩梯度自行推导难度相对较大，需要依赖工具生成。三、检验1. 检验色板：视觉感官的一致性亮度当然除了亮度检验，还需要做 WCAG 2.1 标准下的对比度检验。相比于直线生成的色板，曲线函数的优势能生成亮度一致性更接近的色板，但是仍然无法完全解决这个问题，那么是不是问题出在色彩模型下呢？2. 两类色彩模型的底层差异追求亮度一致的视觉感知体验，目前在软件层面涉及到色彩部分，几乎都是以 RGB 或者 RGB 的色彩模型衍生出来的色彩空间。RGB 的原理发光元件通过三色光叠加，是一种基于计算机显示技术发展而来的色彩模型。其实对发光元件而言的亮度与人眼感知的亮度是存在非常大的差异。那么基于人眼测定的色彩模型就有像 Lab、HCL 以及最新的谷歌 HCT，常用的 Photoshop 图像灰度模式与 Lab 中的 L 都是基于人眼测定的亮度 Lightness 通道。下图可以直观感受基于两种色彩模型差异，虽然都是相同的亮度 Lightness，但是视觉感官体验上的舒适性差异明显。在这里补充色彩模型差异，主要原因是软件产品服务对象是人本身，所选用色彩模型应尽量贴近人眼感知层面的色彩模型。基于 HSL、HSB 生成的色彩，同样可以通过换算关系，转换成 Lab、HCL，但是由于色域范围不一致，色彩会存在不兼容的情况。换算关系：sRGB(HSL/HSB) linearRGB CIEXyz CIELab CIELch， 在 W3C（15. Sample code for color conversions）文档中有给出具体转换公式代码。四、应用工具资源对比度检测 Color.review WCAG2.1： https://color.review/透明度叠加工具 Tint and Shade Generator： https://maketintsandshades.com/直线等分亮度工具 chroma.js palette helper： https://gka.github.io/palettes色彩曲线工具 ColorBox by Lyft Design（搭梯子使用）： https://lyft-colorbox.herokuapp.com/色板生成工具基于 HSL/HSBEva Design System: Deep learning color generator： https://colors.eva.design/ColorBox： https://colorbox.io/基于 HCLAtmos - Create UI color palettes with ease： https://app.atmos.style/Colorpicker for data： http://tristen.ca/hcl-picker基于 HCTMaterial Theme Builder： https://material-foundation.github.ioFigma 插件(Color Space: First plugin with HCT)： https://www.figma.com来源参考：使用 Chroma.js 掌握多色调色阶： https://www.vis4.net/blogRe-approaching Color： https://design.lyft.com/re-approaching-colorDesigning Systematic Colors： https://uxplanet.org/designing-systematic-colors关于 HCL 颜色的一些笔记： https://segmentfault.com/a/1190000023056925产品配色 2.0：使用 HCL 色彩空间替代 HSL 生成配色： https://jessieji.com/2020/hcl-instead-of-hslThe Science of Color & Design： https://material.io/blog/science-of-color-designDesign tokens： https://m3.material.io/foundations/design-tokens/overviewW3C： https://www.w3.org/TR/css-color-4/#color-conversion-code更多色彩体系干货：配色找不到感觉？这个PCCS色彩体系帮你从根本上解决（三）大家好，我是和你聊设计的花生~之前向大家介绍了 PCCS（日本色彩研究所配色体系），它是目前全世界最常用的色彩体系之一，能帮助我们了解色彩要如何使用才更方便，以及如何搭配色彩才更和谐更好看。阅读文章 > 如何设计B端色彩体系？3个步骤帮你掌握起来！编者按：B端设计的色彩体系如何构建？阅读文章 > 欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/color-system
颜色 色彩 亮度 本文分享个人搭建青云 QingCloud 可视化色彩体系过程中的一些经验。（阅读此文需要一定的色彩空间知识作为基础，否则有些难啃）基础科普：如何4步建立系统级色彩体系？来看京东高手的方法！色彩体系的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。阅读文章 > 一、前言1. 背景目前平台上使用了三套组件库 A、B、C，A 是最原始的组件库，基于此扩展了 B 组件库，并对颜色进行了改进，C 是全新的组件库，引用了 Token 及其他新的前端技术栈。三套组件库独立存在，应用在庞大的云平台各个业务产品中，发展趋势为使用 C 组件库开发日后新的业务，并逐步替换老的业务。关于颜色，B 组件库采用 HSB 色彩空间调色并进行人工调整，C 组件库沿用 B 组件库的色板并对部分颜色进行了优化。关于可视化组件，平台使用第三方开源图表库 Echarts 进行简单定制化。目前的需求是基于 Echarts 系统化定制出一套图表类型较全面、交互较统一、使用规范较明确的可视化组件库。因此，确定一套可视化颜色系统成为当务之急，经过简单的调研得出两套解决方案：方案一：沿用组件库 C 的颜色；方案二：基于适用于可视化场景的色彩空间确定一套全新的颜色。不难判断的是，采用方案一，要面临的问题就是：色彩空间落后，不适用于可视化场景；大量人工调整，无法满足日后自动化交付场景所需；相关算法及推导过程丢失，设计侧无法进行科学化、可持续化迭代。且在调研过程中我们发现，可视化色彩与设计系统色彩并无必要的理由进行捆绑：一方面，可视化场景对色彩的要求要远高于设计系统组件库，因其主要通过颜色来识别数据差异，所以，对颜色的亮度、对比度、色差、和谐度等要求非常高；另一方面，可视化组件库的适用产品类型通常是多种多样的，夸张点讲就是任何类型的产品中都可能会用到可视化。这一点就需要可视化组件库拥有很强的风格兼容性，这就导致了其颜色必须兼容性强，并非随便拿一套设计系统色彩过来就能满足的；设计系统中的颜色使用场景与可视化中的颜色使用场景不同，这就导致很多已经成型的设计系统色彩从设计之初的（设计目标）就不适合拿来做可视化设计；再向底层去挖掘，很多设计系统的色彩空间不适合可视化场景，这会导致相关扩展色板的推导流程甚至主题演变流程变得异常困难。最终，我们采用了方案二，也就有了接下来要发生的事情。但在开始之前，我们需要想清楚几个问题。2. 理想的可视化色彩特点是什么？看待这个问题，其实我们要搞清楚的是可视化场景对颜色的要求是什么？① 保证同色相或不同色相之间的辨识度与色差是基本要求可以毫不夸张的说，可视化系统就是一个色彩系统，无论多么复杂花样繁多的图表，都要依靠颜色去表达。而在众多表达手法中，颜色与颜色之间的对比是最常使用的。② 颜色所传达出来的感觉要准确众所周知，颜色不仅仅能表达人类的情绪，如热闹、喜庆、冷淡、沉稳。还能表达事物的特征，如温度冷暖、海拔高低、数据升降。③ 充分考虑色盲色弱等视障群体的使用体验我们在产品设计过程中经常会提到无障碍设计，也通常会在设计系统中对颜色对比度、字体大小等做一些验证，也会充分考虑用户设备情况及产品使用环境做一些针对性设计。在可视化设计中，这些验证是相通的。④ 颜色的生成、演变与应用是动态的前面我们提到过，无论是产品迭代还是纯视觉升级亦或产品交付自动化，从技术架构到颜色算法在设计之初都要充分考虑扩展性。以至于在可视化设计中，色环的确定、色板的生成、色彩的搭配、色序的应用等都要保证有理有据且灵活可变，充分兼容复杂极端场景。注意，颜色算法是指通过大量实践、总结和优化，可以用来相对科学的批量的解决符合一定规律或映射关系的场景问题的一种途径，其产出相对理性过程也相对高效，是做后续颜色优化工作的基础，可以大大降低人为干预的几率，而非一成不变的去应用。⑤ 颜色搭配要符合产品调性，是品牌的延续可视化的应用场景非常广泛，从国家生产总值到个人收支明细，大到政务系统小到记账 App，都有其载体风格调性，如中立、活泼、科技等，均不能脱离于“品牌”而设计。⑥ 保证颜色的美观性回到设计本身，也是设计本质---美，还是要保证的。3. 传统的色彩空间弊端是什么？我们先来简单看一下使用传统的色彩空间是如何配色的。此处受 @lemonoO 的启发最初，互联网上的产品形态比较简单，对颜色的定义仅仅局限于红、黄、蓝、绿四个语义色上，用来模拟表达成功、失败等情绪。在此之上，手动扩展几个相对深与浅的颜色用于如按钮 Hover、Active 状态。颜色之间依靠一些配色工具在色盘上根据对比色、互补色等原理进行搭配。随着互联网的飞速发展，互联网产品的形态逐渐复杂，组件也日趋完善，人们不断探索能够满足更多使用场景的配色方案，定义相对完善的色彩体系。于是，Tint&Shade 扩展色阶的方案就出现了。该方案通过定义基准色后分别向深浅两个方向叠加不同不透明度的黑色与白色来生成色阶，达到扩展基础色板的目的，典型的工具如 Tint and Shade Generator。后来人们发现，这种方案虽然简单粗暴，但依靠叠加不同量黑色与白色生成的色阶存在一些问题或不满足使用场景，如首尾丢色严重，无法通过色相偏移的方式制造冷暖效果等。于是，基于更符合人类认知的色彩空间如 HSB、HSL 生成色阶法就诞生了，并成为至今使用范围最广的方案。以 HSL 为例，该方案通过将颜色定义为符合人类认知的三个变量：色相、饱和度、亮度，分别进行控制并灵活调配，如固定饱和度与亮度，在色环上通过改变色相生成基础色。或固定色相与饱和度，通过调整亮度生成色阶。就如同人类科技发展史一样，人们总是在发现问题解决问题和改进方案。如下图所示，这种符合人类认知习惯的色彩空间搭配出来的颜色，其数值亮度并不是与人眼感知亮度相通的，这注定需要人为介入来改变局面。以至于依靠这种方法生成的色彩阶梯肉眼可见的过渡不均匀，且同阶梯不同颜色间差异过大。于是乎，这里调一下亮度，那里调一下饱和度，经过不懈的努力花费了巨大的成本终于得到了满意的效果，然后发现整个色板参数完全失控了。推导经验无法复用，色板升级只能肉眼调，主题定制纯靠研发批量替换......至此，人们发现，传统的色彩空间配色方案弊端主要体现在无法科学准确的表达颜色亮度上，也终于意识到，计算机对颜色的识别和处理是线性和对称的，而人眼对色彩的感知是非线性和不均匀的。简单的例子就是红色比蓝色亮（刺眼），绿色比红色亮（刺眼）。所以，这些基于 RGB 色彩空间扩展出来的配色工具或空间（HSB、HSL 等）终究是要被取代的，这也正式促使了 感知均匀色彩空间 的诞生。由 CIE 组织（国际照明委员会）于 1976 年提出，理论上可以覆盖人眼所能识别的所有色彩，其颜色总量远大于传统色彩空间，最大的特性就是数值变化均匀则颜色变化均匀，亮度亦如此，人们终于可以客观的依据数值来判定颜色了。虽并非完全意义上的感知均匀，但相比传统色彩空间已是质的飞跃。完整介绍可参考《基础概念》篇，这里不做赘述。4. 为何选取感知均匀的色彩空间？很多可视化产品都在推荐使用人眼感知均匀的色彩空间来搭建可视化色彩系统，不断强调感知亮度均匀，但并没有告诉大家为什么。首先，这里需要强调的是，我们所追求的感知亮度均匀更贴切的说法应该是追求亮度的准确表达。表达是否准确就像建房子一样，砖是墙的基础，墙美不美观稳不稳定，取决于每一块砖的大小是否标准，而衡量这个标准的前提是砖的长宽高都是可被衡量的。与之对应的，色板是否“美观与稳定”，取决于每一个颜色是否标准，而衡量这个标准的前提是颜色的每个指标都是可被衡量的。图片源自网络，侵权请联系基于这个前提，我们就可以顺利地构建出一个可被衡量且变化均匀的全量色板。其次，区别于设计系统的是，可视化场景需要基于全量色板按照特定的规则扩展出不同类型的色板，如分类色板、发散色板等，而亮度又是这些特定规则中的重要指标。因此，一个可被衡量且感知变化均匀的全量色板何尝不是可视化设计的最佳选择呢？再其次，我们反向思考一下，如果将感知不均匀的色彩空间应用在可视化场景里会发生什么呢？下面是一个描述美国各地雨水蒸发量的案例，可以非常明显的观察到一条分界线将整张地图一分为二，这很容易让人在解读数据时发生误判---分界线两侧数值发生了巨大的变化。作者：Robert Kosara，查看 原文。而通过观察其图例上的数值后发现并非如此，分界线两侧的颜色所代表的数值区间差均为 0.09，与其他颜色并无差异。这正是由于分界线两侧的颜色感知亮度有较大差异，以及不同色调之间过渡不均匀所导致的。通过这个案例我们可以看出来，很多对数据精度要求高的场景（如气象预测），在分析数据时，需要遵循一个很重要的原则就是保证颜色的客观性，降低颜色对数据分析结果的影响，降低解读数据时数值变化量误差（对应色彩变化量）。最后，总结一下，使用感知均匀的色彩空间可以让我们收获什么？它可以让设计师真正拥有明辨色彩是非的能力。在看似复杂的全量色板上客观、有依据的挑选合适的颜色（通过数值判断颜色是否合适而非阶梯判断），用以表达明暗、冷暖关系（如发散色板的构建），构建贴近工程化理念的配色方案（如动态顺序色板的构建）等。5. 如何选取感知均匀的色彩空间？在众多感知均匀的色彩空间中，选取适合我们的色彩空间需要满足以下几个基本条件：易于操作，最好是有成熟的工具或算法可以用来深入了解对比；颜色变量易于理解，最好能够像 HSL 等空间一样符合人类认知；可生成自定义数量的阶梯，且每个阶梯的亮度可以自由把控。① CIE 系列基于这些基本条件，我们首先排除了 CIELab（CIELuv 与之类似），其色彩空间由 L（感知亮度）、a（红绿通道）、b（蓝黄通道） 三个变量构成。L 变量是相对可控的，但 a、b 变量不符合人类的认知，类似于 RGB 调色板一样，不同的颜色是通过改变 a、b 变量中的红绿与蓝黄的量而得出的。但也不排除使用该色彩空间配色的可能，观赏一下。而 CIELch 是 CIELab 的极坐标转换，通过易于理解的 L（感知亮度）、C（色度，可简单理解为饱和度）、H（色相）三个变量来形容颜色。同时，生态也比较完善，有多种工具可以不同程度的帮助我们生成色阶，作为保留方案。② OK 系列OKLab、OKLch 针对 CIE 系列空间做了进一步优化，纠正了色相偏移（阿布尼效应）与色度对感知亮度的影响（亥姆霍兹-科尔劳施效应）。但这类色彩空间目前还处于早期阶段，生态不完善，兼容的场景也很少，仅有的工具也只能作为调色器（如这个工具 OKLch-Picker）使用。此外，在该色彩空间内，固定色相与色度的同时可覆盖的亮度区间要小于 CIE 系列色彩空间，超出限定区间的颜色又无法在 sRGB 色域内甚至任何设备上正常显示，用于生成色阶非常局限。所以，放弃之。无论使用任何色彩空间进行调色，我们最终都要保证所有颜色均能在 sRGB 色域内正常显示，这是底线。比如你使用了 P3 色域中的颜色，则会有部分用户的设备无法显示并自动取 sRGB 色域中相似的颜色来呈现，从而影响你的设计交付效果。③ HCTHCT 色彩空间是谷歌在 Material Design 3.0 中推出的新方案，基于 CAM16 色彩空间与 CIELab 色彩空间进行了优化，通过 H（色相）、C（色度）、T（光度，源自 CIELab 中的 L） 三个变量描述颜色。官方提供了在线配色工具，但使用该工具生成的黄色显脏，可用色阶少，且无法自定义色阶，许多颜色在色阶两端有丢色偏色的现象。但好在开源，我们可以借助其算法通过在代码中自定义 T 的数量及数值模拟我们想要的效果。单看生成的色阶效果其实还不错，也能够满足基本的使用需求。代码源自：Jony，查看 原文。import { argbFromHex, TonalPalette } from "@material/material-color-utilities";// 定义 tone 梯度const TONE_ARR = [0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 94, 97, 100];const createTonalPalette = (hex) => {// 将 hex 格式颜色转化为 argb 格式const argb = argbFromHex(hex);// 创建 paletteconst palette = TonalPalette.fromInt(argb);// 在 palette 上取一组 tone 梯度对应的颜色数组const colorArr = TONE_ARR.map((t) => hexFromArgb(palette.tone(t)));return colorArr;};其感知亮度变化也是相对均匀的（PS 灰度模式效果）。大家可能在很多教程里都看到过使用灰度模式（用词精确，非黑白模式）来模拟感知亮度变化。首先需要申明的是：在 PS 里，有一个图层叠加模式叫“明度”，在 Figma 里叫 Luminosity，总之使用这种方式来模拟的效果都是不准确的，推荐使用 PS 中的灰度模式来模拟，或者直接打印出来查看效果。那为何使用灰度模式来模拟呢？（这个问题并未找到科学靠谱的答案，属于猜测）相信大家在初次接触美术时都学过素描，通过简单的黑白灰来表达一个物体的光影、层次关系，而色彩会有很明显的情绪传达。所以，要想表达人眼对色彩亮度的感觉，是不是去掉“色彩”会相对客观一些呢？基于该结论，我们还会发现这种方式除了可以用来模拟感知亮度变化以外，还可以用来体现明暗关系（如视障用户无法顺利通过颜色辨别图形时可以依靠明暗对比来辨别），以及用来还原打印效果（打印数据图表分析数据）等。但有一个非常让人难受的缺陷：默认情况下 Key Color（或主题色）很可能会不存在于生成的色阶中，这就意味着需要不断去尝试取 Key Color 相邻的色值让其存在于色阶中，或者通过定义无限多的 T 数量及数值让其显露出来，这显然不符合我们“易于操作”的要求，放弃之。④ 结论其他调研细节就不在这里啰嗦了，总之，我们最终选择了 CIELch 色彩空间。至此，需要铺垫的内容也就告一段落了，接下来我们通过实战来看一下如何推导一套可视化色彩体系。二、全量色板推导整个色彩体系之前，我们已知的条件就是一个主题色。基于青云 QingCloud 品牌 VI 中定义的主题色，我们将其进行一个简单的色彩演变，降低饱和度的同时微调亮度使其更加适用于互联网产品但不脱离我们中立沉稳的品牌调性。这里需要注意，在做色彩空间转换时，尽量保证精确度，从而提升后期颜色推导的精确度。1. 基础 10 色① 24 基色基于 RGB 色彩空间，我们首先需要绘制一个标准色盘。通过正色取值法，以正红色为基准，间隔 15 取色，中间会覆盖正蓝（210）、正青（180）等颜色，得到一个标准的 24 基色。当然，这些颜色并不能直接拿来使用。与正色取值法对应的是主色取值法，以主题色色相为基准间隔 15 取色，得到一个色相偏移的 24 基色。但经过尝试，我们发现，该方案由于主题色色相的不确定性（经验复用时会发生），很有可能导致取出来的颜色“不当不正”，做颜色矫正的成本较高。② 8 基色基于生成的 24 基色，我们选取人眼最容易识别且符合人类认知的 8 个基准色：红、橙、黄、绿、青、蓝、紫、粉。这里取色的过程可以根据自己产品的调性对部分颜色特殊处理，如我们取的粉色就相对沉稳一些。③ 色相矫正虽然现在生成了 8 个基准色，但仍然不能直接使用。此时，我们需要结合一些条件对色相进行偏移。首先是保证视觉舒适度，如黄色、青色过于刺眼；其次是基准色之间要肉眼可区分；最后是生成的梯度色板之间也要肉眼可区分（如我们的主题色与绿、青基准色经过感知均匀的色彩空间转换后生成的梯度色板十分接近）。以上矫正过程需要结合后续的推导结果不断循环往复来回调整，直至符合要求。④ 色彩矫正前面我们花了很多篇幅介绍色彩空间，在这一步才真正得以体现。我们先将颜色转换至感知均匀的色彩空间，方便后续对色彩进行处理。转换至感知均匀的色彩空间后，我们根据主题色的感知亮度将其他颜色也设为一致，这是体现整个可视化色彩体系贴近品牌调性的关键步骤，因为我们会拿这些基色去生成全量色板。大家可能发现我们在这个过程中选用了 HCT 色彩空间进行转换（不是打脸哦），因其调色器工具能自动根据感知亮度调整色度致使各个颜色都保持和谐。当然，你也可以使用其他感知均匀的色彩空间来做转换，差异不大。此外，大家可能还会有疑问，黄色和橙色怎么像一样？为什么还放在这里？因为在真实使用场景中，色板里的颜色并不一定都能被使用到，这是其一。其二，颜色长的丑并不能否定它作为我们生成色阶的基准色。（后面的推导流程推翻了这个结论，但仍不能否定它存在于色板中）三步变化效果。⑤ 生成中性基色常用的中性色大家都知道有中性中性色和冷调中性色，结合品牌调性我们选用了冷调中性色。基于蓝色我们可以通过降低色度的方式扩展出中性基色。这里的中性色比较特殊，仅适用于图表图形中用以中和色调，而非用于文字、填充、轴线等场景的全局中性色。⑥ 相对亮度验证通过上面的步骤，我们得到了感知均匀的 10 个基色，我们使用 Chroma.js 中的相对亮度计算工具验证一下，方便我们基于这些基准色扩展色阶。这里引入了新的概念“相对亮度”，可以查看 W3C 相对亮度 的计算公式和 维基百科 对其的定义。大概可以理解为感知亮度的另一种表达，任意两个颜色的相对亮度值一致说明其感知亮度（HCT 中的 T 或 CIELab 中的 L）值也是一致的。白色为 1，黑色为 0。当然这里我们其实是无需验证的，因为在色彩矫正步骤 2.1.4 里已经基于 HCT 色彩空间将 T 设为一致了，那其相对亮度值也是一致的。我们验证的目的是为了配合后文会提到的 Chroma.js 工具及相对亮度等差数列生成色阶。2. 完整色阶首先需要判断一下需要多少个阶梯，通常情况下的阶梯有 7、9、11、13 几种，大家根据自己的需要选择。我们选择了 13 阶梯，一方面可以使色阶过渡细腻一些，另一方面也可以让取色范围更广一些。其次，谈起色阶就不得不说一下插值。插值的目的是为了获取一个有规律的亮度变化曲线，使色阶过渡均匀。通常的做法就是固定首尾两个点，通过一些算法或工具生成对应的贝塞尔曲线，也可以使用简单的等差数列来完成。而感知均匀的色彩空间有一个很大的特征就是：它的色彩空间是三维且不规则的，固定 L、C、H 三个变量并从中“切一片”下来放进二维平面中观察，你会发现它的形状是不规则的。固定其中任意两个变量改变第三个变量时，都会影响这个二维平面的形状，三者互相影响。这里有点儿考验大家的立体几何想象能力。这就意味着，不管你的亮度曲线是等差数列还是各种高大上的贝塞尔曲线，当你把曲线套进色彩空间中 360 旋转切换色相生成色阶时，曲线中的某些点说不定会跑出整个三维色彩空间。这就需要联动色度及色相一起做各种矫正工作，对设计师来说学习成本和操作成本是巨大的。我们想简化整个流程。前面我们定义好了 10 个基色，也得知其相对亮度值均为 0.287 左右，这就相当于定义好了整个色阶中的“中间”阶梯，我们按等差数列向上向下分别取不同数量的阶梯即可，之后借助现成的算法或工具帮助我们去做矫正工作。为什么基准色阶往右的阶梯要多一些？主要原因在于基准色阶的相对亮度较低，自然可以往亮处扩展的多一些。那为什么我们不在这个基础上间隔取样，使左右两侧的色阶数量相等看起来对称舒服一些呢？这是由于我们在扩展分类色板、顺序色板等时发现，经常需要按不同规律来间隔取样，这样划分会使我们的可选择余地多一些，不至于陷入亮色不够用，暗色又用不到的尴尬境地。通过调研了十几个工具后发现 Chroma.js 正好满足我们的需要。我们只需要选择合适的色彩空间，定义好 Key Color（基准色），定义好相对亮度等差数列即可顺利生成色阶。受 @少年游 的 文章 启发，这里插播一个知识点：韦伯-费希纳定律，可以解释我们为什么会使用等差数列来设计色阶。定律现象：人眼对亮色区域的颜色变化敏感度要高于暗色区域。按照传统的 HSL 色彩空间生成色阶时，需要在亮色区域将阶梯层级设计的细腻一些，也就是亮度变化度（非 L 值的直观体现，需要计算）要小于暗色区域，防止使用亮色区域相邻色阶时造成亮度变化过大的错觉。如图左，浅色按钮之间的变化度为 2.6 倍，而暗色按钮之间的变化度为 1.1 倍。而我们使用的感知均匀色彩空间就很好的避免了这个问题，只要保证颜色之间相对亮度值的变化量是一样的（等差），那就说明无论是浅色按钮还是暗色按钮他们之间的变化度也是一样的，如图右。① 基础色阶基于 Chroma.js，我们生成了大部分颜色的色阶。② 特殊色阶而当我们按照同样的规则去生成黄色与橙色色阶时，我们发现整个色阶过于偏“暗”导致可用阶梯非常少。于是，经过不断地尝试后发现：通过提升黄色与橙色的基准色感知亮度与色度则可以提升整个色阶的亮度与色度，并保持变化均匀。因此，针对黄色与橙色，我们选择基准色色彩矫正前的颜色（2.1.3 步骤中所得出的颜色）做为新的基准色生成色阶。这个过程由于色彩空间、算法等缺陷会导致部分颜色产生差异，但属于肉眼无法辨别的差异，还可接受。③ 色彩矫正现在，我们拥有一套完整的色板了。但仔细观察后发现，个别颜色有些不太符合我们的品牌调性，感知亮度或色度有些过了。我们手动压一压，微调得到最终的全量色板。（绿色因与主题色过于接近，去之）这些微调其实属于可以不调的程度，并不会在实际生产过程中影响自动化交付效果。3. 色彩验证生成全量色板后不意味着推导工作可以结束了，好的色板是要能经得住考验的，同时也是循环往复来回调整基色的必要过程。① 相对亮度验证全量色板中的每层阶梯颜色是否符合相对亮度标准，这也是检验色阶是否过渡均匀的重要手段。灰度模拟效果还不错，使用 PS 中的灰度模式模拟。亮度曲线分布一致，使用工具 Huetone 模拟。② 色差验证在感知均匀的色彩空间内，验证任意两个基准色之间的色差，其目的是为了保障视力正常的用户能够顺利分辨出两个颜色的不同。我们基于 CIE2000 标准进行验证，Delta E 18 即满足，可用工具 Color Contrast 进行计算。“18”这个值的说服力有待考证，暂以其为标准。CIE2000 较 CIE1976（目前使用范围较广） 在算法上进行了优化，描述色差更加准确。可以发现，部分颜色间的色差是不满足标准的（红字加粗部分）。首先我们这里校验的基准色都是可以直接拿来用在设计稿中或者用于后期推导其他色板的，所以校验目标颜色的亮度阶梯是固定的，如黄色取亮度 0.6 阶梯，橙色取 0.44 阶梯。所以，留给我们的选择就是改变色相与色度，通过微调的方式重新生成色板，使被校验的基准色达到色差要求。经过多次尝试，我们发现：如橙色，满足色差要求的同时整个色阶会偏向红色；而黄色，满足色差要求的同时整合色阶需要偏向绿色，结果会很脏，否则会更加偏向橙色不满足要求。最主要的原因是：感知均匀的色彩空间并不像传统色彩空间那样可以肆无忌惮的调出想要的颜色，加上工具和算法的限制会导致微调并不起作用，直观的体现就是换了其他相近的颜色但生成的色阶结果还是一样的。这个时候我们就需要做出取舍了，我们最终选择了保视觉效果而非色差，或许我们后续还有机会回头重新看待这个缺陷。无法满足 CIE2000 标准的颜色，也尽量保证满足 CIE1976 标准，推荐使用工具 iWantHue 计算。③ 色度分布观察所有颜色的色度分布趋势，我们会发现用来生成色阶的基准色刚好处于色度曲线顶点位置处，这是为何？猜测：根据色度分布曲线我们可以大致推测出 Chroma.js 算法的关键点在于基准色，你输入的基准色的色度会是最高的，然后依次向两侧色阶降低。那么，基于该结论，我们就可以知道为什么在步骤 2.2.2 中生成的黄、橙色阶是不理想的了。因为你把整个色阶里的最高色度点定的太低了，以至于使整个色阶偏“暗”。这也反向验证了我们选择色彩矫正前的黄、橙色作为新基准色的做法是可行的。说通俗一点儿就是：选择用于生成色阶的基准色，一定要视觉舒适，要“漂亮”。举个不太恰当的例子，如果你的基准色可以直接拿来用在设计稿中，那么它大概率就是一个合格的基准色。最后，我们来对比一下我们的可视化色板（CIELch）与设计系统色板（HSB）的色阶过渡效果。灰度模拟效果。三、分类色板用于表示可视化场景中的不同类型的数据。1. 竞品分析我们参考知名可视化产品 ColorBrewer2 中的分类色板，通过分析其不同主题中的色彩规则来制定我们的分类色板。主题一：三套不同亮度的色板，最多 8 种颜色，色相一致，适用于不同场景，同时也适用于不同品牌调性，如清新、沉稳、复古，思路值得借鉴；主题二：两套不同亮度的色板，最多 9 种颜色，与主题一原理类似，后续扩展主题时可借鉴；主题三：相邻颜色色相一致但相对亮度明暗交替，最多 12 种颜色，适用于多数据类型的场景，可以借鉴；主题四：没搞懂原理及用途，先放之；主题五：整体偏亮，最多 12 种颜色，相邻颜色色相不一致但相对亮度明暗交替，所以也适合多数据类型场景，思路可借鉴。结合其他可视化产品，我们确定了接下来要做的事情的一些基本思路：通过某种取色规则制定不同风格的分类色板，根据其效果选择一套适合我们品牌调性的；分类色板要兼容多数据类型和少数据类型；少数据类型时，相邻颜色色相不同且明暗交替；多数据类型时，相邻颜色色相相同且明暗交替。2. 生成色板① 风格确定与基础色板分类色板颜色主要考虑明暗交替变化（兼顾视障用户群体），其次考虑色彩美观度及颜色间的对比是否协调，如黄、橙色不脏，中性色不能太深或太浅等。我们一步步来，先把风格确定一下。在全量色板上，我们以主题色所在的相对亮度阶梯为基准，通过明暗交替的方式排布取色标准点。在进行明暗交替取色时，取更暗还是更明，主要取决于色彩美观度及颜色之间协调性。再以相同的规则，将取色标准点整体向上向下偏移取出相对较亮和较暗两种风格的色板。当然，如果你想要更亮或者更暗的风格，改变偏移量即可。较亮。较暗。至此，我们得到了三套不同风格的基础分类色板，结合我们的产品调性，并在实际使用场景中进行验证，我们选择了相对沉稳、中立的版本。灰度模式模拟效果。色相相对亮度分布示意。② 扩展色板前面提到过，分类色板还需要兼容多数据类型场景。如我们现在的基础色板中有 9 种不同的颜色，如果一张图表需要用到 10 种颜色该如何解决？常用的解决方案是将生成的基础色板颜色循环使用，如 Echarts，但这种方案有一个很大的弊端就是会出现首尾颜色相接无法正常区分的情况。因此，我们决定基于基础色板按相邻颜色色相相同但明暗交替的规则衍生出一套扩展色板。注意观察，基础色板中的蓝、红、青、粉色相对亮度值为 0.36，而扩展色板中却为 0.287。这是由于基础色板颜色需要满足明暗交替原则，而对应到扩展色板中时，相邻颜色已为明暗交替的同色相颜色，因此无需再将所有暗色都处理成明暗交替。扩展色板使用效果。③ 关于使用顺序在风格确定步骤中，大家可能会有疑问：取色标准点怎么排布看懂了，但要得出分类色板，还差一个必要条件，那就是不同色阶的摆放顺序。其实这个摆放顺序就是分类色板中的颜色使用顺序，这个顺序至关重要，为何？首先，无需过多解释的就是：顺序不一样，意味着分类色板不一样，这是不同可视化产品之间差异化体现的重要途径，也就是我们前面提过的 体现整个可视化色彩体系贴近品牌调性的另一关键步骤。其次，基于分类色板的特性我们可以明确的一点就是：这个顺序是固定的，不能随意更改，否则会破坏整个产品的视觉和谐度。你不能说环形图用顺序 1，玫瑰图用顺序 2，或者这个页面环形图用顺序 1，另一个页面环形图又用顺序 2。最后，这个顺序会直接影响取色标准点的排布。顺序的不同，意味着原本应该取的暗色却变成了亮色，导致整个分类色板明暗变化产生差异。看到这里大家可能会发现，这正是用来生成不同主题的好手段啊！至于如何决定这个顺序，应该是仁者见仁智者见智并无对错的，这里只阐述一下我们的确立依据：第一位是主题色绿，其次为蓝色。一方面考虑使用绿、蓝等偏中性的颜色可以保证大多数图表在页面中不会突兀，另一方面也能够兼容大多数 B 端产品的色彩基调。其次为避免页面过于单调冷淡，所以加入暖色--黄色中和。约定成俗的语义色就是红、黄、蓝、绿，所以考虑将红色也加进来。不过红、黄色相邻的话会使色板变得过暖，可以在其中间加入偏暖的中性色-紫色来使其过渡均匀。此时整个色板呈现冷-暖变化趋势，紧接着需要回到冷趋势，同样为了避免发生冷暖突变，我们加入绝对中性色--灰色来中和，顺位往下走就只剩青色可选了。接着就是暖色橙色，而粉色是个轻佻暧昧的颜色，使用时稍有不慎就会轻易打破整个页面的风格，所以放在最后，整个色板的顺序就定下来了。此外，除了考虑颜色自身冷暖属性、语义属性外，还需要考虑识别度、视觉歧义、视障等因素。如从识别度角度考虑会使橙、黄色不相邻，绿、青色不相邻；如从视障角度考虑会使红、绿不相邻，粉、青色不相邻等。最后，需要申明的观点就是：可视化场景仅靠颜色是解决不了所有问题的，这其中需要设计师有能力将复杂的视觉问题和交互问题进行简化、合理化，如使用恰当的图表，使用纹理图形辅助识别，重组数据便于理解等。图片源自：Matplotlib。3. 色彩验证① 视障验证视觉障碍用户群体主要是色盲色弱用户，根据 Color Oracle 的统计，全世界人类中，绿色盲占比 5%，红绿色盲占比 2.5%，蓝黄色盲占比 0.5%。我们需要保证的就是尽可能让这部分群体也能够无障碍使用我们的产品，无障碍解读数据。② 色差验证步骤 2.3.2 中详细介绍了色差的验证方式以及验证目的，这里不赘述。4. 应用不在实际业务场景中验证颜色的行为个人认为就是在耍流氓。① 使用规范实际应用时发现，图表类型众多样式差异巨大，统一使用全量分类色板中的 9 个颜色并不合适。如折线图，其图形（线段）视觉占比非常小，通常是 1～2px 粗细的线段。使用全量分类色板时，部分颜色（如橙色与黄色，红色与粉色，绿色与青色）虽能顺利辨识，但长时间查看会产生视觉疲劳导致辨识困难。此外，在 Dashboard 或 BI 等场景中，通常会遇到数据量大，图表类型繁多，数据类型繁多的情况，此时的页面视觉效果将是灾难级的（使用 Echarts 主题定制工具模拟）。因此，针对常规场景，遵循少即是多原则，我们去除了可能会无法辨识的颜色，将可用颜色数量限制为 6 个。特殊场景不做限制，如桑基图。超出 6 种数据类型时，使用分类色板扩展色板，共 18 个。超出 18 种数据类型时，使用强调色板。② 应用效果这里使用屏幕截图，所以效果会出现些许偏差。四、顺序色板通过亮度变化均匀的一组颜色表示具有顺序、梯度、频率等关系的数据。1. 固定色板顾名思义，固定色板即色阶数量有限的色板，用于数据阶梯较少的场景。可基于两个准则确定顺序色板：色阶亮度层次拉开；色阶使用顺序明确。因此，从全量色板中选取色阶时需要注意，亮色区域间隔取色，保证数据阶梯之间能够清晰分辨。基于此，确定我们的 7 阶固定色板。最亮阶梯不满足对比度要求，用于图表中可能无法识别；最暗阶梯无法顺利辨别多个颜色之间的区别，也应避免使用。而明确色阶使用顺序时，除要考虑遵循规律（方便开发实现）外，还要考虑页面和谐。通常的做法是从最亮阶梯开始往上取，当数据阶梯比较少时，其效果其实并不是我们想要的。因此，我们改变一下这个顺序：从中间阶梯（主题色所在的阶梯）开始往下取，取完再依次往上取。该方案仅供参考，目前尚未与研发同学达成共识验证其可行性。最终，我们得到一个包含使用顺序的色板（从左往右依次对应数据阶梯数量）。应用效果（以主题色为例）。2. 动态色板动态色板主要应对数据阶梯量大且不可预知的场景，因此需要借助算法根据数据分布阶梯自动生成对应的色阶。设计师仅需提供最亮、中间及最暗的三个颜色即可。因应用场景区别于固定色板的应用场景，所以动态色板会使用到全量色板中的最亮和最暗阶梯。当然你也可以选择使用与固定色板相对应的最亮、最暗阶梯，本质上设计师提供的三个颜色都是可以自定义的。应用效果（以主题色为例）。五、强调色板与分类色板相对应，当分类数据较多时，或需对比数据时，通常会使用强调色板强调数据，弱化无关数据。1. 取色规则基于全量色板，以基准色作为强调色，向下扩展对应的弱化颜色。注意，与分类基础色板不同的是，通常情况下的强调色不会同时出现，因此无需考虑明暗交替；其次，与分类扩展色板不同的是，因分类扩展色板需要考虑对比度，这里则需要尽量弱化，所以弱化色亮度要高于分类扩展色板。2. 应用效果六、发散色板用来表示具有正负、高低、涨跌等关系的数据，拥有临界中间值，因此通常使用一对冷暖色来呈现。1. 取色规则首先，根据发散色板表达数据对立关系的特性，我们在选取对立冷暖色时，可以通过模拟视障效果来排除掉一些可能会出现问题的颜色。我们选取了既可以表达冷暖关系又不会出现问题的三组颜色，以及表达中立的一组颜色。其次，由于发散色板的使用场景与顺序色板类似，因此我们可以基于全量色板扩展出对应的固定色板。并使用 Chroma.js - chroma.mix 工具将对立相接的两个颜色进行混合，使其过渡更加均匀。视障用户效果模拟，既不能混淆颜色，又不能改变原冷暖关系映射。而为了应对数据阶梯量大且不可预知的场景，我们可以基于固定色板扩展出动态色板，与顺序色板动态色板原理类似，本质上是一组渐变色板，数据阶梯分布区间有多少，则可以在渐变色板上插对应数量的值。此处再次体现感知均匀色彩空间的优势，渐变色过渡也是非常自然的。2. 应用效果可视化效果使用 Datawrapper 模拟。3. 色相偏移关于发散色板的生成，其实还有一种使用范围更广的色相偏移色板，相对无色相偏移色板来说过渡更加自然，更加符合人类对色温的认知。也就是常说的随着色阶的变化冷色会更冷，暖色会更暖。先来看下对比效果：我们的方法是取三种不同暖色中的关键色与三组不同冷色中的关键色，使用 Chroma.js Color Palette Helper 进行混合，生成新的色相偏移色板。但使用该方案并不能生成所有想要的色板，因为我们的一个大前提是所有颜色取至全量色板。如在生成红-蓝发散色板时发现，并没有合适的三组暖色供我们选择用来取出关键色，这就会导致生成的色板偏色严重无法使用。所以，个人猜测，未来一方面应该向更科学合理的色相偏移方案探索，另一方面在该场景中不应将取色标准局限于全量色板。由于我们的产品中很小概率会使用到发散色板，所以这里不做深入研究，也避免误导大家，就此打住。七、语义色板可视化场景中不受主题、风格影响的颜色，是约定成俗具有特定寓意的颜色，通常用于表示告警等级、正负关系等。1. 取色规则关于语义色板的取色来源颇受争议，一种方案是直接选取设计系统中的语义色，另一种是从可视化全量色板中选取并重新定义。其实两种方案各有优劣，关键在于如何客观评判。我们选择从可视化色板中选取并重新定义的理由如下：设计系统色板的色彩空间与可视化有本质区别，无法做到统一；设计系统中定义的语义色感官上饱和度及亮度与可视化色彩不统一，融入可视化场景中不和谐；图表中的元素形状面积通常占比较大，与其他颜色的元素搭配时，使用可视化色彩会更协调；设计系统中的语义色从使用场景、设计思路等角度考虑的话，会与可视化场景有细微差别，解耦设计更合理一些。注意灰色语义色取至中性色板，后面会解释原因。2. 应用效果八、中性色板中性色板用于可视化图表中的标题、轴线、文字等场景，与设计系统中性色板保持一致，这里不做特殊定制。上文提到过，为何中性色板区别于语义色板，可以与设计系统共用呢？首先中性色板本质上都是中性色，应该区别于“有色彩”的颜色。那么，从其使用场景上来看，中性色板可以不受系统限制，独立于设计系统或者可视化组件库以外，成为一套公共的色板；其次，从使用者角度来考虑，中性色板可以说是使用范围最广的，这就形成了肌肉记忆，不再适合重新开辟一套来给大家造成记忆负担；再其次，从页面效果来看，理想状态还是所有中性色保持一致，不能说承载图表的卡片标题是一个颜色，而同级别非图表卡片标题又是另一个颜色；最后，从底层色彩空间来看，中性色是不受色彩空间限制的，可以通用于各种不同色彩空间搭建的系统中是必然的。九、总结总之就一句话，关于颜色的探索是永无止境的，随着探索的不断深入，越发觉得距离踏入门槛是越来越远了。本篇来源：优设网原文地址：https://www.uisdc.com/derived-visual-color
洋红 色彩 非凡 每年12月初，潘通都会踩着点发布第二年的流行色。而就在昨天，全新的 2023 年度流行色 「非凡洋红」正式发布，正式名称为 Viva Magenta。但是这次年度色的选取逻辑和呈现形式上，又有很多出人意料的点。往期回顾：潘通2023年春夏流行色已发布！这个方法帮你把流行色用起来！大家好，这里是和你们聊设计的花生~9 月初，国际知名色彩权威机构 Pantone 为时尚界发布了 2023 年春夏色彩趋势报告，确定了十大最引人注目的颜色，以及适合时装设计师推出新作时使用的 5 种经典色彩。阅读文章 > 「一个勇敢无畏、令人悸动的色彩……生机勃勃，跃跃欲动……鼓励实验精神和无拘无束的自我表现；一个令人振奋，跨越疆域的色彩……大胆，慧黠及包容一切，Pantone 18-1750 非凡洋红拥抱每一个拥有反叛精神的人。」潘通每年的年度色本身并不只是一个单纯的颜色，作为全球最有影响力的色彩体系，潘通所筛选出来的年度流行色，能够反映当前的色彩审美偏好，而且还会指明一些设计趋势。色彩来源潘通色彩研究所（Pantone Color Institute）行政总监 Leatrice Eiseman 说：「Pantone 18-1750 非凡洋红 出身红色系家族，灵感来自胭脂红，胭脂红是天然染料家族中，最珍贵的染料之一，也是目前世界范围内已知最强烈、最亮眼的天然染料。Pantone 18-1750 非凡洋红源自天然原声性的物质，这种色彩也将我们和原始之物重新连接。它感召自然的力量，刺激我们的心灵，帮助我们构建内在的支撑力。」从某种程度上来说，非凡洋红 这个颜色其实已经在美容产品当中有足够广泛的应用：特征 + 延续很明显，2023 的非凡洋红 和 2022 年的年度色长春花蓝有着非常微妙的关系。「潘通年度代表色的教育性色彩计画史上首度打造一个新色彩，以反映正在发生的全球创新与转型。……这个注入红与紫的新的蓝色调具有的复杂性，正突显了在我们面前展开的广大可能性。」代表着可能性的长春花蓝是一个代表着可能性、介于紫和红之间的色彩，它含有「选择」之意，而 2023 年的非凡洋红无疑是「选择的结果」，放弃紫色而步入更加具有反叛精神，更加激烈的色相。长春花蓝和当下热门的元宇宙有着紧密的关系，电子游戏的持续流行和日益火爆的虚拟数字空间，正是长春花蓝的来源，它既代表了多元融合的虚拟赛博空间，同时也在现实世界中流行，从色相到应用场景，它都有着暧昧而模棱两可的属性。面向 2023 年的非凡洋红则不同，它的洋红色相从长春花蓝中延伸而来，之前似是而非蓝紫色相变成更加笃定的洋红，激烈而明确。其实这种趋势在去年就已经体现出来了。室内设计领域的资深专家 Michelle Ogundehin 就曾在 Dezeen 上发文批评长春花蓝过于温吞，「是时候考虑让年度色更加狂放欢脱一些了」，她在文中写到。「随着虚拟世界，逐渐成为我们日常生活的一部分，我们同样也期望从自然与真实中获得灵感。」—— 潘通色彩研究所行政总监Leatrice Eiseman「我们正在创造一个鼓励实验的动态世界，在实体领域当中运用虚拟激素，壮大我们的心灵和力量，发掘突破以往的各种可能。」——潘通色彩研究所副所长 Laurie Pressman长春花蓝的灵感源于虚拟的元宇宙，而非凡洋红则更进一步，希望从现实世界的自然色彩入手，寻找惠及真实和虚拟两个世界的流行色。人工智能 + 元宇宙这次潘通携手 Huge 借由当下我们所熟知的人工智能工具 Midjourney ，创造出带有 Pantone 18-1750 非凡洋红视觉张力的人工智能艺术品，并打算以此为基础，拓展出带有强烈色彩属性的「洋红元宇宙」（Magentaverse）。这种呈现方式在此之前是没有过的。关于这款AI绘画神器：人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器大家好，我是和你们聊设计的花生~有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。阅读文章 > 不过有个有意思的事情是，这个拥有着自身「元宇宙」的色彩一点都不「蓝」，很多人都很好奇强力推动元宇宙甚至为公司更名为 Meta 的扎克伯格是怎么想的。VF：「实际上，想想扎克伯格进入洋红元宇宙之后的样子我就笑到停不下来。不过无论如何，起码他身上的灰色T恤的格调会被拉升起来。」品牌合作+应用当然，对于普罗大众而言，元宇宙不够触手可及。所以，在这个「洋红元宇宙」之外，潘通还联合诸多品牌和合作方，在迈阿密巴塞尔艺术展上展出一系列「联名合作款」产品，来呈现这一颜色的独特魅力，其中还包含一个和 Artechouse 共同完成的沉浸式艺术展。潘通和摩托罗拉共同合作完成了一款 motorola edge 30 fusion 联名款，你可以在展览上借助这款手机进入「洋红元宇宙」。此外，潘通还和 Spoonflower 的 6名艺术家共同合作，为非凡洋红定制一系列的配色方案，并且会在 12 月份开启 4 项设计挑战。而著名的滑板鞋品牌 CARIUMA 这回也和潘通一起联名了 6 个款式，2023 年度流行色会直接出现在这些鞋的主体设计当中。当然，大家最在意的还是这个颜色如何在实际的数字设计、印刷品当中使用，官方也给出了相关的参数：当然，潘通还有针对性地推出了各种功不同的色卡和工具，来应对不同设计师的需求：结语 像 非凡洋红 这样饱满又醒目的颜色，在很多设计当中都被用作提亮色，鲜少大面积使用。不过就在此刻，就在当下，大家对于明艳色彩的期盼无疑是极为强烈的，非凡洋红适时的出现，倒是非常符合此刻大家的情绪和对未来的期待，2023 年的视觉设计，应该也会相当明亮精彩。本篇来源：优设网原文地址：https://www.uisdc.com/viva-magenta-2023
明度 纯度 色彩 色彩明度与纯度的 4 种类型配色，你知道吗？之前为大家介绍了 PCCS 色彩体系，提到了 PCCS 色彩体系中的各项概念：24 色相环、17 级明度阶梯、10 级纯度阶梯及 12 种融合明度和纯度两个概念的色调。配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。阅读文章 > 为了帮助大家更好的理解 PCCS 色彩体系中的各个色彩概念，将其运用到今后实践中，今天带大家更深入地了解 PCCS 对色彩明度和纯度的分类，看看不同明度和纯度的色彩搭配会呈现什么样的效果，以及哪些方法可以帮助我们取得更好看和谐的配色。明度——高明度与低明度PCCS 色彩体系将明度分为 17 级，每 0.5 级为一个阶梯。为了方便理解，我们也可以粗略地分为 9 级，黑为 1.5，白为 9.5；以 5.5 级灰为中间点，1.5~5.5 为低明度，5.5~9.5 为高明度。明度差越大颜色对比越明显，明度差越小则对比越弱。1. 高明度的色彩配色高明度色彩区域包含的色调有：pale（稀薄的）、light（浅的）、bright（明亮的）、light grayish（浅灰的）、soft（柔软的）、部分的 vivid（鲜的）和 strong（强的）。使用高明度的色彩进行配色令人感觉明亮，存在的问题是明度差有限，容易造成对比不够强烈，无法突出重点。所以想要使高明度配色的画面层次对比明显，更有视觉吸引力，可以加入少量的暗色。2. 低明度的色彩配色低明度色彩区域包含的色调有：dark grayish（暗灰的）、grayish（灰色的）、dull（钝重的）、dark（暗的）、deep（浓的）、部分的 vivid（鲜的）和 strong（强的）。低明度的色彩配色会给人暗沉的印象。如果想避免画面过于灰暗沉闷，可以加入少量高明度的色彩，画面会更充实更有活力。纯度——高纯度与低纯度PCCS 色彩体系将纯度分为 10 级，无彩色为 0s，纯色为 10s。但是 10s 是用色卡无法再现的颜色，所以色卡中的纯色是 9s。1. 高纯度的色彩配色高纯度色彩包含的色调有：vivid （鲜明的）、bright（明亮的）、strong（强的）、deep（浓的）。其中 vivid 为准高纯度色，其余为次高纯度色。高纯度的配色给人灿烂华丽的感觉，充满活力；而加大高纯度色之间的明度差则可以让画面层次分明，视觉上更舒适。2. 低纯度的色彩配色低纯度色彩包含的色调有：pale（稀薄的）、light（浅的）、light grayish（浅灰的）、soft（柔软的）、grayish（灰色）、dull（钝重的）、dark grayish（暗灰的）、dark（暗的），其中 light、soft、dull、dark 四个色调为准低纯度色彩，其余为次低纯度色。低纯度的色彩组合带来沉着稳定的配色，给人朴素雅致的印象。这类颜色搭配在一起不会显得突兀，但是想要画面更出彩更有吸引力，则需要拉开色彩间的明度对比，或加入适量的高纯度色彩。明度与纯度的 4 种类型配色将明度与纯度联系在一起研究，我们可以将其分为 4 种配色类型，分别是高明度/高纯度、高明度/低纯度、低明度/高纯度、低明度/低纯度。1. 高明度/高纯度配色高明度/高纯度色彩搭配在一起会十分的鲜艳明亮，和上面提到过的高明度配色一样，这个区域的配色要注意拉开明度层次，以避免颜色分界不清带来的视觉疲劳。2. 高明度/低纯度配色高明度/低纯度的颜色搭配在一起不会显得花哨也不会过于沉闷，给人温润淡雅的感觉，搭配一些暗色使用会使画面更完整丰富。3. 低明度/高纯度配色低明度/高纯度的颜色搭配给人浓郁厚重的感觉，区域内包含了一部分 vivid 的色调，搭配使用也能使画面充满活力。4. 低明度/低纯度配色低明度/低纯度的色彩都比较暗沉钝重，给人阴郁压抑之感，但是如果运用得当也能传达出深刻厚重的情绪。如果想这种配色看起来不那么压抑，可以加入一些高明度/高纯度的色彩，画面也会更有吸引力。总结不同明度、不同纯度的颜色搭配组合会产生不一样的效果，给人的感觉也不一样。通过文章我们了解了明度与纯度的 4 种类型配色，它们对应不同的色调，能营造不同的情绪氛围，因此各自适合不同的主题。将这些弄清楚，以后在确定配色方案时就能有的放矢，更快更准确的找到合适的配色。喜欢的小伙伴记得点赞收藏加关注，今后会继续为大家带来更多有用的色彩知识！4000字干货！从零开始帮你提高配色水平！赶在年前将这篇关于“配色”的设计解析整理了出来，分享给大家，希望对大家有帮助。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/color-value-and-purity
明度 调色板 色彩 最近我在想一个问题：假如设计师负责一款全新的产品，不受已有规范的束缚，我们该如何定义产品的色彩体系呢？有些设计师可能会凭自己的主观想法定义色值，觉得这个颜色在界面里好看就用了，但是我觉得这样是不够规范的，更多应该考虑到全局的通用性和科学性。基于这个问题点，我网上查看研究了一些资料文章，参考了 Ant Design 和 Material Design，学习到了一些定义色彩 ID 的理论知识，来看看吧。色彩色彩是设计系统的重要组成部分，可以使用在品牌感、信息层级、操作指引、交互反馈的场景。在细分层面，色彩可以分为主色、辅助色和中性色。设计师调整颜色的时候，建议使用 HSB 模式，调整色彩更直观，符合心理预期，因为人脑也是通过这个模式来辨别颜色的。其中，H 代表色相，S 代表饱和度，B 代表亮度。色相是区别各种不同色彩的标准，通过 360圆形色环来取色，每一度代表一个色相。饱和度指色彩的纯度，饱和度越低，越往白色过渡。亮度指色彩的明亮程度，亮度越低，越往黑色过渡。学会HSB色彩模式，让配色有理有据！念起作为一名 UI 设计师，不免每天都会和色彩打交道，但有时总会苦恼于色感把握不准，让我们配的色彩，总是“不对味儿”。阅读文章 > 这是常用软件 HSB 模式调整颜色的截图，帮助大家理解。主色主色一般和产品的品牌色相关联，很大程度决定了产品整体的调性和视觉风格，常用于主按钮、文字高亮、强调操作等界面场景。产品 1.0 版本以上，Logo 一般都会有定义好的品牌色，界面设计中的主色和品牌色保持一致即可，可以传递统一的理念。如果从 0 开始的新产品还没有定义 Logo 和品牌色，界面要先设计开发，这时我们可以结合产品行业特性、产品理念、产品名称、用户特征等进行思考，提取关键字和情绪板，从而提取多个色系，最终和多角色沟通确定主色系，避免后续反复调整的成本。确定主色系后，设计师该如何定义具体色值呢？可能大部分设计师都是直接吸取同色系的大厂产品色值，再微调下参数做出差异性就确定了。这确实是一个取巧方法，毕竟不容易出错。但我觉得设计师需要有自己的思考过程，所以进行了国内外大厂产品主色的调研分析，总结了一些共同点和差异点。我发现 Apple 系和国内产品的主色倾向于饱和度和明度较高的颜色，基本分布在横竖向三等分的右上角，我认为主色取值可以参考这个区域。看下部分产品字色、按钮色、深色模式的效果，还可以。而谷歌系、微软系产品倾向于明度稍低的颜色。从设计层面来看，颜色有点暗、有点脏，不太建议。我有点不太理解国外设计师的视觉审美，研究了 WCAG 2.1 无障碍标准后，才发现他们在为障碍（色盲）用户着想，主色都符合 WCAG 2.1 的 4.5:1 最小对比度（AA 级）。这个标准涵盖了使 Web 内容更易于访问的各种建议，遵循这些准则将使更多残疾人更容易获取网站内容。从分析的国内产品中，我只发现知乎的主色符合这个标准。这其实就引发了我们的思考，视觉效果和无障碍人群体验，哪个更重要呢？我觉得两个层面都挺重要的，不过在实际场景中，建议设计师更多是结合品牌调性、视觉效果去定义具体色值，在美感、可读性、可用性之间得到平衡。注意一点，明度不宜太低，颜色会比较脏，也不太符合年轻用户的审美。如果我负责一款产品，已经确定蓝色系为主色，我会选择明亮一点的色值，在文字、按钮、深色模式等常用场景下保证可读性和可用性。色值定为#247FFF，后面讲辅助色的时候会用到。辅助色辅助色，可以用于特定功能、状态反馈、应用图标等场景，反馈的成功、失败、警告状态最常用到了。基于主色，我们怎么定义辅助色呢？我总结了点小方法。1. 以主色的色相为基础，差值为 15，围绕 360色环提取 24 色。（差值 15的颜色属于同类色临界点，有利于我们划分色度层级，又不会失去想要的色系）2. 参考常用配色理论：相似色、邻近色、三分色、互补色，得出部分色值。3. 结合界面场景和使用效果，对颜色进行删减和补充，最终确定所需要的辅助色。（建议最多 12 种，避免色彩太多，不利于设计师理解使用）4、将辅助色和主色对比，进行视觉感官明度校正。（虽然色彩的饱和度和明度一样，但不同色相的视觉感官明度是不一样的，绿色、黄色、青色实际看起来特别浅，所以我们要手动调整）校准方式：在颜色上面叠加纯黑色图层，图层模式选择色相，就可以直观地看到无彩色视觉感官明度。相差大的颜色可以以 5 为差值调整饱和度或明度，最后再根据效果进行微调。（色相的差值能被 5 整除，饱和度和明度同样适用）调色板为了满足界面对色彩的需求，需要对主色和辅助色进行色板延伸，建立不同梯度的调色板。这里有两种计算方法：1. 浅色调色板，在颜色上依次叠加 20%、40%、60%、80%、90%不透明度的白色；深色调色板，在颜色上依次叠加 20%、40%、60%、80%不透明度的黑色。2. 浅色调色板，色相（H）往感光明度高的色相依次差值 2，饱和度（S）依次减少 15，明度（B）依次增加 5；深色调色板，色相（H）往感光明度低的色相依次差值 2，明度（B）依次减少 15，饱和度（S）依次增加 5。（Ant Design 和 Material Design 调色板也都加了色相旋转）。从对比效果来看，比较建议使用第 2 种方法，使用 HSB 模式的值进行递减/递增得到完整渐变色板，颜色更加明亮通透。Ant Design 官网也有在线生成调色板功能，和第二种方法逻辑类似，可以快速生成，大家可以去使用。最终生成主色和辅助色的调色板，效果如下。中性色中性色包含黑、白、灰，合理地使用中性色能够使界面信息层级主次分明，助力于浏览体验，常用于字色、控件色、背景色的场景。由于纯灰色显得比较脏，人眼对偏蓝的灰色阅读体验更好，在桌面端更建议使用灰色相加点蓝。计算方法：1. 选择和主色视觉感官明度相同的灰色，按调色板方法建立梯度色板。2. 将蓝色调色板不透明度调为 10%，灰色调色板不透明度调为 90%，两个色板叠加，最后吸取颜色，再加入黑白两个色板，就确定了从白到黑的 12 种颜色。最终，我们就确定了一款产品的色彩体系，界面中使用的颜色需要遵循调色板色值，一致性设计。总结以上就是设计系统中建立色彩体系的思考总结。设计师调整颜色时，建议使用 HSB 模式，调整色彩更直观，符合心理预期。主色需要结合品牌调性、视觉效果定义具体 ID 色值，在美感、可读性、可用性之间得到平衡。注意，明度不宜太低，颜色会比较脏。辅助色、调色板、中性色定义 ID 色值过程中，建议遵循一定的色彩理论准则，科学地定义颜色，更有说服力。还有许多不足，继续学习去了。参考文献：Ant Design 设计系统 – 色彩Material Design 设计系统 – 色彩Ant Design 色板生成算法演进之路Web 内容无障碍指南 (WCAG) 2.1找不到配色灵感？试试这个把想法变成配色板的Picalette如果想寻找和颜色有关的灵感，我之前介绍过不少配色工具，可以通过各种方式产生需要的颜色组合，像是Palettable 以互动方式来找出最合适的配色组合：[link https://www.uisdc.com/color-matching-artifact-palettable]阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/color-order-system
颜色 色彩 网站 如果想知道某个网站配色方式，除了打开开发人员工具或是检视源码，也有第三方服务可以使用，即使无法完整复制别人的配色，也能快速得知网站使用的颜色代码或配色模式，取得颜色的色码或色彩名称。有没有任何更直觉、简单的方式来完成这些工作呢？若你有类似的需求，接下来要介绍的服务或许可以满足，这项服务会提取特定网页使用的颜色，让颜色相关信息更一目了然。本文要介绍的「Alwane」是一个网页色彩提取工具，可以在使用者输入特定的网址后取得该网站使用的颜色代码或描述，产生为调色盘链接，重新分类、编排各种颜色，最简单的使用方式是输入网站网址就能提取，也能显示其他相关色彩，如果想分析、保存某个网站或品牌使用的颜色，Alwane 是个非常方便而且好用的工具。除了将提取的颜色代码以可视化方式呈现，还能够以调色盘或是程序代码方式呈现，包括 CSS 和 SASS 两种显示程序代码，对于要取得特定的网站颜色来说很有用，若有类似需求的话不妨打开 Alwane 网站试试看。Alwane网站链接：https://alwane.io/使用教学开启 Alwane 网站后直接在左上角「Extract CSS Colors」输入要提取颜色的网址，预设情况下会从 HTML 和 CSS 样式表单取得颜色，如果某些情境下需要从 JavaScript 获取颜色可在「Advanced」设定选项找到。从提取后的色彩结果可以看到各种颜色分布，包括颜色的预览、变量名称和色码（hex code），从左侧可选择为颜色重新分组、排序或是切换 CSS、SASS 色码。从上方选项切换调色盘或程序代码模式，也能快速将所有 CSS 代码复制到剪贴簿。如果想要保存或分享网站的配色、调色盘、CSS 等信息，点选右上角「Generate」就能产生链接咯！值得一试的三个理由：Alwane 网页色彩分析工具，输入网址就能提取网页出现的颜色从 HTML、CSS 和 JavaScript 获取色彩信息查询结果会有颜色预览、变量名称和色码，也能切换为程序代码模式配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/alwane
灵感 色彩 颜色 提到设计灵感网站，Pinterest、花瓣、Behance、Dribbble 这些大家都非常熟悉了。今天向大家推荐一个有强大颜色搜索功能、灵感分类更全面好用的灵感社区 Designspiration，看看它的特点及它强大的色彩搜索功能如何帮助我们更好地进行设计。Designspiration 的网站主页便捷的功能分区Designspiration 会让用户在注册时预先设置 5 个领域偏好，然后按照用户偏好在主页上进行个性化推荐。但是用户并非只能这样被动的接受推送，Designspiration 在用户主页上和 Home 并列设置了 Popular、Everthing、Topic 几个分区。在 Popular 可以看到近期最受大家欢迎和专注的灵感创意；在 Everthing 中可以浏览网站涉及到的所有设计灵感，突破当初设置好的偏好限制，帮助大家更好地拓展视野；Topic 中则可以看到网站按不同主题收录的灵感创意，各类主题应有尽有，让用户更自由、更有针对性的寻找创意。超强大的色彩检索功能Designspiration 设立的重点之一就是构建独有新奇的色彩工具，这也是他区别于其他灵感网站的特色所在。1. 指定配色搜索Designspiration 在主页搜索栏右侧有一个调色盘小图标，点击后就是一个颜色面板。我们可以在颜色面板上任意选择至多 5 种颜色，然后就可以搜索以这种配色为主的所有灵感。在搜索栏选择配色指定配色搜索结果2. 色彩关联搜索点进一个灵感详情页，我们会发现右边有一个小色环和一组配色，是网站根据此灵感的配色自动生成的。点击色环，我们会得到的所有类似配色的灵感。我们还可以更改原有配色中的一种颜色，得到全新的推荐。如果直接点击色环右边单独的颜色，就会得到色号及同类色推荐。Designspiration 这种强大的色彩搜索功能可以帮助我们快速找到想要色系的灵感参考，还可以当做一个实时色卡开使用，对于想找配色参考、提高配色审美能力的设计师来说算是一种魔法工具了。针对性极强的关联搜索除了上面说到的色彩关联搜索，Designspiration 的灵感注释标签也是可以进行关联搜索的。只要点击灵感详情页右侧标签，就可以立刻得到同类灵感推荐。再次总结一下 Designspiration 的特点：强大的色彩搜索功能，可以通过指定配色找灵感，也可以自动生成灵感的配色并进行同类推荐，可以当做一个实时色卡工具使用。贴心智能的关联搜索设置，只要你对灵感的其中一个点感兴趣，马上就能在同页面找到可以跳转的标签，不用回到主页重新搜索。以上就是推荐的全部内容，感兴趣的小伙伴快去 Designspiration 动手试试吧~「Designspiration 官网」 https://www.designspiration.com/配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/designspiration
明度 色彩 色相 可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。之前向大家介绍过 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
图层 拖动 色彩 每天在网上浏览，总看到不少校正偏色图的帖子，技巧和方法都很不错，但是细看下来，目前还没发现只用一个工具来“搞定”偏色图的(也可能有不少只是我还没看到吧)。试想一下，难道调整一个偏色图，非要十八般武器都要上么?今晚下载了个偏蓝的风景图，偶就想尝试一下用一个工具，看能不能恢复出一个像样的图出来。 大家知道，常用的PS调色工具和手段太多了，如果对某个偏色图要调整，似乎都要把这些调色工具用个遍可能才可以找到心得。我也清楚，调一个偏色图，看别人的教程来调就行了，自己去琢磨，甚至独辟蹊径，无疑是件劳民伤财的事情，弄不好最后无功而返。还好，再尝试了若干个调色工具后，针对这个风景图，我用“色彩平衡”工具就基本搞定了，效果还比较养眼。这其中，也付出不小的辛苦，就是对红绿蓝及其补色青色洋红黄色比例关系的调整颇费周章。大家知道，在“色彩平衡”对话框上我们看到的红、绿、蓝三原色以及它们对应的补色有着“此消彼长”的密切关系，例如增加红色就相对减少了青色;减少洋红就相对增加了绿色;减少了黄色就相对增加了蓝色。根据这个原理并熟悉这个原理我们就可以使个别偏色的照片得到纠正。当然，我也曾说过，某个PS调色技巧就像某个医生开出的药方一样，前者不能包打天下后者不能包治百病，换个图或者换个病人，这样的PS技巧和药方就不灵了。所以我还是那句老话，看了贴后，要活学活用，举一反三。话不多说，咱们来练习一下试试。效果原图第一步 导入原图后，单击“背景”图层不放，向下拖放到“创建新图层”按钮上，松开后就可以看到图层面板上多了一个复制图层——“背景副本”。接着在“浮动面板”区下方单击 “创建新的填充或调整图层”按钮，在弹出的菜单中选择“色彩平衡”命令，单击后，弹出“色彩平衡”面板，同时图层面板上会出现一个“色彩平衡1”图层。在“色彩平衡”面板上“色调平衡” 区选择“中间调”选项，拖动“青色-红色”滑标右拉到底;拖动“黄色-蓝色”滑标左拉到底第二步 选择“高光”选项，拖动“青色-红色”滑标右拉到底;拖动“黄色-蓝色”滑标左拉到底第三步 选择“阴影”选项，拖动“青色-红色”滑标右拉到-8第四步 在“浮动面板”区下方单击 “创建新的填充或调整图层”按钮，在弹出的菜单中选择“色彩平衡”命令，单击后，弹出“色彩平衡”面板，同时图层面板上又会出现一个“色彩平衡2”图层第五步 选择“中间调”选项，分别拖动“青色-红色”、 “洋红-绿色”和“黄色-蓝色”滑标右拉到底最后一步以上调整参数非严格标准，不用记，但是只用一个调色工具的调色技巧，大家可以去粗取精。希望我的这个浅薄方法能给你带来一点帮助选择“高光”选项，拖动“青色-红色”滑标左拉至-40;拖动“洋红-绿色”滑标右拉至+15;拖动“黄色-蓝色”滑标右拉至+33。可以看见，原先偏蓝的照片基本得到了校正。如果读者需要调出自己喜欢的色调，还可以继续尝试使用“色彩平衡”工具来调色最终效果
色彩 线条 形状 前言：一直研究线条，就会发现，线条除了表现我们普通日常所见的图标化的个体以外，还可以表现更大更复杂的风景。但是后者会有一定难度，如果线条比较粗的情况下，尤其无法更好去展示细节（比如要表现云朵或者空中漂浮的柳絮等）。当时我的有点卡在这个思路上没有进展。过两天，我突然凭空有了灵感，想到了“简化”这一条路。尝试用简化的方法，虽然看起来粗糙，但又进入到新的层面。我想我们不是要单单造景，而是要传递景色。因此，景色用线和色块的组合，就这样一步步展开。灵感来源：于是我有了这一组作品大千之镜，这一组作品就是基于粗线+景色的方式来创作，其中重点的表现是“色”（渐变组合）。提示：本操作注重设计思维的过程，不涉及到软件的具体详细操作，如果对软件操作生疏的小伙伴，可以移步到这里看看这个简单的快速上手AI的操作视频。得到形状的四种方法：拼、减、裁、画参考照片不等于临摹照片外景的绘制，需要非常概括化。由于这里我们的规划是把景物画在一个小圆矩形的框内，其实空间是很有限的。因此线条的设置也就要趋于简单。简化是一个非常重要的思路，你可以用照片开始研究。当然，我在创作的时候，不止借鉴了一张照片，而是把多张照片进行结合参考。参考照片里的布局、构图、透视……然后提炼最基本的形状。如果有兴趣你可以看下面这支视频：灵感怎么来？参考照片的几点技巧构建基础线条如果在细节并不累赘的情况下，简化的图案可以采用网格来帮助表达。当然这取决于你的习惯。STEP 01打开AI，新建一个1600*1600px的文档。在这个文档中画出一个圆角矩形，然后在这个圆角矩形当中谋篇布局。首先用几个线条把最大的基础形勾勒出来。外框线条采用30px，而内部的线条可以稍微减小，变为25px，再细可以变为20px。线条的粗细设置原则就是让其遵循一定的韵律感，比如都是5的倍数。图案犹如搭积木那样建立起整个画面。STEP 02继续以搭积木的逻辑来填满左边建筑群的画面。这时我们要学会跳出「技」的思维层面，这在我的授课经验当中也反复和学生强调：我们并不是在学会如何画这个对象，比如这里我们在绘制小镇风景。我们学会的是背后的创作思维。这里我引用一段丰子恺在《认识绘画》这本书里的原话：“图画就同数学和体育一样。人生不一定要画苹果、香蕉、花瓶、茶壶。原不过是借这种研究来训练人的眼睛，使眼睛正确而又敏感，真而又美。”用在这里，就是通过画小镇、建筑的过程来训练自己对线条造型的能力。而这个能力表现出来就是既符合建筑的外形，又能让它看起来美观自然。STEP 03继续往下，就是把我们的形状再一次优化。优化形状有两个层面需要注意：1）形状衔接是否闭合2）整体的形状是否均匀这是宏观和微观的两个方向。然后再适当调整增删形状。STEP 04增加细节一般来说是最后一步的框架工作。这时我们又要切换一个角度：刚开始我们把线的作用看作是建立轮廓，这时，需要拿线来当作细节的描绘担当。比如下面用一个苹果作例子，你就能理解了。线的两个作用：勾勒和描绘，在这里就能体现出来。因此这里增加的细节（窗户、门、波浪、海鸟等）都是发挥线的描绘作用。到这一步我们的轮廓线就完成了。这时可以将它们扩展外观。在很多LOGO设计当中，到这一步其实就可以告一段落了，因为大部分扁平风格的LOGO都只需要一个轮廓，色彩可以是一个随机的单色。色彩框架建立色彩框架，其实就是找到一种观察色彩的角度。利用两个色彩间的关系演化成一个色彩阵列。在下面这个视频中，你可以了解更多关于色彩阵列。色彩阵列：给初学者的色彩框架图STEP 05依据上面的理论，我获得了这个色彩阵列。我们的色彩就从这里开始。主色确定为蓝色（这从我们的照片里获得了灵感），次色为粉色和薄荷绿。STEP 06当然，色彩阵列的作用并不是要让我们用上所有的色彩，仍然根据实际的情况去繁化简。在关键的色彩上进行不断的尝试，找到最好的组合。运用形状生成器工具来进行上色，把主色进行分布。STEP 07继续运用上次色薄荷绿，这时大家要注意色彩的微妙变化，在单一色彩出现的时候，看起来一切都很完美，一旦加入了第二种颜色情况就开始变复杂了。这也和我们平时生活是一样的，一个人的时候什么都好，两个人就会出现人际关系。复杂的让人头疼也让人欢喜的关系，就带来了更多的生机和起伏。我们看到虽然我们运用次色，但也在部分色块上带来了更多的色彩上的变化，这也是有了色彩阵列后可以轻易做到的。STEP 08第三种色彩是红色，我们可以继续运用在图形中。STEP 09主要的色彩控制在三种，剩下的色彩可以继续在现有色彩基础上再微调，比如调整色彩的明度或者饱和度来获取更为细腻的变化。注意在这里的白色的运用。光影渐变由于有光，我们才得已看见不同的色彩。根据这个真理，如果要想获得更为丰富的光感，渐变也是一个非常重要的上色要素。STEP 10在运用渐变前，我的建议就是先做好平涂的工作。平涂是建立整体的色彩均衡，然后再根据光线的情况进行微调。而且对于渐变，我们需要加以克制，只需要选取其中一种色彩，然后在这个色彩比较窄的范围内进行微调。比如在这里我们将红色用上渐变，使红色产生一些微妙的变化。STEP 12然后给建筑补上阴影，阴影的出现根据“美且真”的原则来安排。这里可能很多人会问什么是“美且真”原则，下面同样是出自丰子恺的《认识绘画》的一段描述：图画兼有欣赏与实用两种效果。欣赏是美的，实用是真的，故图画练习必须兼顾“真”和“美”这两个条件。具体地说：譬如描一瓶花，要仔细观察花、叶、瓶的形状、大小、方向、色彩，不使描错。这是“真”方面的功夫。同时又须巧妙地配合，巧妙地布置，使它妥帖。这时“美”方面的功夫。了解了这个原则，就在练习中去试探画面这两个要素的平衡。阴影的制作需要注意的是三点：1）找到光源2）阴影颜色的配置3）不必完全写实这三点可以通过下面这个视频中详细给大家演示：线条插画中增加阴影的三步技法完成后的效果如下：点状高光创作最后一步，这里我们增加了一个小细节，也是突然想到的点睛之笔，给画面增加点状高光。STEP 13在平面构成中，一个点可以是一个圆点，也可以是一个小方块。在这个画面当中，我们就利用白色的小方块来制造画面的高光部分。增加了点状高光的画面，就会让画面更加活泼。最终效果：后记：背后的思路写这篇文章我整理出了三段视频，通过视频也许会给初学者更多启发。我之前一直纠结在是做视频还是写文章两条路子，本来想文章+视频是最好的方式，各取所需。但是后来操作过程发现两条路没办法并行。只能在文章当中，穿插更多我认为值得展开的部分。视频作为文章的补充，而文章又作为视频的补充。虽然现在大家都说没时间看文字，视频也更加直接，但是我始终觉得潜心学习的东西，用文字是更易于查询和记录的。视频和文章都无法取代彼此。希望我们可以继续以这样的方式交流下去。原文链接：飞屋设计
色相 明度 色彩 赶在年前将这篇关于“配色”的设计解析整理了出来，分享给大家，希望对大家有帮助。在平时的设计创作中，色彩搭配是很基础且重要的。那如何才能让自己成为了一个会搭配的设计师呢？除了日常的审美和创作积累，其实掌握好色彩基础和搭配原理才是让自己设计配色提升的第一步。下面就带大家由浅入深全面了解一下吧！本文主要围绕四个方面进行讲解：色彩的基础知识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
颜色 板块 色彩 一套的好的配色是设计的重要组成部分之一。对于在座学设计的同学们，尤其一些理工科背景的学生，没有系统的学过配色，对颜色的感觉也比较薄弱，所以在配色环节往往感觉很绝望，所以今天给大家带来一个王炸配色网站，也是 Adobe 的亲儿子：Adobe colors。也许很多人都知道这个网站，但是不知道它里面到底包含什么功能，今天就为大家简单解析一下。https://color.adobe.com/第一大板块：配色模式Adobe colors 具有超级强大的配色模式，一共包含 9 种智能调色模式可以选择，你需要用什么方式去调试颜色点击左方即可操作，色彩模式也支持 4 种，分别为：RGB、CMYK、HSB、LAB。例如你要用单色去做颜色，那么就可以直接选择单色按钮进行调整，调整时他会自动协调你的色值，如下：第二大板块：拾取主题功能你可以直接上传你电脑中的图片进行颜色提取，上传后你还可以选择需要的色彩情境：彩色、两色、柔和、深色、暗色，可以说是相当的贴心了！第三大板块：渐变色你可以拾取上传图片的渐变色，提取的渐变色彩看起来也是非常高级，对于不会做渐变色的小伙伴来说是一个很大的福音，毕竟很多设计师做渐变色都会有点“脏”。在左侧的按钮中我们还可以选取 2-15 种渐变点，简直美滋滋。第四大板块：协助工具可以合理的帮你检查 2 个颜色的对比，预览中可以告诉你在什么样的情况下可以这样用色，当然在右侧也会给你颜色的建议，你也可以自己设定对比率去调整颜色，这样使用你的颜色再也不会显得又脏又 low 了！对比率建议：MD 规范里说文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰；最佳对比度为 7:1。第五大板块：探索与趋势点击探索，可以浏览一些优质的图片，同时可以提取其中的色卡；点击趋势，甚至可以浏览 behance 中不同设计领域的设计作品使用的配色方案，跟着牛 x 的大神配色总不会错，实时跟进潮流配色，简直爽歪歪！！！当然我们还可以进行搜索，更快的找到自己想要的图片以及颜色，本人非常喜欢用它去寻找情绪版， 不仅颜色一目了然，图片也是非常的优质！总体而言，这个网站不仅从各个维度解决了我们的配色需求，同时也解决了我很多找图需求，简直一举双得。网站链接：https://color.adobe.com/zh/create/color-wheel文章彩蛋！Color Uisdc 配色导航最后，在附上一枚配色神器，来自优设超人气的配色导航，一共7个实用模块，从绚丽多姿的色彩方案到大开眼界的色彩命名，代码也可以直接复制使用，一定会是你设计配色路上好帮手！https://color.uisdc.com让高手帮你配色！超好用的在线配色网站TOP 5编者按：想象一下，在部门会议上，Boss对你美工同事设计的配色不太满意，你却始终笑而不语，当问到你的意见时，你呵气如兰，轻声说出：“就用绀桔梗色搭配枇杷茶色吧，再加少许苏芳香。阅读文章 > 欢迎关注作者微信公众号：「黑狮力」本篇来源：优设网原文地址：https://www.uisdc.com/adobe-colors
图层 色彩 水晶 前言如果把平面设计看作是形与色的组合，那么Illustrator就是胜在对形的把握，而Photoshop则重在对色的渲染。如果是想要做出有质感的画面，那势必要用到PS不可。今天我们就来利用PS打造一枚质感水晶风格图标，说是图标，其实也可以当作平面的素材使用。水晶本身是几何状，很容易做出现代的简约风格。灵感来源来自Jose A.ortiz的一组光感作品，看了作品里对光源把握很好，于是临摹了一下，有所心得。在他原有的作品上，增加了光的作用，此外也增加了我自己的方法和理解。警语软件：Photoshop 2019本文对所涉及的软件基础工具不多做特别详细的解释，如果对工具仍然不熟悉的小伙伴，可以先移步软件的基础操作再进行实例练习，本文更多提供的是一种创作的思维过程和方法。用笔刷实现渐变我很喜欢PS的笔刷，但是用来用去发现最常用的还是默认那款。今天我们就用最普通的笔刷来「刷」出色彩。虽然软件里有渐变工具，但是要想实现渐变这一视觉效果，在PS中有无限的实现途径。比如今天我们要用的就是用笔刷来实现渐变。用笔刷来实现渐变，和绘画是一个道理，非常自由的调配色彩。这样能让渐变的色彩表现更自由。以上左右两个圆的色彩填充就是分别采用了渐变工具、柔边圆画笔笔刷。可以看到右边笔刷刷出的渐变比较自然灵动，而左边相对比较平直，没有变化。如果想要实现比较灵活的视觉效果，左边用渐变工具以后，还需要做更多的处理。绘制水晶晶体外形首先还是需要我们在PS中绘制出水晶的外观轮廓。STEP 01我们可以首先在草图上找到合适的形态，水晶是一种有机形态，可以探索多种不同的形态画法。这里大家可以看到我们有多条边线，这是把位于水晶背面的边线也表现出来了。这是为了让我们在软件里绘制形状时清楚水晶的结构，每一个面都需要填色到位，我们要让水晶保持透明。STEP 02打开PS，新建一个2000*2000px的文档，将背景设置为暗蓝色。一般来说，光感效果都需要暗色背景来衬托其光亮。STEP 03按照草图给定的轮廓线，运用钢笔工具进行绘制。绘制的目的是建立起水晶晶体不同的「面」，这样才能帮助填色。水晶的晶体一共有8个面，前后分别表现为4个面。前后4个面是遮挡的关系（前面挡住了后面），在这里如果降低了图层的透明度就能看到，因为透明，这8个面的视觉相互影响。相应的，在图层上也需要安排好它们的顺序。「刷」出色彩按照顺序，从前方的左下这个形状开始填色。STEP 04首先我们需要调出这块三角形的轮廓线，在轮廓线内涂抹色彩。这就可以利用我们上一步所绘制的8个形状，分别进行。在按住键盘上的Ctrl键时再单击鼠标左键，就能形成蚂蚁线轮廓，新建一个图层，把所涂抹的色彩放到新图层上，下方的形状图层就可以关闭了。这里我只使用柔边圆这个最普通的画笔，将其放大，可以任意涂抹大块的色彩。色彩我们可以从蓝色开始，然后再为其增加其他的色彩比如紫色、红色等。PS在色彩方面的优势就是可以对色彩进一步优化，比如大家在色彩搭配方面一开始并不满意，后期也可以通过调色或者改变透明度、图层混合模式等一系列方式进行质感的提升。STEP 05按照上述方法继续涂抹正面的另3个面，色彩不要太过，让整体画面保持平衡。在这里我的配色方案是用蓝、紫作为主色，然后辅以橙色以及洋红。STEP 06接下绘制位于背面的4个面，这4个面在正面的「下方」，但这里不需要关闭上面的图层，而是保持上面的图层可见，看看它们彼此重叠后的效果，可以随时调整上面的图层的透明度甚至色彩。进一步润色到这一步我们就已经把初步的工作完成，接下只需要进一步修饰、润色。STEP 07可以把每一面的图层都经过调色处理，这通常处理一些比较细的色彩细节。最常用的调色工具是【色相/饱和度】，这一步主要是为下一步整体调色服务。也许这并看不出多少改变，因为此时还只是微调，色彩只要不出偏差，都不需要大的调整。STEP 08这一步开始增加高亮的部分，这部分采用小一些的白色柔边圆增加在面的边缘部分。这里我采用的是增加剪切蒙版的方式，如果光亮太过白，可以实当减弱其透明度。将白色的高光增加在边缘部分能进一步强调水晶的体积感。调色阶段这时正式进入进一步调色的阶段。STEP 09这时将除了背景以外的所有图层编为一组，然后把这个组命名为备份，再复制一个组，将这个组合并为一个图层，然后把这个图层命名为水晶，我们对这个水晶图层进行调色。原有的备份组关闭其可见，但在需要比较调色后的效果时，也可以开启随时比较观察。首先我们运用【自然饱和度】，增加色彩的饱和度。STEP 10再调整【曝光度】以及【曲线】，增加画面的色调明暗对比。STEP 11再进一步采用【色彩平衡】，对色彩做进一步修饰。虽然没调色之前，看起来并没有什么不妥，但是调色之后再对比，就会发现之前的版本的色调看起来很黯淡。到这一步色彩已经完成。光色美化光线是我们这次练习的重点，因此接下就来继续增加光效。STEP 12首先来增加其本身的色光，复制上一步的水晶图层，然后栅格化图层，将其进行【高斯模糊】。模糊参数可以设置到72，甚至更大。然后将这个图层的混合模式改为【滤色】，透明度降至70%。这样也会为画面增加一种梦幻感。STEP 13再将原有的水晶图层进行栅格化，这里我们要对这个图层应用【滤镜>光照效果】STEP 14最后，在背景之上新建一个空图层，用画笔画出中央略亮的感觉。到此我们就完成了整个制作步骤。设计没有终点，这一步以后还可以返回重新调色，增加光效等。最终效果目前这篇文章，我们就做到这一步：后记：用时间打磨出质感很多人对PS的印象，还是停留Photo这个层面，但是我们可以看到PS对质感的营造是独一无二的，所有在AI或者其他工具画出的插画，我觉得都可以利用PS来进一步润色得更为精致。在没有调色之前，其实很多画面的色彩都看得过去，放到PS当中润饰之后，通过对比都能发现差异，一稿就能做出优秀配色，恐怕是需要几十年深厚的配色功底。质感也都是通过时间慢慢打磨出来的。在有限的时间里，实践时间利用的最大化，就能深入到更细的细节。一点实践的体会。原文链接：https://www.ifeiwu.com/blog/design/1494
线条 色彩 插画 前言线是最基本的平面元素之一，在平面设计中，如果运用线体插画，能和字体很好的形成融合效果，因为字体本身也是线条。今天我们就来一起探索关于线体插画，运用AI来绘制一枚多肉植物的线体插画。创作要点学习插画的过程，其实根本是学习如何构图和配色。在平面设计中构图和配色是视觉元素的重点，练习插画是一个很好的训练方向。在本次的小练习中，你可以把关注点放在以下几个方面：1、多肉植物的造型组合（所运用的是什么形状？这些形状的线条是如何表现的？）2、配色方案的选择（注意色彩的明暗层次、色域使用的范围）3、如何创造画面的点睛之笔（运用对比色创造焦点）警语本文对所涉及的AI软件基础工具不多做特别详细的解释，如果对工具仍然不熟悉的小伙伴，可以先移步软件的基础操作再进行实例练习，本文更多提供的是一种创作的思维过程和方法。用线构形我们在绘制任何画面之前需谨记：从大到小，从整体到局部。所以，我们要从基础的大形开始画起。但是在这幅画中，由于线条的造型相对简单，所以细节的部分是集中在色彩的处理上。STEP 01打开AI，新建一个1600px*1600px的文档（这个尺寸是我常用的），色彩模式为RGB。然后把线条的填充关闭，开启描边，描边的大小设置为20pt。然后绘制出一个椭圆，将这个圆调整为一个尖头椭圆，把它作为多肉植物的第一片叶子。调整的工具可以采用【锚点工具】。多肉的造型一般来说都是圆圆胖胖的，所以线条也是尽量看起来饱满一点为佳。颜色让它保持黑色就好，目前不需要考虑色彩。当做出第一片叶子以后，就能继续画出其他的叶子。在这里，我们的多肉植物造型是不对称的样式。STEP 02我们继续增加叶片的造型，每一个叶子的造型都是椭圆，但又都和原始的椭圆形状有别。这样保持错落有致的整体视觉。STEP 03这时大家也许发现线条比较凌乱，因为包含了不同的重叠关系。这时就需要采用【形状生成器工具】将多余的遮挡住的线条进行删减。因此在处理前大家就需要弄清楚叶片之间的前后空间关系，按照前面遮挡住后面的原则，就能确定应该删减哪一条线。STEP 04最后增加一个小叶片，也同样删减遮挡的线条。通过这样的方式可以继续增加叶子，我在这里不做过多的演示，你自己画的时候可以根据需要增加叶子。STEP 05往上继续增加植物的造型，在这里我做了两个不同的往上伸的茎干作为补充，让画面更丰富。在这类LINE ART的创作中，线的表现是非常重要的，所以在造型时首先就要考虑线的表现，比如左边是采用直上的线，右边就采用弯曲的线，一直一弯造型形成一种对比效果。STEP 06给右边的茎干上增加小叶片的组合。这里由于小叶片的造型要小一点，更细节一点，所以线条的粗细可以设置为18pt。STEP 07最后给下方增加一个花盆的造型，花盆的外观可以是圆角矩形。这里的线条粗细设置回之前所用的20pt。圆角矩形的下面圆角的弧度要大一些。到这一步，所有的线条部分就完成了。阶段小结线条是一种很有表情的语言，线条的粗细、长短、曲直，都对整个造型起着关键的作用。因此对线的把握，尤其是扁平化风格当中，线条维持平滑感非常重要。你在这副画中所做出的每一个形状，都要让线保持这种平滑感，而不要扭曲。为形体赋色配色对很多人来说都是难点，因为颜色不仅对我们普通人，即使是对一些资深的设计师也好，都未必清楚色彩真正的本质。我们这篇文章不会去刨根问底，但是可以触及一些关于色彩的探讨。之所以要平时做临摹练习，也是为了拓宽自己对色彩的敏感性，增加自己和色彩单独相处的机会，从而会更有利于日常工作当中对配色的驾驭。STEP 08在上色之前，我习惯先将所有的线条编组然后备份放到一边，这是为了方便日后修改。然后把其中的拷贝的线条全部进行扩展外观，转为形状。转为形状后会更容易在AI中进行上色。STEP 09首先为线条上色，在这里，线条安排成一种比较带蓝色的深黑色。由于线条要着重表现，所以线条的颜色也需要更突出一点。STEP 10然后接下打开拾色器，选择5种不同的绿色。为什么要选取这么多种类的绿？这里我们可以普及一个小常识，大家平时在配色的时候，如果说选择运用绿色或者红色（也就是单一的色系时）很容易局限于某一个色值上，如果扩宽一下思路，大家可以说叶子也有很多种不同的绿色，其实真实的自然界也是由多种多样的绿色所构成的：蓝绿、浅绿、深绿、柠檬绿等等，所以我们在选择色彩的时候，尽量也是往多样化的色彩方向去走。这样会让色彩看起来更自然。并且在选择色彩的同时，也要注意在明度和饱和度上也要有所对比，尤其是明度的对比会为整个画面增加更多自然光的效果。同时我也增加了蓝色的表现，这是为了强化阴影当中的冷调。让画面有冷暖的搭配。STEP 11然后我们先选定“湖水蓝”，然后再选定【实时上色工具】，在你认为应该运用这个色彩的位置上进行单击，就可以实现部分的上色。STEP 12我们再继续选定“森林绿”和“树叶绿”，这是两种不同的绿色，但是森林绿的明度略低。虽然是两种绿色，但这是不同感觉的绿色。STEP 13在运用“薄荷绿”的地方，其实是相对来说更“亮”一点的区域，受光更多。所以我们要寻找合适的地方进行上色。STEP 14最后运用的绿色是“苹果绿”，这个绿色是受光最多的地方。这时的叶片部分的上色就完成了。可以看到，运用不同层次的绿色，会比用同样颜色的绿色来得更生动。STEP 15将花盆也填充一种灰色，这种灰色会略偏向绿色。光影造型继续为画面增加光影表现，在这里，其实最重要是增加阴影。阴影的表现其实可以比较随意，确定好光源点，通过之前色彩的深浅分布，可以判断我们画面中光源点出现在右上方。因此，阴影也都可以跟随这个虚拟的光源出发来安排。STEP 16把刚刚做好的整个对象进行“扩展”（运用了实时上色工具后，需要扩展才能进一步取出某一个形状，留作下一步之用），扩展完成后再取消编组。这时我们就能单独拿出非线条以外填色部分的形状，然后在这些形状上增加阴影。阴影的颜色选择和线条的深蓝色同色，把透明度降低至18%。阴影的形状依然是我们关注的重点，需要从整体来观察整体的美感度和协调程度。STEP 17然后把全部的阴影都画出来，包括花盆部分的阴影。阴影的设置跟随一定的光影原理，但是也不用完全再现现实物理条件的光照。主要还是要照顾到最终整体的视觉效果。STEP 18增加高亮的部分，运用白色的小圆点，添加到受光比较多的位置。同样需要适当降低每个小反光点的透明度。点睛之笔大家可以发现在整个画面中，我们只是运用蓝绿色系，画面的色彩是偏冷的。如果想要画面的效果更饱满，更具有张力，就需要增加暖色。在多肉这个主体当中，我们可以运用叶片的尖端位置增加和绿色刚好处于对比色的红色，然后运用渐变的效果做出红绿对比，增加对比就增加了戏剧感，从而也就让画面显得更具有感染力了。此外需要注意的是，我们的画面焦点部分才需要这样的戏剧冲突，因为焦点不可太多，所以不用每个叶片都这样操作。STEP 19先安排好这个渐变色的色板：从粉红色到白色的过渡，白色一端的透明度降低为0。然后绘制出一个新的形状，这个形状刚好覆盖过我们的叶片尖端，然后把渐变色运用在此。STEP 20在运用“薄荷绿”的两个叶片上增加这样的粉红色渐变。这样的冷暖互动就能把画面的灵动感拉高一个层次，这也为大家提供一个配色思路：当全部为冷色的画面中增加暖色，或者暖色中增加冷色对比，都能让对比发生一定的戏剧效果。最终效果最后，让我们为整体的插画增加一个背景，END!插画应用一个插画画出来了以后，可以灵活运用到平面设计当中的多个地方，例如在UI设计中，我们可以把它作为Banner，或者介绍配图。除此而外，还能作为图标、LOGO设计而使用。后记：学习插画的时候我们在学什么当我们在学习插画的时候，真的是在学怎么画一盆植物吗？这是我最想问的问题。回到我最爱讲的印象派，大概在中学时代第一次见到莫奈的印象日出，立刻就动手模仿了好几幅。当时还不知道这叫印象派，但是直觉告诉我，这种表现形式是诚意十足的。后来看了很多印象派的资料，最让我着迷的就是他们对“光”的敬畏和喜爱，大家都应该知道光线造就了颜色，所以，色彩就是光的语言。我讲过好几次关于色彩的课，也自己深挖过一些色彩理论，色彩构成，总的来说，我觉得没有用眼睛去看，自己动手去画，理论都是很苍白的。所以，对于开头问题的答案就是：我们其实就是在学习色彩，学习构图。而这都是平面视觉的核心，甚至不能说是核心，而是形与色本身就是平面视觉。有小伙伴困惑配色怎么破的时候，其实根本没有捷径，倒是有很多伪装成捷径的弯路，初学者选择弯路也没关系，只是时间会耗得更长而已。唯一的捷径大概就是多画、多观察，手上练习，心里总结规律。心、手、脑并用，效果就自然来了。话不多说，找个空闲时间练起来。原文链接：ifeiwu
落霞与孤鹜
飞翔的企鹅
张大湿
在路上
表哥
