UI设计中，颜色的搭配

一、色彩的搭配

在UI界面设计比例中：用色一般分为主色，次色和辅助色，它们的比例是按照20%-30%、5%-10%和5%来进行配色，通过不同的配色比例让界面看起来不会出现突兀或者是主次不分的情况。

1、主色

主色是指在配色中处于支配地位的色彩。在配色前，主色是最先确定的颜色 一般情况下，主色是配色中使用面积最多的色彩。用于主要的组件、组件的背景、大面积色块等。

例如，下面页面中的主色是蓝色。尽管也运用了大面积的白色，但是黑白灰属于无彩色，无彩色并不参与到配色过程中。绿色是作为强调色而出现的：

2、衬托色

衬托色是主色以外，为了衬托主色而出现的另一种色彩。衬托色通常为主色的互补色或对比色。衬托色所使用的面积可大可小，只要达到衬托的目的即可。

一组配色中一定会有一个主色，而衬托色并非必不可少。是否采用衬托色，取决于你的配色计划。通常单一的色彩会比较单调，而利用衬托色来强化主色的丰富变化是解决这一问题的方案之一。

3、背景色

背景色经常表现为无彩色（黑、白、灰）或者低饱和度的色彩。背景色主要是作为背景而存在，它最好不要以非常强烈的姿态出现。背景色并非具有某种功能，它是一个页面的基础底色。

4、强调色

强调色是在主色以外起强调作用的色彩，可以说它是非常重要的视觉焦点。它本身具有一种独立性，因此在配色上要形成与主色的强烈对比。它可以是主色的对比色、互补色等，使其能跳脱于主色的色彩。

强调色所用的面积比较小，只要在焦点领域运用上强调色，其本身就有着聚焦的作用。有时候强调色还扮演着衬托色的角色。

二、色彩的选择

1、主色

主色是指在配色中处于支配地位的色彩。在配色前，主色是最先确定的颜色 一般情况下，主色是配色中使用面积最多的色彩。用于主要的组件、组件的背景、大面积色块等。

2、互补色

在24色环中与主色对应180°的为互补色

3、对比色

在24色环中与主色范围120°的为对比色

4、类似色（相邻色）

在24色环中与主色范围30°的为类似色
在24色环中与互补色范围15°为互补色的类似色