一个网页打开来，布局、颜色和文字是给访问者的第一印象，而这也很大程度决定了用户会继续访问还是甩头就走。配色和配图都是一个网页很重要的外套。今天我们就来聊聊配色这个事儿。
“当你从自然里摄取灵感时，你会发现颜色的组合是无穷无尽的。”
——Gary（CO-OP）
1.颜色三大特性
首先一定要记住颜色的三个特性，即色相、明度和饱和度！！配合图片立马记住！不要再HSB傻傻分不清楚了！
| H | 色相 | 决定是什么颜色 |
|---|---|---|
| S | 饱和度 | 决定颜色的浓淡 |
| B | 明度 | 决定照射在颜色的白光有多亮 |
颜色特性直观图.jpg
2. 配色要在网站搭建初期定好
无论是网页还是平面，每个作品的色彩搭配都不是凭空而来的。决定色彩之前一定要配合原先设定好的风格、基调、定位和面对用户群等等。值得注意的是，主色调最好在搭建网站的初期就敲定，之后的辅助色和点缀色会更好安排，也会更加融合。
日本一个设计师提出过一个配色的黄金比例，是70:25:5。这之中，70%为主色调，25%为辅助配色，5%为点缀色。在单一一个作品里，色彩最好不超过三种，也就是不超过三种色相。
3. 取色规律小结
-
单色+同色系微调
-
双色+点缀色（双色深点缀色浅，或者双色浅点缀色深为最佳）
-
三色以上是难度较大的配色方法！新手最好不要尝试
-
尽量不要使用颜色选择器右上角的颜色
右上角色.jpg
-
色轮上对角色（如黄色和蓝色构成撞色，网页整体看起来会更加活力）
色轮.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
网友评论