网页设计配色原则(网页设计配色基本原则)

本文主要介绍网页设计的配色原则(网页设计配色的基本)，下面跟着东辰网详细了解一下吧。

我仍然清楚地记得我最早的美术课。那时候的我，还是一个对什么都充满渴望的小孩子。我涂了很多漂亮的彩色颜料。我还记得开始次看到原色和另一种颜色混合成为第二种颜色时的激动心情，而且我觉得既然两种颜色能创造出一种全新的美丽颜色，那么所有的颜色加在一起一定会更好！最后，我很失望的发现，无论我怎么搭配，只要按照自己的想法使用所有的颜色，都只能得到一个很差的颜色，只能用可怕！

许多年后，当我还是一个初出茅庐的网页设计师时，我又经历了同样的过程。在学习的过程中，我不可避免地陷入了——使用太多颜色的陷阱，或者以错误的组合了许多颜色，最终使结果有点恐怖。

我开始努力研究如何创建网页的配色方案，同时也找到了很多关于色彩理论的优秀知识。我看的是色相(色)、淡色、浓淡、色调、饱和度、明度，还有模拟色、单色、三原色、补色、混色的配色。

然而，没有实用的框架来应用这些信息。我发现，起初，这些色彩理论并没有帮助我更好地设计网站配色方案。事实上，直到我开始通过试错创造一个可靠的配色方案，我所见过的所有色彩理论才开始有意义。

在这个过程中，我捡了一些安全指南和对于一开始就想知道的网站配色。刚开始的时候，所有的色彩理论都不一定是你需要的。通常在学习和练习的过程中，你需要像滚雪球一样一点一点的增加理论知识。

在本教程中，我将与您分享六个教训。你可以跟着can不要出错掌握色彩在网页设计中的应用指南。这些不是规则。你可以在职业生涯中创造更多的配色，让它向完全不同的方向发展。相反，这只是一个起点，一个安全指南，教你如何避免测试水和开始次在网页设计和不成为可怕。

1.配色是画布，不是绘画

网页设计中一个最基本的原则是，无论你花多长时间创造一个华丽的设计，它的最终作用是衬托这场秀中真正的明星——。网页设计不应该让色彩搭配更加活泼而不是内容显示。你的设计应该在后台，以帮助将网站的内容推到前台。

用Photoshop或素描软件设计网站时，创作设计的过程往往是相互独立的。有些设计很单一它看起来很好，可以被你的客户接受，但当它真的被设计成网页时，不恰当的颜色搭配往往会分散访问者的注意力。事实上，网页设计的过程与内容密切相关，但有许多高质量的网站设计几乎没有内容。

It对于——来说，把你想要的内容样本放在设计软件的这个位置或者直接放在代码中是一个好主意，然后围绕它进行设计。尤其是当涉及到特定风格的照片或图像时，这样你才能确保你的设计与它们相协调。想象一下，你的网站内容是一个独特的个体，你必须为它设计一个完美的配件。

2.从简单的灰色模式开始。

你可以为你背景和文字选择无数种色调。不过我的建议是先掌握最简单的，白色或者浅灰色的背景，配深灰色的文字。

如果你观察热门网站选择的模板或主题，你会发现它们大多使用深灰色文本，背景为白色或浅灰色，这是有道理的。这种组合基本上确保了访问者的可读性，并允许基于内容的文本和图像进入前台。

用一些例子做一个基本的灰色布局，比如:

一般来说，你应该避免使用纯黑色文本。深灰色相对更容易阅读。比较舒服的范围是#333333到#666666。

基于以上，任何文本正文中最安全的背景色都是全白#FFFFFF。对于其他背景元素，背景颜色的范围可以从#FFFFFF到#CCCCCC。

再说一次，这些不是你必须使用的颜色指南，而只是你开始安全设计的一些指南。

3.仅选择一种强调色

配色最常见的错误就是用了太多的颜色。你用的颜色越多，你就越难把它们都控制住。所以一开始，只添加一种额外的颜色来强调链接、某些标题、菜单、按钮等元素是非常有用的。你的强调色可以是蓝色、绿色、红色或任何你喜欢的颜色。

首先在基本图上画一个强调颜色的矩形框，这样您就可以测量颜色是否与页面上的所有元素相匹配。然后打开颜色选择器，选择颜色面板右上角四分之一中心的颜色。

上下移动滑块，选择您认为适合您的设计的颜色。

到目前为止，您已经使用了三种基本颜色:背景色、文本色和强调色。你可以也应该在将来使用多种强调色，但是它最好现在就考虑一下。既然你已经用过三种颜色，请熟悉它们。当你更自信的时候，你可以增加更多的颜色。

你已经学会了:

你学会了如何选择色调。简而言之，色相是一种基本的颜色。当你上下移动滑块，你会看到你的。的价值h在颜色选择器中是不断变化的。

H代表色调。选择强调色后，文本框中的值就是色调值。

4.如果有疑问，使用蓝色。

如果您对选择哪种强调色有任何疑问，请使用蓝色。蓝色通常是最灵活的颜色，适合大多数网站类型。紫色、黄色等颜色可以很活泼，但如果使用不当，会立刻变得很花哨。

另一方面，你可以在强调蓝色的基础上自由发挥，但你可以不要走得太远。如果你不不知道从哪里开始学习或者在项目中使用什么颜色，就使用蓝色。如果要选择特别的蓝色，可以选择深蓝(H值23)到浅绿(H值19)的范围，保证自己处于安全的领地。

在我的布局示例中，我选择了一个值为205的色调。当你选择了强调色，在你认为必要的地方添加它。如果您在按钮或任何其他包含文本的区域中使用强调颜色，请相应地更改文本的颜色。在本例中，我将强调颜域上方的文本改为白色。

5.添加对强调颜色的更改

选择强调色后，保持色调滑块的位置不变。你现在需要在你的设计中添加额外的颜色，但是为了让事情更简单，这些颜色都是你选择强调的颜色。

在颜色选择器上围绕强调色拖动颜色选择点，以创建颜色变化。

在这些元素上使用颜色变化:

悬停效应

设计

在颜色上强调文字

逐渐变化

光影的效果

6.避开调色板右上角的位置。

颜色选择器的右上角是高纯度颜色。右上角的颜色像一级方程式赛车。他们的执行力很惊人，很吸引人，但是我们一般需要足够的经验才能很好的驾驭他们。如果你没有经验，他们可能会造成事故，所以它it’最好尝试使用更柔和的颜色。

那个这就是为什么我在本教程的第三部分要求你选择右上四分之一中心的颜色，以确保你从一个相对柔和的颜色开始。

为了说明这一点，让让我们看看，如果我只改变设计的色调，停止移动颜色选择器，会有什么样的效果。

它看起来仍然很漂亮，不是吗？;tit但是如果我把颜色选择点拖到颜色选择器的右上角，突然就变得不太好了。

天啊，我的眼睛！如果你确定你没有。;我不想烧死访客。;的眼睛，遵循一般的指导方针，以避免右上角的颜色面板进行配色。

您刚刚了解到:

在上两部分中，你已经学会了使用颜色理论的几个不同方面。您学习了如何使用:

饱和度和亮度

当您拖动颜色选择器上的颜色选择点时，您会看到标准普尔和B正在改变，这代表着饱和度和亮度和亮度分别是。同时，你也会看到色相值保持不变。所以你通过改变基色的饱和度和亮度来产生变色。

全部和谐与色彩

饱和度生动地表达了你的颜色。例如，想象我的白衬衫被洒出来的红酒浸透。在颜色选择器上，饱和度取决于你的基本色中混合了多少白色。白色越少，饱和度越高。

当您向右拖动颜色选择点时，您减少了白色的数量并增加了饱和度，因此标准普尔价值上升。当您向左拖动颜色选择点时，您会增加白色的量并降低饱和度，因此标准普尔价值降低。

这种混合基本颜色和白色的也被称为创造一个颜色和颜色。该词来源于颜料混合，即将白色颜料与有色颜料混合。

亮度和色度

亮度是你在颜色中混合了多少黑色。黑色越少，亮度越大。

当您向上拖动选择点时，您减少了黑色的数量并提高了亮度，因此B颜色选择器上的值上升。当您向下拖动选择点时，您会添加黑色，并且B价值下降。

这种混合基本颜色和黑色的也被称为创造色度。这也来源于颜料混合，即将黑色颜料与有色颜料混合。

色彩

当你把基本色和灰色混合在一起，你就创造了一个色调与颜色。当您从样本的右上角移出时，您同时降低了饱和度和亮度，也就是说，您同时增加了白色和黑色，这就创建了色调。所以基本上任何时候，只要你的饱和度和亮度小于100%，这就是一个色相。

同样，该术语来自颜料混合，即灰色颜料与有色颜料混合。这也是单词调光。Isn很酷吧？

单色配色方案

单色配色就是你使用基本色，并在基本色的基础上调整颜色的明暗和色调来展开。你刚刚学习了所有这些术语在实际环境中的含义。因此，通过选择强调色及其颜色变化，您实际上已经创建了一个单色配色方案。

什么？;接下来是什么？

在灰度的基础上继续练习你的单色配色，直到你非常自信。尝试使用不同的色调作为你的强调色，并尝试改变饱和度和亮度。

当你觉得舒服的时候，继续添加额外的强调色。我建议你开始次用橙色和蓝色，因为它们是最和谐的二人组。然后尝试绿色和蓝色，这是我经验中第二简单的。这些组合最容易打动客户。

为了帮助你更好的理解网页设计的配色方案，你能做的最好的事情就是使用浏览器扩展插件颜色采样器抓取颜色样本，比如Colorzilla，开始研究有经验的设计师是怎么做的。当你浏览网页时，你会看到一个很棒的配色方案。使用颜色取样器分离配色方案。分析样本中的每种色调，看看哪种饱和度和亮度效果最好。还要注意这些颜色如何搭配。互相匹配。

如果有疑问，你可以求助于你的安全开始指南，让你远离恐怖。

**********************************************

楼主翻了大量字典，参考专业术语翻译了这篇文章。

如果你觉得文章对你有帮助，请点赞让更多人看到。

我仍然清楚地记得我最早的美术课。那时候的我，还是一个对什么都充满渴望的小孩子。我涂了很多漂亮的彩色颜料。我还记得开始次看到原色和另一种颜色混合成为第二种颜色时的激动心情，而且我觉得既然两种颜色能创造出一种全新的美丽颜色，那么所有的颜色加在一起一定会更好！最后，我很失望的发现，无论我怎么搭配，只要按照自己的想法使用所有的颜色，都只能得到一个很差的颜色，只能用可怕！

许多年后，当我还是一个初出茅庐的网页设计师时，我又经历了同样的过程。在学习的过程中，我不可避免地陷入了——使用太多颜色的陷阱，或者以错误的组合了许多颜色，最终使结果有点恐怖。

我开始努力研究如何创建网页的配色方案，同时也找到了很多关于色彩理论的优秀知识。我看的是色相(色)、淡色、浓淡、色调、饱和度、明度，还有模拟色、单色、三原色、补色、混色的配色。

然而，没有实用的框架来应用这些信息。我发现，起初，这些色彩理论并没有帮助我更好地设计网站配色方案。事实上，直到我开始通过试错创造一个可靠的配色方案，我所见过的所有色彩理论才开始有意义。

在这个过程中，我捡了一些安全指南和对于一开始就想知道的网站配色。刚开始的时候，所有的色彩理论都不一定是你需要的。通常在学习和练习的过程中，你需要像滚雪球一样一点一点的增加理论知识。

在本教程中，我将与您分享六个教训。你可以跟着can不要出错掌握色彩在网页设计中的应用指南。这些不是规则。你可以在职业生涯中创造更多的配色，让它向完全不同的方向发展。相反，这只是一个起点，一个安全指南，教你如何避免测试水和开始次在网页设计和不成为可怕。

1.配色是画布，不是绘画

网页设计中一个最基本的原则是，无论你花多长时间创造一个华丽的设计，它的最终作用是在这个节目中真正的明星——内容。

出发。网页设计不应该让色彩搭配更加活泼而不是内容显示。你的设计应该在后台，以帮助将网站的内容推到前台。

用Photoshop或素描软件设计网站时，创作设计的过程往往是相互独立的。有些设计看起来不错，可以被你的客户接受，但是真正设计成网页的时候，不恰当的配色往往会分散访问者的注意力。事实上，网页设计的过程与内容密切相关，但有许多高质量的网站设计几乎没有内容。

It对于——来说，把你想要的内容样本放在设计软件的这个位置或者直接放在代码中是一个好主意，然后围绕它进行设计。尤其是当涉及到特定风格的照片或图像时，这样你才能确保你的设计与它们相协调。想象一下，你的网站内容是一个独特的个体，你必须为它设计一个完美的配件。

2.从简单的灰色模式开始。

你可以为你背景和文字选择无数种色调。不过我的建议是先掌握最简单的，白色或者浅灰色的背景，配深灰色的文字。

如果你观察热门网站选择的模板或主题，你会发现它们大多使用深灰色文本，背景为白色或浅灰色，这是有道理的。这种组合基本上确保了访问者的可读性，并允许基于内容的文本和图像进入前台。

用一些例子做一个基本的灰色布局，比如:

一般来说，你应该避免使用纯黑色文本。深灰色相对更容易阅读。比较舒服的范围是#333333到#666666。

基于以上，任何文本正文中最安全的背景色都是全白#FFFFFF。对于其他背景元素，背景颜色的范围可以从#FFFFFF到#CCCCCC。

再说一次，这些不是你必须使用的颜色指南，而只是你开始安全设计的一些指南。

3.仅选择一种强调色

配色最常见的错误就是用了太多的颜色。你用的颜色越多，你就越难把它们都控制住。所以一开始，只添加一种额外的颜色来强调链接、某些标题、菜单、按钮等元素是非常有用的。你的强调色可以是蓝色、绿色、红色或任何你喜欢的颜色。

首先在基本图上画一个强调颜色的矩形框，这样您就可以测量颜色是否与页面上的所有元素相匹配。然后打开颜色选择器，选择颜色面板右上角四分之一中心的颜色。

上下移动滑块，选择您认为适合您的设计的颜色。

到目前为止，您已经使用了三种基本颜色:背景色、文本色和强调色。将来，你可以并且应该使用多种强调色，但是现在大多数好吧，考虑一下。既然你已经用过三种颜色，请熟悉它们。当你更自信的时候，你可以增加更多的颜色。

你已经学会了:

你学会了如何选择色调。简而言之，色相是一种基本的颜色。当您上下移动滑块时，您会看到H你的颜色选择器是不断变化的。

H代表色调。选择强调色后，文本框中的值就是色调值。

4.如果有疑问，使用蓝色。

如果您对选择哪种强调色有任何疑问，请使用蓝色。蓝色通常是最灵活的颜色，适合大多数网站类型。紫色、黄色等颜色可以很活泼，但如果使用不当，会立刻变得很花哨。

另一方面，你可以在强调蓝色的基础上自由发挥，但你可以不要走得太远。如果你不不知道从哪里开始学习或者在项目中使用什么颜色，就使用蓝色。如果要选择特别的蓝色，可以选择深蓝(H值23)到浅绿(H值19)的范围，保证自己处于安全的领地。

在我的布局示例中，我选择了一个值为205的色调。当你选择了强调色，在你认为必要的地方添加它。如果您在按钮或任何其他包含文本的区域中使用强调颜色，请相应地更改文本的颜色。在本例中，我将强调颜域上方的文本改为白色。

5.添加对强调颜色的更改

选择强调色后，保持色调滑块的位置不变。你现在需要在你的设计中添加额外的颜色，但是为了让事情更简单，这些颜色都是你选择强调的颜色。

在颜色选择器上围绕强调色拖动颜色选择点，以创建颜色变化。

在这些元素上使用颜色变化:

悬停效应

设计

在颜色上强调文字

逐渐变化

光影的效果

6.避开调色板右上角的位置。

颜色选择器的右上角是高纯度颜色。右上角的颜色像一级方程式赛车。他们的执行力很惊人，很吸引人，但是我们一般需要足够的经验才能很好的驾驭他们。如果你没有经验，他们可能会造成事故，所以它it’最好尝试使用更柔和的颜色。

那个这就是为什么我在本教程的第三部分要求你选择右上四分之一中心的颜色，以确保你从一个相对柔和的颜色开始。

为了说明这一点，让让我们看看，如果我只改变设计的色调，停止移动颜色选择器，会有什么样的效果。

它看起来仍然很漂亮，不是吗？;tit但是如果我把颜色选择点拖到颜色选择器的右上角，突然就变得不太好了。

天啊，我的眼睛！如果你确定你没有。;我不想烧死访客。;的眼睛，遵循一般的指导方针，以避免右上角的颜色面板进行配色。

您刚刚了解到:

在上两部分中，你已经学会了使用颜色理论的几个不同方面。你学会了如何制作使用:

饱和度和亮度

当您拖动颜色选择器上的颜色选择点时，您会看到标准普尔和B正在改变，这代表着饱和度和亮度和亮度分别是。同时，你也会看到色相值保持不变。所以你通过改变基色的饱和度和亮度来产生变色。

饱和度和颜色

饱和度生动地表达了你的颜色。例如，想象我的白衬衫被洒出来的红酒浸透。在颜色选择器上，饱和度取决于你的基本色中混合了多少白色。白色越少，饱和度越高。

当您向右拖动颜色选择点时，您减少了白色的数量并增加了饱和度，因此标准普尔价值上升。当您向左拖动颜色选择点时，您会增加白色的量并降低饱和度，因此标准普尔价值降低。

这种混合基本颜色和白色的也被称为创造一个颜色和颜色。该词来源于颜料混合，即将白色颜料与有色颜料混合。

亮度和色度

亮度是你在颜色中混合了多少黑色。黑色越少，亮度越大。

当您向上拖动选择点时，您减少了黑色的数量并提高了亮度，因此B颜色选择器上的值上升。当您向下拖动选择点时，您会添加黑色，并且b价值下降。

这种混合基本颜色和黑色的也被称为创造色度。这也来源于颜料混合，即将黑色颜料与有色颜料混合。

色彩

当你把基本色和灰色混合在一起，你就创造了一个色调与颜色。当您从样本的右上角移出时，您同时降低了饱和度和亮度，也就是说，您同时增加了白色和黑色，这就创建了色调。所以基本上任何时候，只要你的饱和度和亮度小于100%，这就是一个色相。

同样，该术语来自颜料混合，即灰色颜料与有色颜料混合。这也是单词调光。Isn很酷吧？

单色配色方案

单色配色就是你使用基本色，并在基本色的基础上调整颜色的明暗和色调来展开。你刚刚学习了所有这些术语在实际环境中的含义。因此，通过选择强调色及其颜色变化，您实际上已经创建了一个单色配色方案。

什么？;接下来是什么？

在灰度的基础上继续练习你的单色配色，直到你非常自信。尝试使用不同的色调作为你的强调色，并尝试改变饱和度和亮度。

当你觉得舒服的时候，继续添加额外的强调色。我建议你开始次用橙色和蓝色，因为它们是最和谐的二人组。然后尝试绿色和蓝色，这是我经验中第二简单的。这些组合最容易打动客户。

为了帮助你更好的理解网页设计的配色方案，你能做的最好的事情就是使用浏览器扩展插件颜色采样器来捕捉颜色样本，比如Colorz。通过它我们可以开始研究有经验的设计师是如何做到的。当你浏览网页时，你会看到一个很棒的配色方案。使用颜色取样器分离配色方案。分析样本中的每种色调，看看哪种饱和度和亮度效果最好。还要注意这些颜色如何搭配。

如果有疑问，你可以求助于你的安全开始指南，让你远离恐怖。

**********************************************

楼主翻了大量字典，参考专业术语翻译了这篇文章。

如果你觉得文章对你有帮助，请点赞让更多人看到。

了解更多网页设计的配色原则(网页设计配色的基本原)相关内容请关注东辰网。