还不知道怎么配色?(ui配色教程)

大公司怎么配色的

学习要有榜样,我们先来看看互联网大厂们的配色,挑选了2个很有代表性的大厂作为参考。Microsoft 和 Google 的 logo 配色个人感觉很鲜艳,给人朝气蓬勃的印象。

 

Microsoft logo
 

Google logo

对鲜艳颜色比较偏好的同学可以考虑直接使用这两个logo的配色。下面给出这两个 logo 的配色方案。

 

microsoft 配色

Google 配色

也想有好看的配色,怎么办?

Microsoft 和 Google 的配色方案很好,但是咱们得有自己的风格不是?那么我们也想有自己风格的配色方案怎么办呢?这里介绍几个配色网站,总有几款适合自己的。

colorhunt

这个网站是我最早找到的配色网站,全部是四色配色方案。当时,眼前一亮,终于不用在作图工具上按顺序选择颜色了。colorhunt 提供了大量的、不同风格主题的配色方案供大家选择。

Colorhunt

网站地址:https://colorhunt.co/palettes/popular

coolors.co

这个网站更强大,知道这个之后,瞬间 觉得 colorhunt 简直是个小弟弟。

coolors 个人认为主要有如下几点:

  1. 锁定颜色生成配色方案
  2. 当前最流行探索
  3. 支持更多颜色配色方案,不用担心颜色不够用
  4. 色盲色弱支持
  5. 颜色分析工具
  6. 渐变颜色支持
  7. 颜色对比度测试工具

当然,还有更多功能,作为一个非专业人士,在上面几个特色功能中,我认为1、2两点已经能够满足我的日常需求。关于1、2 两点我想详细介绍下。

锁定颜色生成配色方案

作为随机主义者,尤其在自己没有任何偏好或者倾向的时候,完全随机配色,就能够很好地满足需求。但在具体的某个产品,或者有自己的色彩偏好,有时候完全随机并不会很好用。这时候,锁定其中一个配色再次进行随机,这个就比较实用了。可以先设置好自己项目的主色调,然后再生成其他辅助颜色,或者锁定主色和辅助色,再生成其他颜色,以此类推,逐步限定好颜色最终生成配色组合。

coolor 当前最流行探索

网站地址:https://coolors.co

Colormind

和 coolor 类似,这个配色工具也有一个随机颜色功能。如果仅仅这样那就没必要说它了。它的核心特点是提供了很多页面模板,选好一组配色后,可以实时预览在UI组件、网页、深浅色模式上,比单纯的看颜色组合能更加直观的看到应用到界面上的效果,这个功能对应UI设计同学简直不要太实用了。

colormind

网站地址:http://colormind.io/

Adobe Color

Adobe 不用多说了,设计、图像处理软件的老大。主打就是一个专业、黑科技。

专业

能根据颜色理论选择合适的颜色组合方式,比如类比色、单色、三元色、补色等等,如果想用某种颜色模式来构建自己的作品,那么这个工具会非常方便。

adobe color 配色

智能

相对 Coolor 和 Colormind 的探索模式,Adobe Color 的探索模式的特色就是智能,除了可以找到非常多的优质配色组合,还可以把自己喜欢的美图上传上来进行智能分析,然后得到非常棒的配色组合。一些年度色彩趋势,也会在这里进行推荐。比如,我上传了上面 Microsoft 的 logo 照片会生成如下推荐。

adobe color 探索

总结

上面介绍了四个配色工具各有特色。

  1. 如果想简单 colorhunt 完全能够满足需求。
  2. coolor 功能完备,有你想要的。
  3. colormind 提供的网页模版能力,对于前端 UI 同学来说无疑是好帮手。
  4. adobe color 的专业性与科技感,给你更多可能。

未经允许不得转载:肥猫博客 » 还不知道怎么配色?(ui配色教程)

赞 (0)
分享到: 更多

评论 0