配色技巧,给初学者的6条网页设计安全配色指南

2023-10-22 17:45:52 来源/作者: / 己有:1人学习过

4. 如果有疑问,使用蓝色

如果你对选择什么强调色有任何疑问,请使用蓝色。蓝色通常是最灵活的颜色,适合多数的网站类型。紫色和黄色之类的颜色可以是很活泼的,但是如果使用不当的话,立马会变得很花哨。

另一方面,你可以在以蓝色为强调色的基础上随意发挥,但你也不能走的太远。如果你不知道从哪里开始学习或者在项目中使用什么颜色的时候,就用蓝色就对了。如果你要选择特别的蓝色,你可以选择深蓝色(H值235)至浅绿色(H值190)的范围以保证自己在安全的领地。

 

配色技巧,给初学者的6条网页设计安全配色指南

 

在我的布局示例中,我选择值为205的色相。当你已经选定了强调色,将它添加到任何你认为必需的位置。假如你在按钮或任何其他有文字的区域使用了强调色,也要相应地改变文本的颜色。在这个例子中,我将强调色区域之上的文字改成了白色。

 

配色技巧,给初学者的6条网页设计安全配色指南

 

5. 为强调色添加变化

一旦你选定了强调色,将色相(H)滑条位置保持不变。你现在需要为你的设计添加额外的颜色,不过为了让事情变得更简单,这些颜色都是你已经选择的强调色的变色。

在颜色选择器上强调色周围拖动选色点来创建变色。

 

配色技巧,给初学者的6条网页设计安全配色指南

 

在以下这些元素上使用变色:

悬停效果

 

配色技巧,给初学者的6条网页设计安全配色指南

 

边框

 

配色技巧,给初学者的6条网页设计安全配色指南

 

强调色上的文本

 

配色技巧,给初学者的6条网页设计安全配色指南

 

渐变

 

配色技巧,给初学者的6条网页设计安全配色指南

 

光和阴影的效果

 

配色技巧,给初学者的6条网页设计安全配色指南

 

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

颜色选择器上右上角的位置是高纯度的颜色。右上角的颜色像一级方程式赛车,它们的执行力惊人,并且非常吸引人,但是我们一般需要足够的经验才能很好地驾驭它们。如果没有经验的话,它们可能会造成事故,所以最好去尝试使用更缓和的颜色。

这就是为什么我在本教程的第三节让你选择右上角四分之一中心位置的颜色,以确保以一种相对柔和的颜色开始。

为了说明这一点,看一下假如我只改变设计的色相,不再动颜色选择器,会是什么效果。

 

配色技巧,给初学者的6条网页设计安全配色指南

 

它仍然看起来非常漂亮,对吧?但是如果我把选色点拖拽到颜色选择器的右上角,它突然就变得不太好了。