米坛社区 2024 下半年社区版主招募中🔥
--- 资 源 包 的 入 门 到 入 土 ---
- 05 如何正确配色 -
- 如何找到配色？ -
搞定配色
你的设计将发生质的改变
但你需要掌握色相
明度和彩度
还得理解科学的组合方式
有没有一招鲜的办法呢
有的。
找到和你的设计类似或相近作品
得到它的配色方案
然后直接用于你的设计
比如这两幅作品的配色方案是这样
你可以简单理解为
一幅作品用了这些个颜色（事实上不止）
下面是示例
- 05 如何正确配色 -
- 如何找到配色？ -
搞定配色
你的设计将发生质的改变
但你需要掌握色相
明度和彩度
还得理解科学的组合方式
有没有一招鲜的办法呢
有的。
找到和你的设计类似或相近作品
得到它的配色方案
然后直接用于你的设计
比如这两幅作品的配色方案是这样
你可以简单理解为
一幅作品用了这些个颜色（事实上不止）
下面是示例
如果你认为这幅作品的配色很适合你的某一个 PPT 主题
就可以把它直接用于你的设计
像这样
就可以把它直接用于你的设计
像这样
我们需要用到一种工具——取色器（拾色器）
很多常用软件都有
比如 PPT
PPT 插件 iSlide
常用截图神器 Snipaste
设计师伴侣 Photoshop ……
你可以通过取色器创建一份色卡
或者通过像
色采” 这样的配色 APP
一键取色，获得色卡
然后把色卡放在你的设计中
需要某种颜色时
打开取色器
一键取色即可
很多常用软件都有
比如 PPT
PPT 插件 iSlide
常用截图神器 Snipaste
设计师伴侣 Photoshop ……
你可以通过取色器创建一份色卡
或者通过像
色采” 这样的配色 APP
一键取色，获得色卡
然后把色卡放在你的设计中
需要某种颜色时
打开取色器
一键取色即可
除了取色器
需要记住的是
每一种颜色都有一个与之对应的色值
在电子设备中
常用的是 RGB 和十六进制两种表示方法
例如，在 PPT 中选中某一主体之后
在选择颜色时点击【其他颜色】
在弹出的对话框中点击【自定义】
可以看到当前颜色 RGB 值是（48，62，159）
把这个颜色放在 Photoshop 中
在拾色器中也能看到它的 RGB 值
并且注意到最下方的 16 进制数值为 #303e9f
也就是说 每一种颜色
都有一个与之对应的 RGB 值和十六位进制值
需要记住的是
每一种颜色都有一个与之对应的色值
在电子设备中
常用的是 RGB 和十六进制两种表示方法
例如，在 PPT 中选中某一主体之后
在选择颜色时点击【其他颜色】
在弹出的对话框中点击【自定义】
可以看到当前颜色 RGB 值是（48，62，159）
把这个颜色放在 Photoshop 中
在拾色器中也能看到它的 RGB 值
并且注意到最下方的 16 进制数值为 #303e9f
也就是说 每一种颜色
都有一个与之对应的 RGB 值和十六位进制值
除了取色器，我们也可以通过手动输入数值的方法来取得或应用配色方案。
以我们之前推荐过的五个渐变配色网站
为例。这是其中的 WebGradients
找到你喜欢的配色
把左下方的两个色值分别复制到渐变编辑器中
即可轻松获得一模一样的渐变配色方案。
- 如何正确渐变色？ -
在你的 PPT 或者海报设计中
可能会用上渐变这种本来过了时
又成为流行的奇怪配色
但别人的渐变大多都是这样的
而不懂配色的你
做出来的都是这样的这样的…
如果没有配色基础
或者对色彩搭配并不敏感
有这么些在线工具
可以让你获得不错的比旁人高级的渐变配色方案
CoolHue >>
CoolHue
首页大概有 60 种渐变色背景
当然，这个数目会持续增加
选择你中意的配色方案
点击下载即可获得一张适当分辨率的方形 PNG 图片。点击代码图标
可以复制该渐变色的 CSS3 语法
在一些网页设计中
直接应用
相比上传渐变色图片
更省流量
下方可以直接复制 16 进制代码
用于 PPT 或者 PS
甚至电脑画图程序当中。
🌏资源链接
Uigradients >>
Uigradients 也是一款简单的配色网站
点击左上角的菜单，即可显示所有内容
通过不同颜色选择不同配色
点击右上角的方向箭头
可以旋转配色角度
点击代码按钮，可以复制它的 Css 代码
用于其他设计
点击下载按钮即可获得一张足够分辨率的 JPG 图片
当然，你还可以直接点击顶部的色值
复制 16 进制色值。
🌏资源链接
Webgradients >>
Webgradients 大概拥有 180 种渐变配色
在首页点击色块即可全屏显示当前配色方案
同样，在底部可以复制 16 进制色值以及 CSS 代码
点击色块右上角，即可下载 PNG 格式图片。
🌏 资源链接
Gradients of Shapefactory >>
Gradients of Shapefactory 其实是整个网站的功能之一
其他功能你可以自行去发掘
整个界面显示当前色系的不同渐变颜色
点击色盘，更改色系
拖动左边的球形按钮，可以改变色度和亮度
鼠标放在某一色块上
点击圆圈并旋转拖动可以改变渐变色的角度
同样可以复制 16 进制色值，以及 CSS 代码
点击图片，可以看到全局。
🌏资源链接
以我们之前推荐过的五个渐变配色网站
为例。这是其中的 WebGradients
找到你喜欢的配色
把左下方的两个色值分别复制到渐变编辑器中
即可轻松获得一模一样的渐变配色方案。
- 如何正确渐变色？ -
在你的 PPT 或者海报设计中
可能会用上渐变这种本来过了时
又成为流行的奇怪配色
但别人的渐变大多都是这样的
而不懂配色的你
做出来的都是这样的这样的…
如果没有配色基础
或者对色彩搭配并不敏感
有这么些在线工具
可以让你获得不错的比旁人高级的渐变配色方案
CoolHue >>
CoolHue
首页大概有 60 种渐变色背景
当然，这个数目会持续增加
选择你中意的配色方案
点击下载即可获得一张适当分辨率的方形 PNG 图片。点击代码图标
可以复制该渐变色的 CSS3 语法
在一些网页设计中
直接应用
相比上传渐变色图片
更省流量
下方可以直接复制 16 进制代码
用于 PPT 或者 PS
甚至电脑画图程序当中。
🌏资源链接
Uigradients >>
Uigradients 也是一款简单的配色网站
点击左上角的菜单，即可显示所有内容
通过不同颜色选择不同配色
点击右上角的方向箭头
可以旋转配色角度
点击代码按钮，可以复制它的 Css 代码
用于其他设计
点击下载按钮即可获得一张足够分辨率的 JPG 图片
当然，你还可以直接点击顶部的色值
复制 16 进制色值。
🌏资源链接
Webgradients >>
Webgradients 大概拥有 180 种渐变配色
在首页点击色块即可全屏显示当前配色方案
同样，在底部可以复制 16 进制色值以及 CSS 代码
点击色块右上角，即可下载 PNG 格式图片。
🌏 资源链接
Gradients of Shapefactory >>
Gradients of Shapefactory 其实是整个网站的功能之一
其他功能你可以自行去发掘
整个界面显示当前色系的不同渐变颜色
点击色盘，更改色系
拖动左边的球形按钮，可以改变色度和亮度
鼠标放在某一色块上
点击圆圈并旋转拖动可以改变渐变色的角度
同样可以复制 16 进制色值，以及 CSS 代码
点击图片，可以看到全局。
🌏资源链接
以上文案及图片全部来自TOPBOOK
B站视频地址：
B站视频地址：
- 下 期 预 告 -
下期我们讲讲怎么做字体
敬请期待吧！！
最后来推一波我的资源包 100%覆盖率与原创率
欢迎支持呀
资源包 - [100%原创] Super Pixel UI 再次颠覆
-- Super Pixel UI -- - 再 次 颠 覆 - Super Pixel 他现在来了 你现在可能想知道 这个资源包为什么可以再次颠覆？ 让我们看看 小爱同学3的再次升级 与黑色的手环融为一体 灵动的麦克风动画 犹如彩虹在手环上跳动 加载动画也重新升级 这里 是一个全新的小爱同学。 细节决定成败了 不放过任何一个按钮的机会 全局圆角按钮 全新的按钮样式 音乐图标大变样！ 不管是从APP通知 还是到天气图标 全新的卡片样式 全新的更多图标...
www.bandbbs.cn
小米手环4资源包 - <To Circle UI> 圆了 圆出风范 让圆角，再跨一步。
< To Circle > 让圆角，再跨一步。 不负众望 从方形 到圆角 去掉边边框框 得到了这款全新设计的 圆形资源包 这次还是 100%覆盖率 让我们看看他的设计吧 用白色和透明渐变 做出了这款资源包 从APP通知 到圆形天气 圆形显得是那么和谐 找手机的新版动画 让一切更加流畅 这是一张设置图片 用白色与白-透明的渐变 做出一种更加舒适的设计 这就是To Circle贯穿全局的设计 实拍图~ 从米坛创建开始 我的资源包也开始了 MEUI MYUI...
www.bandbbs.cn
最后编辑:
