前端配色有哪些原则和技巧？

前端配色，配色的方案有很多种，同类色、邻近色、原色、间色、对比色、互补色，分离互补色、灰调等等。

所有的颜色基本其实都是来源于三原色，就是前端所熟悉的RGB调色。三原色指的就是红蓝黄。开始解释之前我们先来了解一下以下的信息：

    1、原色 间色 三级颜色
    2、互补色 相似色 三角色
    3、分散互补色 四方色 四方补色
    4、明暗色 暖色 冷色

一、原色：

也就是前端熟悉的RGB，所有颜色的源头都是从原色中产生，比如电视屏幕等像素点越多，显示的颜色点就越多，就是分辨率高。

二、间色：

间色其实就是把红蓝、红黄、黄蓝相互混合，就会出现紫色、橙色、绿色。

三、三级颜色：

三级颜色就是从原色与间色之间的融合，会产生比较多样的颜色，常见的有蓝绿色、黄绿色等。

四、互补色：

我们从色轮上看到的对向的两种颜色，就称为互补色。比如红色和绿色，它的特点就是色彩对比强烈，即有所冲突又有协调的感觉。

五、相似色：

就是色轮上面相似的三种颜色。

六、三角色：

通过在色轮上面绘画一个等边三角形，所对应的颜色就是三角色。

七、分散互补色：

与互补色比，其实就是去互补色的两边颜色。颜色有对比也更丰富。

八、四方色：

在色轮上面画一个正方形，所对应的颜色就是四方色。

九、四方补色：

四方补色采用一个矩形样子，所对应的就是四方补色。

十、明暗色：

就是通过对一种颜色进行明暗处理。产生的颜色非常丰富，可用于一些文字或者背景图，但不想太明显的地方。给人一种缓和感。

十一、暖色：

给人一种温暖的感觉。比如如果你在夏天穿一件红色的衣服，就会给人一种更加热的感觉。

十二、冷色：

冷色所具有的意义很多，比如悲观，秋天，夜晚。但又可能是一种宁静，安静的感觉。

十三、过渡色

当你一定要使用互补色等有强对比的颜色时，一定要注意运用间色进行缓冲，平衡过渡，给人一种平衡缓冲的感觉。

十四、颜色搭配

（1）相似色搭配

相似色的运用得当，会使你的页面布局看起来非常和谐，就比如QQ的下载页面，给人一种温和优雅简洁的感觉。

（2）白色的搭配

白色给人一种干净，简约的感觉，相信很多人都会喜欢简约的感觉，没有过多的修饰。但是也必须要使用辅色配合，不然会产生一种单调乏味的感觉。

案例1：香港地铁的每一个站点都是不用的颜色，可以看出都是利用了原色与其他颜色相混合形成的。

案例2：德国柏林消防局的颜色是红色，警察局的颜色是绿色。将红绿两种互补色巧妙地融合在一起。

配色基础参照：

中国色彩,中国传统色彩,网页配色,设计配色,配色图表,配色卡,SDC优设网配色工具 (uisdc.com)

还有就是注重细节；

从标题到配图，到文字，颜色的选择乃至字体的选择都一定要统一。

之所以会觉得一些页面特别高大上或者小清新等特质，都是因为细节处理的特别较真。

配色不在多，而在于和谐统一。你要根据自己网站的主题，来确定配色，因为每个颜色所给人的感觉是不一样，你可以先确定好一个颜色，然后跟这个颜色去衍生其它的配色。

最后想要再谈一下关于饱和度的问题：

饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度取决于该色中含色成分和消色成分（灰色）的比例。

明度是眼睛对光源和物体表面的明暗程度的感觉，主要是由光线强弱决定的一种视觉经验。简单说，明度可以简单理解为颜色的亮度。

一般不建议使用饱和度特别高的配色，饱和度特别高的配色会给人特别焦躁的感觉。所谓过满则亏吧。

包括黑白也是如此！

就拿苹果官网举例：给人整体的配色感觉是黑白，但通过拾色器可以发现并不是如此的。

 

（不知道能不能看出来，最后的颜色降了明度）

在配色中适当的降低一些饱和度，能够使画面看起来更和谐更舒服。

十五、总结：

颜色搭配我们要秉承的是一种和谐稳定的原则。慎用那种比较震撼的色彩，比如海报如果使用红绿对比会让人头晕。所以我们配色以温和优雅为主。
色彩平衡

    色彩单一，通过明暗处理
    主色周围使用若干辅色配合
    高饱和度搭配低饱和度