Web设计之颜色设计 让你的网站熠熠生辉

今天给大家讲讲Web Design中的颜色设计（Color Design）。

当你第一次点进一个网页时，吸引你的第一眼是什么？内容？字体？布局？都不是，最吸引你第一眼的，是颜色。为什么会这样？科学的解释是，颜色是通过眼、脑和我们的生活经验所产生的对光的视觉感受，而且是直接的，没有进行任何思考的感受，而网页中的其他部分，很多都是要经过我们大脑过滤以后才会被记住。

Web设计中为什么对主题色设计很看重？第一就是因为，它能影响网站带给用户的第一感觉，第二就是用户对于使用网站的接受度以及舒适度。你让用户觉得舒服了，就说明你的网站主题设计成功了。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

那么，如何进行主题颜色设计呢？以及如何设计好一个网站的主题颜色呢？下面我就给大家从理论到实践简要的介绍一下。

颜色 理论

我们要怎么才能知道我们选择的颜色搭配是否好看呢？这就要设计到颜色理论了。

无论是艺术家还是设计师，在创作或者设计的过程中，都是遵循基本的颜色理论而进行的。也许有些人觉得很高深。其实每个人都可以通过颜色理论做到颜色的最佳搭配。

基础色论

大家上过学的肯定都知道三原色。三原色包括了三种色彩中不能再分解的基本色：

红色（Red）、黄色（Yellow）以及蓝色（Blue），这三种颜色也被称为 Primary Color。

两种原色叠加，可以生成另外一种颜色，也被成为二次色 Secondary Color（由两种Primary Color组成的颜色）

其中，红色+黄色 = 橙色；黄色+蓝色 = 绿色；蓝色+红色 = 紫色

如果我们混合更多的颜色，相应的也会生成更多不同的颜色，也被称为第三色 Tertiary Colors（由一种Primary Color和一种Secondary Color叠加而成），命名也是根据叠加的两种颜色共同命名的，比如Yellow-orange橙黄色以及Blue-green蓝绿色等等。

而这些所有生成的颜色，则组成了我们经常听说的Color Wheel（色环）

基于红色，黄色和蓝色的色环在艺术领域中是传统的。艾萨克·牛顿爵士于1666年开发出第一个颜色圆形图。从那时起，科学家和艺术家就研究并设计了这一概念的多种变体。关于一种格式相对于另一种格式的有效性的意见分歧继续引发争论。实际上，任何呈现逻辑排列的纯色调序列的色环或色轮都具有优点。

有了色环，再简单介绍一下颜色的三个基本特性（色彩三要素）：色调（Hue）、饱和度（Saturation）、明度（Value）。这三种特性在PS学习中是必须掌握的。

色调（色相）：色彩是由于物体上的物理性的光反射到人眼视神经上所产生的感觉。

饱和度：用数值表示色的鲜艳或鲜明的程度称之为彩度

明度：表示色所具有的亮度和暗度被称为明度

那么我们如何将这些理论用在我们实际的设计过程中呢，如何通过理论来创建专业的、有效的颜色搭配呢？

除了艺术天赋以外，实际上是有一些颜色搭配方式和公式的，下面就给大家介绍一下如何通过一些技巧来形成比较好的颜色搭配。

而你所需要的，只有Color Wheel（色环）

颜色搭配方式

公式一：单色搭配

单色搭配也是最简单的颜色搭配，你需要一种颜色就可以了，只需要根据你的主题或者公司形象来选择一种比较合适的颜色。然后添加一些相似的色调，调整一下饱和度或者明度就行了。比如：

高明度页面展示：

低明度页面展示：