导语：剖析界面视觉根本办法是“形色字构质”，我预备渐渐写一些实战根底的文章，争夺每一篇都能够深化处理一个规划的根本问题。B端规划十分依靠于规划体系，好的色彩界说，能帮咱们规划出一些愈加共同、舒适、层级清楚、可读性强的界面。
色彩在规划中和日常日子中都起着至关重要的作用，咱们能够经过色彩引发特定的心情或情感。而在一些没有文字的场景，色彩也是传递信号的前言。
咱们先来温习一下色彩理论（Color Theory），它能够协助咱们在不同的条件下正确的运用色彩，也能够协助咱们知道色彩的根底。
咱们都知道赤色、黄色、蓝色是原色（Primary Color），如下图所示：
当咱们把赤色、黄色、蓝色在圆环中别离混合时分，会生成非有必要色彩（Secondary Color），绿色、橙色、紫色，如下图所示：
假如咱们再进一步色环混合，就构成了艾萨克·牛顿（Isaac Newton）创立的传统12轮（没错，便是牛顿），如下图：
关于色彩的特点，有四种重要特点值得咱们去留意，别离是色彩、饱满度、色值、色温。
色彩便是色彩在色轮的方位，色轮主要有12种色彩，可是咱们按上述办法无限去切割混合色彩，咱们的色轮将是一个由突变组成的圆环，圆是360度，所以，色彩的值便是0-360。如下图所示：
饱满度也能够称为色彩强度（Intensity）或许色度（Chroma），高饱满的色彩是充满活力且激烈的，低饱满的色彩是灰色和昏暗的。如下图所示：
色值告知咱们色彩的深或许浅。咱们能够给色彩混合黑色（Shade），这样能够使色彩变黑；也能够把色彩混合白色（Tint），来使得色彩变白；还能够在色彩外表混合灰色（Tone），来使得色彩变灰；如下图所示：
当咱们在色轮上移动时，色彩也会跟着色温改动，暖赤色逆时针移动时，多了更多的黄色，当咱们顺时针移动，就多了更多的蓝色，变成了冷色红，这便是咱们经过旋转色轮来制造赤色温度带。如下图所示：
当咱们把色彩、饱满度、色值、色温结合起来时，咱们发现开始的12种色彩中的每一种都有许多的改动。
那么咱们该怎样组合这些色，使色彩运用变得平衡呢？这里有一些常见的办法去组合色彩，也便是咱们俗称的配色或色彩谐和（Color Harmonies）。
单色（Monochromatic Colors）：咱们只需选取一个色彩，并调整明度和饱满度来创立。
互补色（Complementary Color）：这个计划是从色轮的两边选取两种色彩，也便是色环上敌对的180度的两个色。这种配色适宜发明激烈的比照的配色。
涣散互补色彩配（Split-Complementary Color）：这个计划是选用了互补色的两个街坊色彩。这样既适宜发明激烈的比照配色，又让咱们多了一个色彩的挑选。
三角敌对配色（Triadic colors）：假如要寻觅三种相互平衡的色彩，能够挑选12色的色轮上恣意三个三角敌对的色彩。这样能够组合出斗胆而充满活力的色彩。
矩形配色形式(Tetradic Color Scheme)：矩形配色是由两组互补色所构成,一般具有五颜六色的缤纷感,但至少有一种主色来突显作用。
附近色（Analogous Color ）：类似色是指以色相环上附近的2-4个色彩组成，咱们称之为近似色。是最常运用的谐和色彩。
同类色：色环视点相距30° 以内的色彩。这种色彩构成的画面给人一种谐和、共同、高档的感觉，比单色彩配又了一分生动。
近似色：色环视点相距30°-90° 的色彩。近似色既能够适度色彩比照，又能够谐和共同，色彩生动又不失谐和。
比照色：色环视点相距120°-180° 的色彩。比照色能表达激烈的视觉情感，带来较大的视觉冲击力。
互补色：色环上相对的色彩，也便是色环相距180° 的色彩为互补色。互补色是色彩比照最为激烈的两个色彩。
EagleApp（主张规划师具有的图片收集东西，贮存最好链接iCloud）
HSB色彩形式即色度/色彩（Hue）、饱满度（Saturation）、亮度（Brightness）。它选用色彩的三特点来表色，行将色彩三特点进行量化，饱满度和亮度以百分比值（0%-100%）表明，色度以视点（0°-360°）表明 。 HSB色彩形式以人类对色彩的感觉为根底，描绘了色彩的三种根本特性 。
经过上文色彩理论得知，将组成色彩的四要素改动为HSB的三要素即可，下面咱们逐个整合。
H-表明色彩，即色彩的容颜，色彩的调性，在色轮上，色相是按方位衡量的，取值在0—360度之间（黑色与白色无色相）。这个与色彩理论的色轮是相同的，当咱们把色轮翻开，就会呈现规划软件内拾色器的色相调整带了。
S-表明色彩的饱满度，即色彩的纯度，饱满度高色彩较美丽，取值在0—100之间。饱满度低色彩就挨近灰色。
特别高的饱满度简单发生“椰树牌椰汁”的规划感，而相对较低的饱满度则可发明高档感。
B-表明色彩明度/亮度，即色彩的明暗程度。取值也是在0—100之间。亮度高色彩亮堂，亮度低色彩昏暗，亮度最高得到纯白，最低得到纯黑。
规划软件中的拾色器便是把明度变为Y轴，饱满度变为X轴，将色轮翻开变为色带。
从作业视点，Material Design 的色彩体系实战且有理有据，所以这一华章是在它根底上结合我的个人项目经历整合的。
层级感：色彩能够表明哪些元素是可交互式的，元素之间的联系以及它们的强弱程度。
可读性：当文字呈现在五颜六色布景上时，文本和重要元素（如图标）应契合可读性规范。
色彩体系一般是按色彩的类型+功用分类，咱们也能够把色彩分为主色、辅佐色、中性色、布风光、遮罩色、功用色、事务色。
主色（Primary Color）：主色是咱们体系的代表色彩，一般与品牌色相相关。
辅佐色（Secondary Color）：在b端中常用中常与中性色合二为一。
中性色（Neutral color）：中性色又称为无五颜六色系，指由黑色、白色及由是非谐和的各种深浅不同的灰色系列，中性色不属于冷色彩也不属于暖色彩。是非灰是常用到的三大中性色。一般用作前风光，也可部分用于布风光。（我个人的习气是中性色替代辅佐色，布景运用的中性色直接移入布风光）
遮罩色（Overlay）：常用的是大局overlay；在states中，一般以黑色、白色为基色，合作百分比运用。
事务色（Business color）：一般由较多的色彩组成，一般用在数据可视化、事务标签等情形。
称号便是咱们给这个色彩的代称，比方绿色咱们为了洋气能够称为“Teal“，比方布风光咱们能够叫“Ui-base”。
Color ID 表明了色彩明度+饱满度的层级代号，相同的color ID表明了色彩在不同色彩的状况下明度+饱满度是在视觉上是层级共同的。
在树立色盘时，我比较建主张选用Material Design的这种命名办法。
第三步：挑选出12或许16个色彩，作为色相带。挑选原则是，过于类似的色屡次呈现能够删掉
第四步：感官明度纠正，微调色相带的明度和饱满度，使其看起来愈加共同、柔软
第五步：制造色板：首要咱们选定基色；然后咱们给基色有序下降透明度，再去吸色，这样就得到淡色衍生色；咱们用#000000的有序透明度叠加到主色上，再去吸色，这样就得到了深色衍生色。
在色板中，淡色衍生时，饱满度层层递减；暗色衍生时，明度层层递减。这个是许多大企业选色的规范办法，很繁琐可是很规范。需求留意的是，规范不是约束，许多时分，咱们需求依据实际状况，再对色彩做一些微调。
关于第五步色板制造制造办法除了方才所说的，咱们也能够用市面上也有色板生成东西：
这个是我比较引荐的色板生成办法，由于会自动检测对应色彩明暗度的ID，这样命名就很方便了，还能够取保不同色彩下，相同明度+透明度的色彩共同。
第二步：翻开拾色器，把色彩向左拖动一点（下降饱满度），制造出稍浅的色彩
第四步：把色彩向左拖动时，色彩变灰了，所以将色彩亮度高一些，把色彩饱满再稍高点。饱满度过低发灰时，能够提高亮度，略高升饱满度来调制。
第六步：改动色彩，来制造更多色彩的色盘，有时，只改动色彩会导致同色彩下颜分不大，再微调明度和饱满度即可。如下图所示：
在拖动色彩时，有时明度和饱满度一同会有改动，这是能够承受的。这个办法比较适宜色感十分好、经历丰富的规划师去做，或许是做一些网页项目能够选用。
关键1:主色的挑选需求尽量挑选冷色系（冷色系见色彩理论Pt. 1），这是为了防止用户长期运用带来视觉疲惫。
关键2:防止与过错、正告色彩抵触（假如抵触，可用附近色替换过错、正告色彩）
能够在ant design中进行在线检测 ，当挑选非适宜主色时，会呈现提示
中性色主要被很多的应用在界面的文字部分，此外布景、边框、切割线等场景中也十分常见。
第一步：运用#000000或许便黑色的色彩在#FFFFFF布景上树立透明度梯度
第二步：吸色（这一步能够省掉），咱们发现了UI规划中常见的色彩：#333333、 #666666、#999999、 # CCCCCC
第三步：叠加蓝色或主色透明度的2-10%，再吸色。叠加蓝色会使咱们的文字阅览更舒适，主色最好为冷色系的状况再叠加。
3.6 前风光（Foreground Color）/ “On” Colors的概念
咱们先明晰一个色彩的“方位”概念，前风光（Foreground color）、布风光（Background Color）和遮罩（Overlay），任何设UI计场景无非便是这三个色的叠加或重复叠加发明出的作用。
前风光一般是文字、icon、切割线、描边的色彩，遮罩一般在前风光和布风光之间，布风光在最底部。常见场景如下图所示：
需求留意的是，在没有states或许咱们定好了布风光彩梯度的状况，overlay是没有的；当依靠overlay制造梯度，梯度最低的状况，overlay透明度也是0，所以视觉上是没有的。
从上图咱们看出，在primary color/Error color为布风光的状况，前风光为白色；在secondary/background/surface为布风光的状况，前风光为黑色。当然，前风光还可能是主色、辅佐色、警示色等等。
以透明度操控前风光色彩层级的优点是，前风光能够和布风光更好的交融，带来更好的阅览和视觉体会。咱们也能够用这样的办法制造出自己的前风光透明度梯度，乃至功用色也能够参加其间，如下图所示：
一切文本都应明晰易读并契合(WCAG 2.0)无障碍阅览规范，WCAG 2.0 中将色彩比照等级分为 3 种，A级、AA级、AAA级，等级越高意味着色彩的比照度越高，呈现出来的视觉压力越大。
网站可读性有必要到达AA等级，也便是内容文本至少4.5:1，标题文本至少到达3:1
依据上文，咱们知道前风光有时分也会为透明度，在咱们树立色彩体系选色的时分就需求用到Materiel Design的可读性检测网站了：
从上图咱们能够看到，在咱们选好主色，而且主色为布景的状况下，对应的黑色、白色和咱们自界说文字色彩，在咱们选好的主色上的是否有可读性，假如有，最低的透明度的值是多少能够满意可读性。
显着的：状况有必要有明晰的不同将它们与其他和周围的 UI 规划和交互状况区别开来，并依据其优先级进行着重。
聚集态 Focused：当用户运用键盘或语音等输入办法杰出显现元素时，呈现聚集状况
激活态 Activated：激活状况传达杰出显现组件或交互元素，表明已激活。
开关（启用/禁用）on/ff：上图中将checkbox和radio也放在了开关内，checkbox和radio状况其实需独自列出，并叠加其他状况。
在b端规划中，常见的是将Normal、Hover、Press、Disable状况的色彩列出，其他状况合作组件显现。
办法一：运用色板的色彩梯度来表明状况，比方Ant Design，如下图：
之前说到的远景、遮罩、布景概念在这里就派上用场了，咱们来用Material Design来做比如，如下图：
比方在B端规划中，Drawer、Dialog等弹窗呈现时，随同的便是暗影。
暗影是为了发明界面中的z轴层级而呈现的。能够经过透明度发明“投影远近”来界说。也能够依据Material Design的暗影梯度来调整，如下图：
最终，关于色彩体系树立，其实还需求有暗色形式的部分，预备在色彩篇（二）去叙述，期望这些赘述能给你协助。