Vue进阶（幺柒伍）：前端用户体验提升（六）色彩搭配_前端颜色搭配

2301_82244279

于 2024-05-16 15:04:34 发布

阅读量368

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2301_82244279/article/details/138962072

版权

程序员专栏收录该内容

112 篇文章 0 订阅

订阅专栏

常用的JavaScript设计模式

单体模式
工厂模式
例模式

函数

函数的定义
局部变量和全局变量
返回值
匿名函数
自运行函数
闭包

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一、前言

前端项目开发一段时间后，会思考如何提升用户体验，如何布局前端页面，如何合理搭配页面色彩。本篇博文主要讲解如何通过色彩合理搭配提升用户体验。

二、基础理论

2.1 色彩搭配原则

色彩怎么搭配都可以，看你是想要对比效果还是要统一效果。

如果要对比效果，就取两种色相相差很大，或者明度相差很大，或者饱和度相差很大的颜色。

如果要统一效果，就用相差不远的色彩进行配色。

一般设计的时候背景用稍浅色，需要突出的东西用深色，比如按钮。

2.2 颜色三要素

色相，以区别各种颜色，如红绿蓝等；
纯度，以示色彩深浅；
明度，以示彩色明暗。

2.3 搭配中的对比效果如何实现？

两种或者多种浅颜色配在一起不会产生对比效果：同样多种深颜色合在一起效果也不吸引人、但是，当一种浅颜色和一种深颜色对比在一起时，就会使浅色显的更浅，深色显的更深。明度也同样如此。

2.4 搭配中的统一效果如何实现？

以色相为基础的配色是以色相环为基础进行思考的，用色相环上类似的颜色进行配色，可以得到稳定而统一的感觉。用距离远的颜色进行配色，可以达到一定的对比效果。

类似色相的配色，能表现共同的配色印象。这种配色在色相上既有共性又有变化，是很容易取得配色平衡的手法。例如：黄色、橙黄色、橙色的组合；群青色、青紫色、紫罗兰色的组合都是类似色相配色。与同一色相的配色一样，类似色相的配色容易产生单调的感觉，所以可使用对比色调的配色手法。

中差配色的对比效果既明快又不冲突，是深受人们喜爱的配色。

2.5 间接色是哪三种？

将任何2种原色混合起来，就可以得到间接色：
橙（红加黄）紫（红加蓝）绿（蓝加黄）

三、色彩搭配原理与技巧

色彩搭配一般为绘画中的色彩，三原色为红、黄、蓝。下面是色彩搭配以光的三原色为基础制作的色相环：
　　原色色盘上延伸最长的几段表示出了三种原色----红黄蓝。它们之所以称为原色。是因为其他的颜色都可以通过这三种颜色的组合而成。
　　第二色（间色）将任何俩种原色混合起来，就可以得到间色：
　　橙（红加黄）紫（红加蓝）绿（蓝加黄）
　　第三色（混合色）色盘上另外6种颜色称为混合色。它们是原色和一种临近的间接色混合而成的：桔黄（黄加橙）青（黄加绿）深绿（绿加蓝）绛（红加橙）。
　　
颜色三要素配色：

色相，以区别各种颜色，如红绿蓝等；
纯度，以示色彩深浅；
明度，以示彩色明暗。

3.1色相配色

以色相为基础的配色是以色相环为基础进行思考的，用色相环上类似的颜色进行配色，可以得到稳定而统一的感觉。用距离远的颜色进行配色，可以达到一定的对比效果。
　　
类似色相的配色，能表现共同的配色印象。这种配色在色相上既有共性又有变化，是很容易取得配色平衡的手法。例如：黄色、橙黄色、橙色的组合；群青色、青紫色、紫罗兰色的组合都是类似色相配色。与同一色相的配色一样，类似色相的配色容易产生单调的感觉，所以可使用对比色调的配色手法。中差配色的对比效果既明快又不冲突，是深受人们喜爱的配色。
　　
对比色相配色，是指在色相环中，位于色相环圆心直径两端的色彩或较远位置的色彩组合。它包含了中差色相配色、对照色相配色、补色色相配色。对比色相的色彩性质比较青，所以经常在色调上或面积上用以取得色彩的平衡。

色相配色在16色相环中，角度为0°或接近的配色，称为同一色相配色。
角度为22.5°的两色间，色相差为1的配色，称为邻近色相配色。
角度为45°的两色间，色相差为2的配色，称为类似色相配色。
角度为67.5°~112.5°，色相差为6~7的配色，称为对照色相配色。
角度为180°左右，色相差为8的配色，称为补色色相配色。

3.2 色调配色

3.2.1 同一色调配色

同一色调配色是将相同色调的不同颜色搭配在一起形成的一种配色关系。同一色调的颜色、色彩的纯度和明度具有共同性、明度按照色相略有所变化。不同色调会产生不同的色彩印象，将纯色调全部放在一起，或产生活泼感；而婴儿服饰和玩具都以淡色调为主。在对比色相和中差色相配色中，一般采用同一色调的配色手法，更容易进行色彩调和。

3.2.2 类似色调配色

类似色调配色即将色调图中相邻或接近的两个或两个以上色调搭配在一起的配色。类似色调配色的特征在于色调与色调之间有微妙的差异，较同一色调有变化，不会产生呆滞感。将深色调和暗色调搭配在一起，能产生一种既深又暗的昏暗之感，鲜艳色调和强烈色调再加明亮色调，便能产生鲜艳活泼的色彩印象。

3.3.3 对照色配色

对照色调配色是相隔较远的两个或两个以上的色调搭配在一起的配色。对比色调因色彩的特征差异，能造成鲜明的视觉对比，有一种“相映”或“相拒”的力量使之平衡，因而能产生对比调和感。对比色调配色在配色选择时，会因横向或纵向而有明度和纯度上的差异。例如：浅色调与深色调配色，即为深与浅的明暗对比；而鲜艳色调与灰浊色调搭配，会形成纯度上的差异配色。
　　
采用同一色调的配色手法，更容易进行色彩调和。

3.3 明度配色

明度是配色的重要因素，明度的变化可以表现事物的立体感和远近感。如希腊的雕刻艺术就是通过光影的作用产生了许多黑白灰的相互关系，形成了成就感；中国的国画也经常使用无彩色的明度搭配。有彩色的物体也会收到光影的影响产生明暗效果。像紫色和黄色就有着明显的明度差。
　　
将明度分为高明度、中明度和低明度三类，这样明度就有了高明度配高明度、高明度配中明度、高明度配低明度、中明度配中明度、中明度配低明度、低明度配低明度六种搭配方式。其中高明度配高明度、中明度配中明度、低明度配低明度，属于相同明度配色。一般使用明度相同、色相和纯度变化的配色方式。高明度配中明度、中明度配低明度，属于略微不同的明度配色。高明度配低明度属于对照明度配色。

色调配色：指具有某种相同性质（冷暖调，明度，艳度）的色彩搭配在一起，色相越全越好，最少也要三种色相以上。比如，同等明度的红，黄，蓝搭配在一起。大自然的彩虹就是很好的色调配色。
近似配色：选择相邻或相近的色相进行搭配。这种配色因为含有三原色中某一共同的颜色，所以很协调。因为色相接近，所以也比较稳定，如果是单一色相的浓淡搭配则称为同色系配色。出彩搭配：紫配绿，紫配橙，绿配橙。
渐进配色：按色相、明度、艳度三要素之一的程度高低依次排列颜色。特点是即使色调沉稳，也很醒目，尤其是色相和明度的渐进配色。彩虹既是色调配色，也属于渐进配色。
对比配色：用色相、明度或艳度的反差进行搭配，有鲜明的强弱。其中，明度的对比给人明快清晰的印象，可以说只要有明度上的对比，配色就不会太失败。比如，红配绿，黄配紫，蓝配橙。
单重点配色：让两种颜色形成面积的大反差。“万绿丛中一点红”就是一种单重点配色。其实，单重点配色也是一种对比，相当于一种颜色做底色，另一种颜色做图形。