设计师在设计界面时，怎么绘制出既符合主色又好看的渐变色按钮呢？（新手设计师教程）

大家好，我是 Just，这里是「设计师工作日常」，今天给大家分享一个取色小技巧，希望能帮助到大家，（大神请路过）。

最新文章通过公众号「设计师工作日常」发布。

---

前言

设计师怎么绘制出好看的渐变色，有人可能觉得说，这有什么难的呀，有那么多的配色网站，找一个符合的就可以了。

当然我也经常在此类配色网站上偷鸡，哈哈哈~

这里我也推荐两个本人经常用的渐变色配色网站。

渐变色配色网站

1、grabient

2、fresh background gradients

这两个网站的渐变色配色方案，都比较好看，而且还可以直接复制其 css 代码，复用到开发中。

网站的网址在文章末尾自取，直接复制网址在浏览器打开即可

配色技巧

但是在实际设计时，你要做的或者说客户要求的主题颜色，真的是千奇百怪咯~

比如：五彩斑斓的黑~ (这烂梗！真该死！)

在配色网站中没有适用的配色方案时，该怎么办呢？

比如按钮我想用一个既符合主题色又有点炫的渐变色，那怎么来配色呢？

所以，当主题颜色千奇百怪，没有现成的配色方案可用时，需要一些技巧来创造符合要求的渐变色。

---

这里的话，我告诉新手设计师一个取渐变色的小技巧，仅本人的一个取色习惯啊（大神勿喷！）

首先要确定网站或者app的主色，这个都懂的吧，就是你要设计的网站或者app的色调风格。

不同类型的设计风格通常会选择不同的色调。

例如，科技类设计通常选择蓝色调，而食品类设计则更倾向于选择黄色调。

一旦确定了主色调，设计师就可以在此基础上进行渐变色的调整和创作。

以下本人珍藏，一般不轻易外传的哟~

打开ps，先取一个既定色值，就是你的主色值，然后在此你主色值的基础上调整它的H(色相)值，我习惯的话一般小的渐变度是 H值±20~40。

比如你的既定色值为 hsb（211,56,86），那么这里 211 就是你的 H 值，然后这里将 H 值加40，就是211+40=251，那么你的按钮渐变的另一头的色值就是 hsb(251,56,86)。

如下图：

如果你想渐变的两头颜色差异再大点话，可以将 H值±40~60。

比如你的既定色值为 hsb（211,56,86），那么这里 211 就是你的 H 值，然后这里将 H 值减去60，就是211-60=151，那么你的按钮渐变的另一头的色值就是 hsb(151,56,86)。

如下图：

通过这个小技巧，设计师可以轻松地创建出符合要求的渐变色。

不仅可以帮助新手设计师快速掌握渐变色的创作方法，而且对于经验丰富的设计师来说也是一种实用的参考。

以上就是本次分享的内容，希望对你有一些帮助或者启发。

---

[1] grabient

[2] fresh background gradients

[3] 原文阅读

---

我是 Just，这里是「设计师工作日常」，求点赞求关注！