配色挑得好,界面level立马高!

一个网页打开来，布局、颜色和文字是给访问者的第一印象，而这也很大程度决定了用户会继续访问还是甩头就走。配色和配图都是一个网页很重要的外套。今天我们就来聊聊配色这个事儿。

“当你从自然里摄取灵感时，你会发现颜色的组合是无穷无尽的。”
——Gary（CO-OP）

1.颜色三大特性

首先一定要记住颜色的三个特性，即色相、明度和饱和度！！配合图片立马记住！不要再HSB傻傻分不清楚了！

H	色相	决定是什么颜色
S	饱和度	决定颜色的浓淡
B	明度	决定照射在颜色的白光有多亮

颜色特性直观图.jpg

2. 配色要在网站搭建初期定好

无论是网页还是平面，每个作品的色彩搭配都不是凭空而来的。决定色彩之前一定要配合原先设定好的风格、基调、定位和面对用户群等等。值得注意的是，主色调最好在搭建网站的初期就敲定，之后的辅助色和点缀色会更好安排，也会更加融合。

日本一个设计师提出过一个配色的黄金比例，是70:25:5。这之中，70%为主色调，25%为辅助配色，5%为点缀色。在单一一个作品里，色彩最好不超过三种，也就是不超过三种色相。

3. 取色规律小结

1. 单色+同色系微调

2. 双色+点缀色（双色深点缀色浅，或者双色浅点缀色深为最佳）

3. 三色以上是难度较大的配色方法！新手最好不要尝试

4. 尽量不要使用颜色选择器右上角的颜色

   
   右上角色.jpg

5. 色轮上对角色（如黄色和蓝色构成撞色，网页整体看起来会更加活力）

   
   色轮.jpg

好用的配色网站推荐

1. Color Scheme Designer

亮点：可直接查看在线生成的网页配色效果，并设有高明度和低明度网页的演示

示例：以红色为基色

• 高明度网页演示

  
  Color Scheme Designer_bright.png

• 低明度网页演示

  
  Color Scheme Designer_dark.png

2. COLOROTATE

亮点：提供已有色卡方便用户提取

colorotate.png

3. colormunki

亮点：用户上传图片，可解析图片内颜色并生成配色色卡

colormunki.png

激发配色灵感的好链接

《布达佩斯大饭店》的配色哲学【韦斯·安德森的色彩世界】 （强推！！）
2018年Behance和Dribbble最佳UI设计配色总结
取色及色彩搭配—Adobe Color CC