今天给大家讲讲Web Design中的颜色设计（Color Design）。当你第一次点进一个网页时，吸引你的第一眼是什么？内容？字体？布局？都不是，最吸引你第一眼的，是颜色。为什么会这样？科学的解释是，颜色是通过眼、脑和我们的生活经验所产生的对光的视觉感受，而且是直接的，没有进行任何思考的感受，而网页中的其他部分，很多都是要经过我们大脑过滤以后才会被记住。Web设计中为什么对主题色设计很看重？第一就是因为，它能影响网站带给用户的第一感觉，第二就是用户对于使用网站的接受度以及舒适度。你让用户觉得舒服了，就说明你的网站主题设计成功了。那么，如何进行主题颜色设计呢？以及如何设计好一个网站的主题颜色呢？下面我就给大家从理论到实践简要的介绍一下。颜色 理论我们要怎么才能知道我们选择的颜色搭配是否好看呢？这就要设计到颜色理论了。无论是艺术家还是设计师，在创作或者设计的过程中，都是遵循基本的颜色理论而进行的。也许有些人觉得很高深。其实每个人都可以通过颜色理论做到颜色的最佳搭配。基础色论大家上过学的肯定都知道三原色。三原色包括了三种色彩中不能再分解的基本色：红色（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（色环）颜色搭配方式公式一：单色搭配单色搭配也是最简单的颜色搭配，你需要一种颜色就可以了，只需要根据你的主题或者公司形象来选择一种比较合适的颜色。然后添加一些相似的色调，调整一下饱和度或者明度就行了。比如：高明度页面展示：低明度页面展示：公式二：相似色搭配使用色环上临近的颜色进行搭配。同类色的配色需要选择色相环上间隔角度在60°以内的色彩，由于色相对比差异不是很大，会起到协调统一、稳定自然的效果，但为了避免呆板单调，在设计中可以调整色彩的明暗度属性。比如，选择如下色环：高明度页面展示：低明度页面展示：公式三：互补色搭配顾名思义，也就是使用色环面对面的两种颜色进行搭配。在色相对比配色中，同类色配色需要通过明暗度的调整来突出同类色间的对比，而这正是对明度对比配色方法的使用。在平面设计中，即便是同样的颜色，不同的明度也会给受众带来不同的感觉，例如高明度的色彩会给人以明朗、积极、醒目的特点，中明度色彩具有比较柔和、高雅的特点，而低明度则更加严肃、庄重、压抑。比如如下的搭配：生成效果如下：高明度：低明度：公式四：分裂色彩搭配这种配色的色彩选择在色相环上的夹角一般都在120°以上，能够体现出强烈而鲜明的色彩对比与矛盾冲突，一般用于需要着重说明的独立视觉元素，或者是需要突出的主题信息。此外还有配色在色相环上夹角为180°互补色配色方法，这种配色选择属于对比色配色的范围内，但由于色彩对比最为强烈，因此画面效果与对比色相比会更加丰富。比如，搭配如下颜色：生成的效果如下：高明度：低明度：公式五：矩形搭配看名称就知道，选取色环矩形四个角上的颜色作为搭配色进行搭配。矩形搭配的应用场景是一种主色，其他三种都是辅助色进行搭配。如：高明度页面展示：低明度页面展示：这个好像有点丑颜色搭配的基本原则基本上就是上面的几条，大家可以看到，有些颜色搭配出来的效果并不是很好，所以大家在选择自己的颜色搭配时，要根据自己的情况来选择，但是应用的搭配方式基本上都是这些。颜色搭配原则原则一 鲜明性 鲜明的颜色搭配能够极大的吸引用户的注意力，对于一些广告网站或者宣传网站来说比较合适，避免使用单一的颜色，同时也不可留下过多的色彩，而且应该以明快、鲜亮的色彩为主。当然，选择颜色时也要符合公司的发展理念。原则二 合理性不要使用天马行空的颜色，不要使用过多的颜色进行搭配，越简单越合理。原色三 平衡性无论任何事物，平衡很重要。颜色也不例外。具体上可以从色调、色相、色域三方面入手。首先，色调是画面色彩的整体倾向，是作品中颜色体现最为明显的特征，而利用色调平衡，则可以控制画面的色彩倾向，想要保持色带的平衡一方面可以在对比强烈的颜色间添加中间色，以起到衬托的作用，另一方面也可以对对比色的属性进行简单的调整。由上面两张图可以看出，颜色的平衡性多么重要。我们在进行颜色搭配时，还要遵循一个原则，就是每一种颜色都有自己的表达意义。比如：明亮的颜色往往 能够带来有趣或者现代感的氛围低饱和度的色彩搭配往往受到商业公司的喜爱：颜色搭配网站最后给大家推荐一些比较好的颜色搭配的网站：A. https://picular.co/在这里，你只需要输入你想要的主题，系统就会出现一系列跟你输入的主题有关的颜色供你选择。比如，我在这里选择了sea（大海），就会出现如下界面：B.https://colorsupplyyy.com/app在这里，你可以使用我上面提到的所有方法快速的进行颜色搭配的选择：这是对角线搭配这是近似色搭配这是三角形搭配这是矩形搭配C.http://www.peise.net/tools/web/#这个是我在写这篇文章时用到的网站，在上面，你也可以快速的通过色环进行颜色搭配，还能通过示例网站直接地看到你搭配出来的效果。好了，今天的内容就讲到这里了。感兴趣的就点个关注吧，以后会更新更多有趣的内容给大家！谢谢！