紫色渐变

色彩渐变体系

色彩构成基础理论

一、色彩形成

物体表面色彩的形成取决与三个方面，光源的照射、物体本身反射一肝病检查 定的色光、

环境与空间对物体色彩的影响。

光源色：由各种光源发出的光，光波的长短、强弱、比例性质的不同形成了不同

的色光，称为光源色。

物体色：物体色本身不发光，它是光源色经过物体的吸收反射，反映到视觉中的

光色感觉，我们把这些本身不发光的色彩统称为物体色。

色彩组成

基本色

一个色环通常包括12种明显不同的颜色。而对于艺术设计师充分理解的色环和

色论的重要方面，也许不会被我们中的网页设计者们能够充分欣赏。缺少多这方

面的了解，你将会把事情搞乱。

三原色

从定义上讲，三原色是能够按照一些数量规定合成其他任何一种颜色的基色。为

了确定三原色，你必须首先确切明确那一种颜色是你正在使用的中间色。在上小

学时，你可能就知道了三原色：红、黄、蓝，并且你现在用于展示的，仍然是红、

黄、蓝三原色。但是如果你有喷墨打印机的话，花点时间把它的盖子打开，看看

他的墨盒，你能看到红、黄、蓝吗？不能！你可能看到的是四种层色：蓝绿（青）

色、红紫（洋红）色、黄色和黑色。颜色的不同是由于你的电脑用的是正色，而

你的打印机用的是负色。显示器发出的是彩色光，而纸上的墨则吸收灯光发出的

颜色。更进一步的解释就超出了本意要探讨的范围。除了发射与吸收光的不同之

外，本文设计的概念同样适用于正色和负色模式，处于本文的写作目的，我们仅

探讨着正色模式的三原色：红、黄、蓝。

近似色

近似色可以是我们给出的颜色之外的任何一种颜色。如果从橙色开始，并且你想

要它的两种近似色，你应该选择红和黄。用近似色的颜色主题可以实现色彩的融

洽和融合，与自然界中能看到的色彩接近起来。

补充色

正如我们所知道的相对狮子男和天蝎女 色一样，补充色是色环中的直接位置相对的颜色。当你想

使色彩强烈突出的话，选择对比色比较好。假如你正在组合一幅柠檬图片，用蓝

色背景将使柠檬更加突出。

分离补色

分离补色由两到三种颜色组成。你选择一种颜色，就会发现它的补色在色环的另

一面。你可以使用补色那一边的一种或多种颜色。

组色

组色是色环上距离相等的任意三种颜色。当组色被用作一个色彩题时，会对浏览

者造成紧张的情绪。因为三种颜色形成对比。上面所讲的基色和次色组可以被称

作两组组色。

暖色

暖色由红色调组成。比如红色、橙色、黄色。他们给选择的颜色赋予温暖、舒适

和活力。他们也产生了一种色彩向浏览者显示或移动，并从页面中突出出来的可

视化效果。

冷色

冷色来自于蓝色色调。譬如蓝色、青色和绿色。这些颜色将对色彩主题起到冷静

的作用，他们看起来有一种从浏览者身上收回来的效果，于是他们用作页面的背

景比较好。需要注明的是，你将发现在不同的书中，这些颜色组合有不同的名称。

但是如果你能够理解这些基本原则，他们将对你的网页设计是十分有益的。

等待的乐趣

如今大家上网多为宽带了，一只小猫走遍互联网的日子成了过去式，页面大多一

打开就显示完毕，需要loading的只是些flash或者视频。也许也就新天地的艺

术活动会耗费心思做全flash的，但这loading的时间，却已经给狮子和巨蟹 了人小小的惊

喜。

一张纸，一支小小的铅笔，独自在上面涂鸦了点儿，然后悠悠地停作了你的鼠标

指针。等着无聊吧，晃悠了鼠标两下，接着画了呢～再晃、再画，图案渐渐清晰

跃然眼前，涂鸦得不亦乐乎，loading完毕还有点意犹未尽的味道。

活动共有三个图案，每次loading随机出现一种，小兔特别尝试多次，都试了一

下～:)

小力气，大文本细读 作用

这是我自己想出来的点儿，用户在网站上做某种交互时，所耗的“力气”有多

大？做个操作之前要想多久、整个过程有多少操作、动多少脑筋？所耗的力气小，

用户去参与的可能性也就相对来说大些。

国外有人想出ClickComments增加blog读者的互动，国内有也有了这样的新闻

心情评论，似乎还有了新闻的心情排行榜～这随手一点，表达感受，简单的互

动让用户更容易参与进来。

除了与网站内容的交互，人与人之间的互动也有简便的办法啦。如果不高兴发个

消息什么的，在Facebook里有Poke，在怪兽可以打招呼：

也许每天在互联网上接触大量的信息，也有点懒，不愿意经常留言评论或者频频

给人发消息。因此这种小力气的活儿，总是让我很有好感。遇到怪兽口水吧的签

名，潜水居多的我也顺手签了一个～第二次去立即发现了好处，签过名的吧，在

口水吧的首页就能进去啦～这些小功能，不仅有趣，也能带来便利呢。

不只是模仿

Flickr被和谐了，于是在国内觅个替代。试过了巴巴变，纯粹一个翻版。用到

Yupoo，一个小小的细节却让我感到了一种“不只是模仿”的用心——虽然仅仅

只是鼠标悬停时一个平滑地展开。

细节的力量

最后，和上次一样来说个生活中的例子，来作为我的总结。一次和BF外出逛街，

累了饿了，附近一路上都没看见中意的店，不怎么喜欢PizzaHut，但也就去了。

但之后，那家PizzaHut被他喻为“服务最好的匹萨店”。我自己回想，那家店

哪里与众不同了呢？文明用语？上菜及时？其实最重要的只是源于这样一个细

节：等我们坐下，开始点单时，服务员小姐问道：“请问两位觉得空调的温度合

适吗？是否需要来两杯冰水？”那时只是春末初夏，并不热，只是小兔体虚太容

易出汗，那时候正在拿着手帕抹汗。我出汗过多的问题，连我妈都不当回事儿，

大概就BF和贴心好友才体恤我的不便，但是这家PizzaHut的营业员却想到了。

之后他们的表现也中规中矩，由于那个细节带来的良好印象，让我们整体给了他

们高分。

一两个出彩或者贴心的细节，也许不能就此决定整个产品/服务的好坏，但细节

的力量是可以累积的。回到上文中提到的那家PizzaHut，服务员用语文明、反

应即时(后来还要过一杯温水，也是马上就来)、也想到询问甜点是否等餐后再上

——再加上那个特别贴心的细节，才造就了他们给人的良好整体印象。因此我始

终坚信，用户体验要靠从细节处累积。正是有了每一处的用心，和那些闪光点，

才会有真正出色的产品。

色彩对比

两种以上的色彩，以空间或时间关系相比较，能比较出明显的差别，并产生比较

作用，被成为色彩对比。该想象分为两大类：同时对比和连续对比。

色相对比

因色相之间的差别形成对比。当主色相确定后，必须考虑其他色彩与主色相是什

么关系，要表现什么内容及效果等，这样才能增强其表现力。

将相同的橙色，放在红色或黄色上，我们将会发现，在红色上的橙色会有偏黄的

感觉，因为橙色是由红色和黄色调成的，当他和红色并列时，相同的成分被调和

而相异部分被增强，所以看起来比单独时偏黄，以其他色彩比较也会有这种现象，

我们成为色名对比。除了色感偏移之外，对比的两色，有时会发生互相色渗的现

象，而影像相隔界线的视觉效果，当对比的两色，具有相同的彩度和明度时，对

比的效果越明显，两色越接近补色，对比效c1车型 果越强烈。

明度对比

因明度之间的差别形成的对比。（柠檬黄明度高，蓝紫色的明度低，橙色和绿色

属中明度，红色与蓝色属于中低明度）。

明度对比

将相同的色彩，放在黑色和白色上，比较色彩的感觉，会发现黑色上的色彩感觉

比较亮，放在白色上的色彩感觉比较暗，明暗对比效果非常强烈明显，对配色结

果产生的影响，明度差异很大的对比，会让人有不安的感觉。

纯度对比

一种颜色与另一种更鲜艳的颜色对比，会感觉不太鲜明，但与不鲜明的颜色相比

时，则显得鲜明，这种色彩的对比便称为纯度对比。

补色对比

将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜

明，纯度增加篮球动漫 ，成为补色对比。（视觉的残像现象明显）。

冷暖对比

犹豫色彩感觉的冷暖差别而形成的色彩对比，称为冷暖对比。（红、橙、黄使人

感觉温暖；蓝、蓝绿、蓝紫使人感觉寒冷；绿与紫介于其间），另外，色彩的冷

暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。

经典论坛讨论：

/

Ps色彩渐变体系

1.理解渐变的概念，渐变构成是平面的基本构成形式之一，渐变的涵盖非常广

泛，有形状，方向，位置，大小，色彩和骨格渐变，今天讲的就是色彩渐变。

2.视觉感知：我们对平面图像的感知，平面设计是将不同的基本图形，色彩，

亮度按照一定的规则在平面上组合成图案的。主要在二度空间范围之内以轮廓

线，色彩，光影来描绘形象。而平面设计所表现的立体空间感，并非是在的三度

空间，而仅仅是图形对人的视觉引导作用形成的幻觉空间。从下图中我们可知A

与B的颜色是一样。（#6b6b6b）

渐变模式：主要是角度、线条（线性），径向，对称，菱形这五种渐变，

还有一种不常用的杂色渐变。如下图

色彩模式：一般可分为两种，一种是纯色（单色）渐变，一种是混色渐变，

如下图

5.渐变的方式多种多样，通过不同的渐变模式可以创建出神奇的色彩效果，Ps

色彩渐变是根据色标间的不同色彩进行色彩上的过度而不同的设置往往会产生

多种不同的样式，一个渐变条中的可以有多种渐变，一是对比渐变，请看下图（是

土黄和蓝色的各自的纯色渐变，我们接着看他的色标位置，中间的白色色标和土

黄色色标几乎贴在了一起，这就产生了强烈的对比）

二是柔和的渐变（也就是常规渐变）

6.角度渐变模式的特殊效果，角度渐变中当色标的首标色和尾标色相同时就会

出现如下图（橙黄渐变）这种效果。

7.透明度对渐变的影响。我们看下面的实例，同样是用对比渐变的色标，在一

定透明度的数值下，多次渐变的效果，产生出层层叠叠的层次感。

8.对比渐变邮政编码英文 与低透明度的结合的效果（如下图）。我们看他的色标，蓝—蓝—

白—白，中间的蓝色标和白色标重叠到了一起，然后用菱形渐变，看一下效果，

产生了方形的层叠感。

9.色标透明度的应用之一，效果如下图，产生了彩虹效果，再观察他的色标，

蓝—绿—黄—红，在右端聚集到了一起，有微小的过度，这就产生了彩虹的特效。

10.色标透明度的应用之二，效果如下图，产生放射效果，再看色标，红—红—

红，中间透明，红色是以色块形式存在的，渐变模式是角度渐变，这也可以说是

对比渐变的应用之一，比如我们如果吧色标设置成红—黄—红—黄，这样的色块

（注意是色块），那么就能得到红色块和黄色块放射的效果。

11.流行渐变效果制作实例很多人认为这是Web2.0，其实说真的和Web2.0扯不

上关系，只是因为是一是这种大胆效果刚刚出现不久，二是许多Web2.0网站都

采用这种效果，而我们现在就学习这种效果的表现之一，高光。高光可以通过很

多方式实现，不过这种方式是色彩渐变中的直接高光，好了，现在看看效果图（下

图），看，不论是字体和按钮，标题栏（按钮拉长后）都可以应用，我们拿第一

个紫色渐变来说，在混合模式中进行如下设置，描边，内发光，渐变叠加（色标

叠加，描边色是渐变中的最深色）。

12.杂色渐变的应用，杂色渐变由于色彩控制能力低，通常为教学者所遗弃，这

里主要是将他的应用之一，设置如下图H,S,B，纯色渐变时，H取值两端不变，S

和B改变，即可直观的得到柔和的纯色渐变，而如果通过制定色标渐变的方式，

那么只有点击一下鼠标才可以看到效果，而这种方式在鼠标拖动时就可以看到效

果，多色渐变，固定B和S数值，就可以达到较理想的效果，这只是一种方法，

至于好坏那就看个人喜好了。

13.渐变的色块现象

（1）出现在色彩较大的过度强烈的色彩渐变上，在数值太小的范围内与数值较

大的范围内不易产生色块，而数值中等范围色彩对比又较大则容易产生，（如下

图）

（2）出现在保存品质上，品质过低就会产生色块，网页制作中需注意。

14.渐变的叠加模式，渐变的叠加模式和图层的叠加模式一样。