我爱房屋

当前位置:主页 > 装修攻略 > 色彩搭配 >

网站色彩搭配之第3章色彩的基本知识(组图)

网站色彩搭配之第3章色彩的基本知识(组图)

时间:2021-11-26 来源:网络整理 作者:爱房屋
导读:对于一个商业网站而言,到底用什么样的色彩进行搭配,才能既好看又合理呢?一般在商业网站中,不采用组色的搭配。力,也产生了一种色彩向浏览者显示或移动,并从页面中突出出来的可视化效果。所示,本应作为页面主角的男人埋没于网站的背景色中,使得页面中心模糊,给浏览者找不到主题的感觉。色彩搭配在网站中的应用1.红色红色给人以热情、活力的感觉。

第三章配色在网站中的应用色彩本身就具有非常微妙的表现力。它们可以产生一种共鸣,刺激人们的大脑对某些形式的物体产生共鸣,并表现出对生活的新看法和态度。色彩的合理运用,拓展了设计师创作的想象空间,赋予创作新的不确定性。3.1 网页配色 网页配色往往是初学者头疼的问题,尤其是那些没有美术基础的人。对于商业网站来说,应该用什么样的颜色来搭配既好看又合理?本节将从最基本的知识入手,帮助读者掌握色彩的运用。3.1.1 颜色基础知识 1. 从色谱开始,“可见光” 连续的彩虹被分解成从蓝色到红色的色谱,如图 3-1 所示。图 3-1 色谱图 在色谱图中,所有的基本颜色都是线性列出的,这也是所有颜色的根源。2 . 色轮在从红色到紫色的光谱中,从其他颜色中选取两种或两种以上的颜色,将相邻的两种颜色相互混合,得到另一种特殊颜色。如此往复,形成首尾相交的环,称为孟塞尔色环,即色环。从本质上讲,色环是由色谱中可以看到的颜色形成的线性连续圆。如图3-2所示,是一个色环。图 3-2 色环 三基色的概念众所周知,

所有的颜色实际上都是由三基色以不同的比例混合而成的。颜色的三基色是红、黄、蓝,色光的三基色是红、绿、蓝。下面将介绍几个关于颜色的重要概念。色调:指颜色的属性,无论是红色、绿色还是蓝色。如图3-3所示,它们是同一张图片的三种色调。图3-3 同一画面中不同色调的纯度:又称饱和度,是指在相同亮度下颜色由灰色变为纯色的变化。图 3-4 显示了饱和度为 -100、0、+100 的相同图片。图3-4 同一画面不同纯度和亮度:从黑到白,加上九个均匀的过渡灰度级,称为亮度,又称亮度尺。图3-5为亮度为-50、0、+50时同一张图片的状态。36 第三章配色在网站中的应用第1部分基本图片3-5不同亮度的相同图片3.1.2常用配色方案1.近似色近似色是给定颜色以外的任何颜色颜色。如果从橙色入手,它的两种近似颜色应该是第二部分中的红色和黄色。如图3-6所示,就是近似颜色在色环上的位置。与色彩相近的实用色彩主题,可以实现色彩的和谐与融合。如图3-7所示,列出了几种相似的配色方案。Example Part 3 图 3-6 近似颜色 图 3-7 使用相似颜色的配色方案如图 3-8 所示,

蓝色系列的组合给人一种酷酷而专业的感觉。美术部分的图3-8使用了颜色相似的商业网站。互补色 互补色又称对比色,是指在色环中直接相对的颜色,如图3-9所示。如果想让网站的颜色突出、充满冲击力,可以选择对比色。如果您正在组合一张橙色的图片,使用蓝色背景会使橙色更加突出。如图3-10所示。图 3-9 互补色 图 3-10 蓝色背景中的橙色如图 3-11 所示,这是一个使用互补色的网站。大片的橙色和蓝色搭配使用,具有强烈的冲击力,达到视觉震撼的效果。图 3-11 带有互补色的网页 单独的互补色 单独的互补色可以由 2~3 种颜色组成。在色轮上选择一种颜色,其补色在色轮的另一侧。您可以在互补色旁边使用一种或多种颜色。这样一组颜色称为单独的互补色,如图3-12所示。单独的互补色组合可以产生类似于互补色的强烈对比效果,但具有相似颜色的缓冲区,它可以使页面效果更柔和。如图3-13所示,是一个使用单独互补色的网站。这个网站的感觉是明亮的,但不是太突出。

图 3-14 显示了色轮上的一组颜色。Part 2 Real 图3-14 色轮上的一组颜色示例 由于三种颜色形成对比关系,当这组颜色作为颜色主题时,会引起观看者的不适感。商业网站一般不使用颜色组合。3.1.3 配色的选择 配色是访问者访问首页时无法回避的设计元素。当浏览者看到网站的标题时,第 3 部分已经决定不应低估配色的效果。不经意间,浏览者对网站的印象是固定的,就像第一次去别人家一样,在和主人说话之前,先看看客厅的装修风格,可以大致猜出主人的性格。因此,根据网站的整体风格来选择网站的配色方案是非常重要的。当网站的内容、标题和配色方案一致时,将是最有效的。欢快的内容加上明快的配色,更能传达出发自内心的艺术喜悦。相反,与网站内容不匹配的颜色会造成混乱并产生破坏性影响。如图3-15所示,是迪奥国际网站的香水产品推广页面。左图采用金色作为页面的主页面色,高贵典雅,彰显产品的高格调和高品位。右图使用了蓝色调,虽然也显示了页面的和谐,但是不能表达产品的内涵,所以感觉有点跑题,淡化了页面的主题。39 图3-15 根据网站内容确定配色 本节介绍几种配色方案的效果,帮助用户掌握使用颜色定位网站的技巧。

相关阅读

  • 浅绿色配什么颜色好看?不尽怎么搭配好呢?

    浅绿色配什么颜色好看?不尽怎么搭配好呢?

    那么,浅绿色配什么颜色好看?一、浅绿色配什么颜色好看浅绿色配什么颜色好看1、搭配白色而浅绿色是一种很洋气的颜色,所以特别适合搭配白色,无论是上班,还是出门旅游,都可以吸引到别人的注意。浅绿色配什么颜色好看2、搭黑色浅绿色配什么颜色好看3、搭米色浅绿色配什么颜色好看4、搭灰色浅绿色配什么颜色好看5、搭橙色浅绿色配什么颜色好看6、搭卡其色

  • 色彩搭配口诀大全,你值得拥有!(珍藏版)

    色彩搭配口诀大全,你值得拥有!(珍藏版)

    色彩搭配口诀:1.色彩颜料配色口诀.:常运用下述三定律将不同的着色物质按一定比例混拼,进行颜色复制.颜色搭配需要遵循三个原则,就会搭配的很好看,也会很得体,很时尚.我刚学美术,学色彩,我想问一下,色彩的颜色怎么来调,就是什么颜色和什么颜色可以得到什么颜色,有没有口诀?按比例调色,每个格子的两种颜色的比例都要是相同的.色彩的搭配有没有什么口诀,我不会搭配颜色!画画色彩搭配有什么技巧?