有了这个方法,5分钟搞定一套配色

用户头像
杭州/UI设计师/4年前/2051浏览
有了这个方法,5分钟搞定一套配色

分享一个我常用的方法,运用一个拱形帮助你快速掌握配色规律和方法。

更多设计文章,设计交流,欢迎添加 | 微信ddm7212

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。


颜色重要性

当你看见一个品牌的时候,你最先想到的品牌色是什么?比如之前发布的2020全球TOP100的颜色,其中很多我们熟悉的品牌,说品牌你第一眼就能想起什么颜色?

提到红色,你脑海中会想起什么品牌,互联网产品我会想到天猫,如果生活品牌我会想到可口可乐,因为这些品牌平时的线上线下一直在主打这些颜色。

提到绿色你能想到什么?星巴克,微信,这些品牌无时无刻不在我们身边。这就是品牌的魅力,这几年各大互联网公司也钟情去通过品牌色来提升他们的品牌印记。

美团为什么把品牌从绿色更新为黄色,很大一部分原因就是占据用户心中这个蓝色的入口,通过色彩将品牌传播出去,让用户认知到这个品牌正在发生变化。色彩如此重要,那么有没有什么方法能够快速帮助我们去定义一个色盘呢?今天我分享一个小技巧3步帮你搞定一套色彩。


第一步:确定基础颜色

第一步确定基础色,基础色就是你们品牌色,一般是LOGO的颜色,比如上图airbnb的红色,美团黄色,可口可乐的红色等等。这个从LOGO中提取,如果你是一个从0到1的新产品,那么你这个品牌色可以从色彩情感去思考下。

这个方法我用到了一个神器的色盘工具: https://paletton.com/,在工具里面右边的色盘里面,我输入一个品牌颜色#F5595F,这个颜色是airbnb的配色,我们今天来拿这个当案例。

输入后我们就在色相盘上得到一个珊瑚红色的色值。那么就开始思考,一个产品除了品牌色,我们还需要一个次要颜色。那么怎么提取,这个时候注意了,本期重点小技巧来了。


第二步:根据色彩弧线调整色彩

怎么定义辅助色,很简单,这个工具上有一个圆弧,我们可以调整这个色块上的色环,往左边就是颜色变深,往右边色彩就变亮。我们来试试,比如我想要一个辅助色颜色稍微比品牌色深一点,我们调动色环上圆弧往左边。

这样我们就得到一个不同色相的辅助色,你在圆环上调整的位置距离越大,你的色相对比就越大,颜色也越突出。

下一步,我们创建第三个辅助色,通过弧度去调整向右侧画的,这样得到了一个同样饱和度,柔和的黄色。这样调出的颜色,几乎和前面两个色调完美的结合了在一起。


第三步:根据需要调整弧度位置得出配色

第三步,我们就可以通过调整色环位置这个小技巧得出一整套配色板,我可以通过一点一点改变色调滑块的位置,去创建一套非常平衡同时比较和谐的配色。如果你想让你颜色对比大一点,活泼一点,你的滑条可以大一点,如果你希望你色彩对比柔和点,你的滑条可以小一点。总之大家都可以去试试。

同样的对比色,我也可以通过这样的方式得出。并且颜色饱和度,和谐度都非常的一致和谐。

如果你需要24个颜色,就围绕360的圆环,每间隔15度取一个颜色就好,为什么是15度,因为15X24=360刚好是一个色相环尺寸。


第四步:设计每个色相的色相环

当有了色板后,如果需要去设计一套更详细的色板就可以运用这个工具:https://coolors.co/,只要你输入色值,就可以得出这样的色板配色,非常好用,你们平时看见的那些大公司色板也是通过这样的方式生成。

今天分享的是一个简单的教程,非常适合新手做配色,自己做出的调色板,和到处吸的色板感觉会完全不一样。大家可以试试这个方法。

更多设计文章,设计交流,欢迎添加 | 微信ddm7212

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。


最后

大家别当一个收藏家,最好立马动手去试试。


26
举报
|
54
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
UI应用平面图标
钱包ui模板
【新年UI图标】游戏/娱乐icon
Security Camera UI kit
3D卡通UI界面图标可爱插画免扣素
高级表盘系列UI源文件
【新年UI图标】30个图标
智能家居中心 简约 UI设计组件库
UI通用设计素材1
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】珠宝icon
高级感金属拟物 UI设计组件库
UI界面 组件
【新年UI图标】优惠券icon
抽象液态渐变UI背景模版
盲盒APP UI设计
科技医疗透明柜UI界面设计
手表表盘UI系列
【新年UI图标】影音icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】钱包icon
我的钱包-UI界面设计-app
新拟态风格 UI设计组件库
UI 登录界面设计模板包
你可能喜欢
相关收藏夹
大家都在看
登录注册