UI-网页设计-色彩搭配

最新推荐文章于 2025-03-25 00:00:00 发布

DevCsdner

最新推荐文章于 2025-03-25 00:00:00 发布

阅读量1.9k

点赞数

分类专栏： UI 文章标签： UI 网页设计色彩搭配

本文链接：https://blog.csdn.net/smartboy_01/article/details/102894594

版权

UI 专栏收录该内容

10 篇文章

订阅专栏

色彩

色彩三要素

色相
明度
纯度（饱和度）

色相

在这里插入图片描述
色相，即各类色彩的相貌称谓，如大红、普蓝、柠檬黄等。色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性，而色相也就是由原(元)色、间色和复色来构成的。
在这里插入图片描述

加色原理三原色（物理光学）

红绿蓝

减色原理三原色（美术学）

红黄蓝

明度

在这里插入图片描述

色彩的明暗程度，亦称“亮度”
明度对纯度产生影响。明度不仅决定物体照明程度，而且决定物体表面的反射系数。如果我们看到的光线来源于光源，那么明度决定于光源的强度。如果我们看到的是来源于物体表面反射的光线，那么明度决定于照明的光源的强度和物体表面的反射系数。

简单说，明度可以简单理解为颜色的亮度，不同的颜色具有不同的明度

其中黄色明度最高，紫色明度最低，
绿、红、蓝、橙的明度相近，为中间明度。
在同一色相的明度中还存在深浅的变化。如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。

纯度（饱和度）

色彩的饱和程度，亦称“鲜艳度”、“纯净度”。纯度不够时，色相区分不明显

一种颜色的鲜艳度取决于这一色相发射光的单一程度。
人眼能辨别的有单色光特征的色，都具有一定的鲜艳度
不同的色相不仅明度不同，纯度也不相同

多色相组合-体现欢乐活泼气氛

在这里插入图片描述

单色相组合-简洁明了

在这里插入图片描述

高明度组合-简约时尚大气耐看

在这里插入图片描述

低明度组合-炫酷夺目

在这里插入图片描述

低纯度组合-经典耐看、男性化、沉稳

在这里插入图片描述

高纯度组合-视觉冲击力强，偏年轻化

在这里插入图片描述

色彩情感

色彩的冷暖感

暖色：人们见到红、红橙、橙、黄橙、红紫等颜色后就联想到太阳、火焰、热血等物像，产生温暖、热烈、危险等感觉，使人产生冲动情绪。
冷色：见到蓝、蓝紫、蓝绿等色后，则容易联想到太空、冰雪、海洋等物像，就会产生寒冷、理智、平静等感觉。

色彩的软硬感（轻重感）

其感觉主要也来自色彩的明度，但与纯度亦有一定的关系。明度越高感觉越软，明度越低则感觉越硬，但白色反而软感略改。

明度高、纯底低的色彩有软感，中纯度的色也呈柔感，因为它们易使人联想起骆驼、狐狸、猫、狗等好多动物的皮毛，还有毛呢，绒织物等。
高纯度和低纯度的色彩都呈硬感，如它们明度又低则硬感更明显。色相与色彩的软、硬感几乎无关。

在这里插入图片描述

色彩的前后感

由各种不同波长的色彩在人眼视网膜上的成像有前后，红、橙等光波长的色在后面成像，感觉比较迫近，蓝、紫等光波短的色则在外侧成像，在同样距离内感觉就比较后退。
实际上这是视错觉的一种现象

一般暖色、纯色、高明度色、强烈对比色、大面积色、集中色等有前进感觉
冷色、浊色、低明度色、弱对比色、小面积色、分散色等有后退感觉

色彩的华丽质朴感

色彩的三要素对华丽及质朴感都有影响，其中纯度关系最大。

明度高、纯度高的色彩，丰富、强对比色彩感觉华丽、辉煌
明度低、纯度低的色彩，单纯、弱对比的色彩感觉质朴、古雅
无论何种色彩，如果带上光泽，都能获得华丽的效果

冷色系

在这里插入图片描述

暖色系

在这里插入图片描述

坚硬

在这里插入图片描述

柔软

在这里插入图片描述

华丽

在这里插入图片描述

质朴

在这里插入图片描述

色彩体系综合应用

色彩体系概述

初步的了解了色彩的感情因素，但是我们会发觉其实很多时候，色彩运用其实也是有他的规律的，就好比我们在看到蓝色的广告的时候，就会联想到冷饮，冰棒，或者游泳池。

楼盘站一般会使用金色搭配咖啡色，或是采用大量的绿色素材进行装点。
女性站点会用上红色搭配紫色，或者采用粉红色
娱乐站点一般是采用黑色搭配夸张的红色，浅灰，或者是质感出众的金属色等。

其实色彩的搭配也是有他一定的规律的，规律一般可以从色彩的情感方面取得，也可以从经验取得，也可以从客户自己的VI中取得。
在这里插入图片描述

单色搭配

同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。

特点：
色相相同、明度或纯度不同
优劣：
对比效果统一、文静、雅致、含蓄、稳重，但易产生单调、呆板的弊病

近似色（近似色）搭配

特点：
色相环上相邻二至三色对比，距离大约30度左右，为弱对比类型
如：橙、橙黄、橙红构成的一个相似色，此时主要颜色通常为支配色，相邻颜色为辅助色。
优劣：
效果感觉柔和、和谐、雅致、文静，但感觉单调、模糊、乏味、无力，必须调节差来加强效果

补色搭配

是广义上的对比色。在色环上划直径，正好相对（即距离最远）的两种色彩互为补色。通常选择一种颜色作为主色或优势色，面积较大，另一种为辅助色，面积较小。

特点：
色相对比距离180度左右
优劣：
两种颜色互为补色的时候，一种颜色占的面积远大于另一种颜色的面积的时候，就可以增强画面的对比，使画面能够很显眼。一般情况下，补色运用有得有失。

邻近色搭配

邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱，易于达到页面和谐统一的效果。

特点：
色相距离约60度左右，为较弱对比类型。
优劣：
效果丰富活泼，但又不失统一雅致、和谐的感觉。

分散互补色（分裂色）

包含一种主色、色轮上直线相对的颜色（辅色）以及和辅色相邻的两种颜色。
如：
黄色（主色）、紫色（辅色）、紫红和紫蓝
在这里插入图片描述

三色

色轮上的三等分处的三个颜色，如：蓝绿、橙黄和紫红

四色

两对互补色构成。如：一对黄紫与一对紫红

搭配消色（黑白灰）

所谓的消色，就是指黑白灰，这类颜色由于本身没有色性，所以可以说是万用搭配色。当然，说是说万用搭配色，但是也是有一些需要注意的地方：

首先，由于本身没有色性，他们必须和色性比较强的颜色搭配会比较出效果；
其次，消色与其他颜色搭配的时候，比例一定要控制好，尤其是灰色，灰色是一种很“高档”的颜色，但是问题是使用的过多，会使得页面灰蒙蒙没有质感。

不要将所有颜色都用到，尽量控制在三种色系以内
背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容

忌脏——背景与文字内容对比不强烈，灰暗的背景令人沮丧！
忌纯——艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。
忌跳——再好看的颜色，也不能脱离整体。脱离群众是自取其辱！
忌花——要有一种主色贯穿其中，主色并不是面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。
忌粉——颜色浅固然显的干净，但如果对比过弱，整得苍白无力了。

各web元素的色彩实际应用

网站背景尽可能的选择一些低纯度的颜色。
网页元素根据主次关系依次排列纯度关系。
LOGO → 导航 → 按钮
WEB设计中颜色用得最多的是蓝色与灰色，比较好搭配其他色系，蓝色系比较经典耐看，纯度与明度的变化对颜色本身无太大影响，都可试用。红色与橙色在电子商城网站中应用得特别多。颜色本身热情奔放，视觉冲级强。